Fix a crash when someone leaves while screensharing

Fix Walkie-Talkie mode in Safari

.env.example

@@ -6,6 +6,7 @@
 
 # Used for determining the homeserver to use for short urls etc.
 # VITE_DEFAULT_HOMESERVER=http://localhost:8008
+# VITE_FALLBACK_STUN_ALLOWED=false
 
 # Used for submitting debug logs to an external rageshake server
 # VITE_RAGESHAKE_SUBMIT_URL=http://localhost:9110/api/submit

.eslintrc.cjs

@@ -28,6 +28,10 @@ module.exports = {
                 "plugin:matrix-org/react",
                 "prettier",
             ],
+            rules: {
+                // We're aiming to convert this code to strict mode
+                "@typescript-eslint/no-non-null-assertion": "off",
+            },
         },
     ],
     settings: {

.github/workflows/lint.yaml

@@ -16,6 +16,8 @@ jobs:
         run: "yarn install"
       - name: Prettier
         run: "yarn run prettier:check"
+      - name: i18n
+        run: "yarn run i18n:check"
       - name: ESLint
         run: "yarn run lint:js"
       - name: Type check

.github/workflows/test.yaml

@@ -0,0 +1,18 @@
+name: Run jest tests
+on:
+  pull_request: {}
+jobs:
+  jest:
+    name: Run jest tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Yarn cache
+        uses: actions/setup-node@v3
+        with:
+          cache: "yarn"
+      - name: Install dependencies
+        run: "yarn install"
+      - name: Jest
+        run: "yarn run test"

.github/workflows/triage-incoming.yaml

@@ -0,0 +1,27 @@
+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 }}

README.md

@@ -1,26 +1,58 @@
 # Element Call
 
-Showcase for full mesh video chat powered by Matrix, implementing [MSC3401](https://github.com/matrix-org/matrix-spec-proposals/blob/matthew/group-voip/proposals/3401-group-voip.md).
+[![Chat](https://img.shields.io/matrix/webrtc:matrix.org)](https://matrix.to/#/#webrtc:matrix.org)
+[![Translate](https://translate.element.io/widgets/element-call/-/element-call/svg-badge.svg)](https://translate.element.io/engage/element-call/)
 
-Discussion in [#webrtc:matrix.org: ![#webrtc:matrix.org](https://img.shields.io/matrix/webrtc:matrix.org)](https://matrix.to/#/#webrtc:matrix.org)
+Full mesh group calls powered by [Matrix](https://matrix.org), implementing [MatrixRTC](https://github.com/matrix-org/matrix-spec-proposals/blob/matthew/group-voip/proposals/3401-group-voip.md).
 
-## Getting Started
+To try it out, visit our hosted version at [call.element.io](https://call.element.io). You can also find the latest development version continuously deployed to [element-call.netlify.app](https://element-call.netlify.app).
 
-`element-call` is built against the `robertlong/group-call` branch of [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/1902). Because of how this package is configured and Vite's requirements, you will need to clone it locally and use `yarn link` to stich things together.
+## Host it yourself
 
-First clone, install, and link `matrix-js-sdk`
+Until prebuilt tarballs are available, you'll need to build Element Call from source. First, clone and install the package:
+
+```
+git clone https://github.com/vector-im/element-call.git
+cd element-call
+yarn
+cp .env.example .env
+```
+
+You can now edit the configuration in `.env` to your liking. The most important thing is to set `VITE_DEFAULT_HOMESERVER` to the homeserver that the app should use, such as `https://call.ems.host`.
+
+Next, build the project:
+
+```
+yarn build
+```
+
+If all went well, you can now find the build output under `dist` as a series of static files. These can be hosted using any web server of your choice.
+
+Because Element Call uses client-side routing, your server must be able to route any requests to non-existing paths back to `/index.html`. For example, in Nginx you can achieve this with the `try_files` directive:
+
+```
+server {
+    ...
+    location / {
+        ...
+        try_files $uri /$uri /index.html;
+    }
+}
+```
+
+## Development
+
+Element Call is built against the `robertlong/group-call` branch of [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/2553). To get started, clone, install, and link the package:
 
 ```
 git clone https://github.com/matrix-org/matrix-js-sdk.git
 cd matrix-js-sdk
-git checkout robertlong/group-call
+git switch robertlong/group-call
 yarn
 yarn link
 ```
 
-Next you'll also need [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html) installed locally and running on port 8008.
-
-Finally we can set up this project.
+Next, we can set up this project:
 
 ```
 git clone https://github.com/vector-im/element-call.git
@@ -28,6 +60,13 @@ cd element-call
 yarn
 yarn link matrix-js-sdk
 cp .env.example .env
+```
+
+By default, the app expects you to have [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html) installed locally and running on port 8008. If you wish to use another homeserver, you can set it in your `.env` file.
+
+You're now ready to launch the development server:
+
+```
 yarn dev
 ```
 
@@ -35,20 +74,6 @@ yarn dev
 
 Configuration options are documented in the `.env` file.
 
-## License
+## Translation
 
-All files in this project are:
-
-Copyright 2021-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.
+If you'd like to help translate Element Call, head over to [translate.element.io](https://translate.element.io/engage/element-call/). You're also encouraged to join the [Element Translators](https://matrix.to/#/#translators:element.io) space to discuss and coordinate translation efforts.

babel.config.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          node: "current",
+        },
+      },
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+  ],
+  plugins: ["babel-plugin-transform-vite-meta-env"],
+};

i18next-parser.config.js

@@ -0,0 +1,20 @@
+export default {
+  keySeparator: false,
+  namespaceSeparator: false,
+  contextSeparator: "|",
+  pluralSeparator: "|",
+  createOldCatalogs: false,
+  defaultNamespace: "app",
+  lexers: {
+    ts: [{
+      lexer: "JavascriptLexer",
+      functions: ["t", "translatedError"],
+      functionsNamespace: ["useTranslation", "withTranslation"],
+    }],
+  },
+  locales: ["en-GB"],
+  output: "public/locales/$LOCALE/$NAMESPACE.json",
+  input: ["src/**/*.{ts,tsx}"],
+  sort: true,
+  useKeysAsDefaultValue: true,
+};

package.json

@@ -1,5 +1,6 @@
 {
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -10,7 +11,10 @@
     "prettier:format": "prettier -w src",
     "lint": "yarn lint:types && yarn lint:js",
     "lint:js": "eslint --max-warnings 0 src",
-    "lint:types": "tsc"
+    "lint:types": "tsc",
+    "i18n": "node_modules/i18next-parser/bin/cli.js",
+    "i18n:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update",
+    "test": "jest"
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
@@ -38,15 +42,19 @@
     "classnames": "^2.3.1",
     "color-hash": "^2.0.1",
     "events": "^3.3.0",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#98d119d6e1d39f1c5b01b36e7fda133e9f12f50c",
+    "i18next": "^21.10.0",
+    "i18next-browser-languagedetector": "^6.1.8",
+    "i18next-http-backend": "^1.4.4",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#7ec726e10be835588d4b188fcd3d137b4690d79a",
     "matrix-widget-api": "^1.0.0",
     "mermaid": "^8.13.8",
     "normalize.css": "^8.0.1",
     "pako": "^2.0.4",
     "postcss-preset-env": "^7",
     "re-resizable": "^6.9.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "18",
+    "react-dom": "18",
+    "react-i18next": "^11.18.6",
     "react-json-view": "^1.21.3",
     "react-router": "6",
     "react-router-dom": "^5.2.0",
@@ -59,10 +67,13 @@
     "@babel/core": "^7.16.5",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
     "@storybook/react": "^6.5.0-alpha.5",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/request": "^2.48.8",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
     "babel-loader": "^8.2.3",
+    "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",
@@ -71,12 +82,32 @@
     "eslint-plugin-matrix-org": "^0.4.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
+    "i18next-parser": "^6.6.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
     "prettier": "^2.6.2",
     "sass": "^1.42.1",
     "storybook-builder-vite": "^0.1.12",
     "typescript": "^4.6.4",
+    "typescript-strict-plugin": "^2.0.1",
     "vite": "^2.4.2",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^0.4.0"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "testMatch": [
+      "<rootDir>/test/**/*-test.[jt]s?(x)"
+    ],
+    "transformIgnorePatterns": [
+      "/node_modules/(?!d3)+$",
+      "/node_modules/(?!internmap)+$"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less|svg)+$": "identity-obj-proxy",
+      "^\\./IndexedDBWorker\\?worker$": "<rootDir>/test/mocks/workerMock.ts",
+      "^\\./olm$": "<rootDir>/test/mocks/olmMock.ts"
+    }
   }
 }

public/locales/bg/app.json

@@ -0,0 +1,131 @@
+{
+  "<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>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</1>": "<0>Възникна грешка.</0><1>Изпращнето на debug логове ще ни помогне да открием проблема.</1>",
+  "<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>",
+  "Accept camera/microphone permissions to join the call.": "Приемете разрешенията за камера/микрофон за да се присъедините в разговора.",
+  "Accept microphone permissions to join the call.": "Приемете разрешението за микрофона за да се присъедините в разговора.",
+  "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": "Аватар",
+  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Натискайки \"Напред\" се съгласявате с нашите <2>Правила и условия</2>",
+  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Натискайки \"Влез в разговора сега\", се съгласявате с нашите <2>Правила и условия</2>",
+  "Call link copied": "Връзка към разговора бе копирана",
+  "Call type menu": "Меню \"тип на разговора\"",
+  "Camera": "Камера",
+  "Camera {{n}}": "Камера {{n}}",
+  "Camera/microphone permissions needed to join the call.": "Необходими са разрешения за камера/микрофон за да се присъедините в разговора.",
+  "Change layout": "Промени изгледа",
+  "Close": "Затвори",
+  "Confirm password": "Потвърди паролата",
+  "Connection lost": "Връзката се изгуби",
+  "Copied!": "Копирано!",
+  "Copy and share this call link": "Копирай и сподели връзка към разговора",
+  "Create account": "Създай акаунт",
+  "Debug log": "Debug логове",
+  "Debug log request": "Заявка за debug логове",
+  "Description (optional)": "Описание (незадължително)",
+  "Details": "Детайли",
+  "Developer": "Разработчик",
+  "Display name": "Име/псевдоним",
+  "Download debug logs": "Изтеглете debug логове",
+  "Entering room…": "Влизане в стаята…",
+  "Exit full screen": "Излез от цял екран",
+  "Fetching group call timed out.": "Изтече времето за взимане на груповия разговор.",
+  "Freedom": "Свобода",
+  "Full screen": "Цял екран",
+  "Go": "Напред",
+  "Grid layout menu": "Меню \"решетков изглед\"",
+  "Having trouble? Help us fix it.": "Имате проблем? Помогнете да го поправим.",
+  "Home": "Начало",
+  "Include debug logs": "Включи debug логове",
+  "Incompatible versions": "Несъвместими версии",
+  "Incompatible versions!": "Несъвместими версии!",
+  "Inspector": "Инспектор",
+  "Invite": "Покани",
+  "Invite people": "Покани хора",
+  "Join call": "Влез в разговора",
+  "Join call now": "Влез в разговора сега",
+  "Join existing call?": "Присъединяване към съществуващ разговор?",
+  "Leave": "Напусни",
+  "Loading room…": "Напускане на стаята…",
+  "Loading…": "Зареждане…",
+  "Local volume": "Локална сила на звука",
+  "Logging in…": "Влизане…",
+  "Login": "Влез",
+  "Login to your account": "Влезте в акаунта си",
+  "Microphone": "Микрофон",
+  "Microphone permissions needed to join the call.": "Необходими са разрешения за микрофона за да можете да се присъедините в разговора.",
+  "Microphone {{n}}": "Микрофон {{n}}",
+  "More": "Още",
+  "More menu": "Мено \"още\"",
+  "Mute microphone": "Заглуши микрофона",
+  "No": "Не",
+  "Not now, return to home screen": "Не сега, върни се на началния екран",
+  "Not registered yet? <2>Create an account</2>": "Все още не сте регистрирани? <2>Създайте акаунт</2>",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Други потребители се опитват да се присъединят в разговора от несъвместими версии. Следните потребители трябва да проверят дали са презаредили браузърите си<1>{userLis}</1>",
+  "Password": "Парола",
+  "Passwords must match": "Паролите не съвпадат",
+  "Press and hold spacebar to talk": "Натиснете и задръжте Space за да говорите",
+  "Press and hold spacebar to talk over {{name}}": "Натиснете и задръжте Space за да говорите заедно с {{name}}",
+  "Press and hold to talk": "Натиснете и задръжте за да говорите",
+  "Press and hold to talk over {{name}}": "Натиснете и задръжте за да говорите заедно с {{name}}",
+  "Profile": "Профил",
+  "Recaptcha dismissed": "Recaptcha отхвърлена",
+  "Recaptcha not loaded": "Recaptcha не е заредена",
+  "Register": "Регистрация",
+  "Registering…": "Регистриране…",
+  "Release spacebar key to stop": "Отпуснете Space за да спрете",
+  "Release to stop": "Отпуснете за да спрете",
+  "Remove": "Премахни",
+  "Return to home screen": "Връщане на началния екран",
+  "Save": "Запази",
+  "Saving…": "Запазване…",
+  "Select an option": "Изберете опция",
+  "Send debug logs": "Изпратете debug логове",
+  "Sending…": "Изпращане…",
+  "Settings": "Настройки",
+  "Share screen": "Сподели екрана",
+  "Show call inspector": "Покажи инспектора на разговора",
+  "Sign in": "Влез",
+  "Sign out": "Излез",
+  "Spatial audio": "Пространствен звук",
+  "Speaker": "Говорител",
+  "Speaker {{n}}": "Говорител {{n}}",
+  "Spotlight": "Прожектор",
+  "Stop sharing screen": "Спри споделянето на екрана",
+  "Submit feedback": "Изпрати обратна връзка",
+  "Submitting feedback…": "Изпращане на обратна връзка…",
+  "Take me Home": "Отиди в Начало",
+  "Talk over speaker": "Говорете заедно с говорителя",
+  "Talking…": "Говорене…",
+  "Thanks! We'll get right on it.": "Благодарим! Веднага ще се заемем.",
+  "This call already exists, would you like to join?": "Този разговор вече съществува, искате ли да се присъедините?",
+  "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>Terms and conditions</12>": "Този сайт се предпазва от ReCAPTCHA и важат <2>Политиката за поверителност</2> и <6>Условията за ползване на услугата</6> на Google.<9></9>Натискайки \"Регистрация\", се съгласявате с нашите <12>Правила и условия</12>",
+  "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)": "Това прави звука на говорителя да изглежда, че излиза от мястото където са позиционирани на екрана. (Експериментална функция: може да повлияе на стабилността на звука.)",
+  "Turn off camera": "Изключи камерата",
+  "Turn on camera": "Включи камерата",
+  "Unmute microphone": "Включи микрофона",
+  "User ID": "Потребителски идентификатор",
+  "User menu": "Потребителско меню",
+  "Username": "Потребителско име",
+  "Version: {{version}}": "Версия: {{version}}",
+  "Video": "Видео",
+  "Video call": "Видео разговор",
+  "Video call name": "Име на видео разговора",
+  "Waiting for network": "Изчакване на мрежата",
+  "Waiting for other participants…": "Изчакване на други участници…",
+  "Walkie-talkie call": "Уоки-токи разговор",
+  "Walkie-talkie call name": "Име на уоки-токи разговора",
+  "WebRTC is not supported or is being blocked in this browser.": "WebRTC не се поддържа или се блокира от браузъра.",
+  "Yes, join call": "Да, присъедини се",
+  "You can't talk at the same time": "Не можете да говорите едновременно",
+  "Your recent calls": "Скорошните ви разговори",
+  "{{count}} people connected|one": "{{count}} човек се свърза",
+  "{{count}} people connected|other": "{{count}} човека се звързаха",
+  "{{displayName}}, your call is now ended": "{{displayName}}, разговорът ви приключи",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "{{name}} is presenting": "{{name}} презентира",
+  "{{name}} is talking…": "{{name}} говори…",
+  "{{roomName}} - Walkie-talkie call": "{{roomName}} - уоки-токи разговор"
+}

public/locales/cs/app.json

@@ -0,0 +1,83 @@
+{
+  "Copy and share this call link": "Zkopírujte a sdílejte odkaz na hovor",
+  "Copied!": "Zkopírováno!",
+  "Connection lost": "Připojení ztraceno",
+  "Confirm password": "Potvrdit heslo",
+  "Close": "Zavřít",
+  "Change layout": "Změnit rozložení",
+  "Camera/microphone permissions needed to join the call.": "Oprávnění k přístupu ke kameře/mikrofonu jsou nutná pro připojení k hovoru.",
+  "Camera {{n}}": "Kamera {{n}}",
+  "Camera": "Kamera",
+  "Call link copied": "Odkaz na hovor zkopírován",
+  "Avatar": "Avatar",
+  "Audio": "Audio",
+  "Accept microphone permissions to join the call.": "Povolte přístup k mikrofonu pro připojení k hovoru.",
+  "Accept camera/microphone permissions to join the call.": "Povolte přístup ke kameře/mikrofonu pro připojení do hovoru.",
+  "<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",
+  "You can't talk at the same time": "Teď nemůžete mluvit",
+  "Yes, join call": "Ano, připojit se",
+  "WebRTC is not supported or is being blocked in this browser.": "WebRTC není podporováno nebo je zakázáno tímto prohlížečem.",
+  "Waiting for other participants…": "Čekání na další účastníky…",
+  "Waiting for network": "Čekání na připojení",
+  "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",
+  "User ID": "ID uživatele",
+  "Unmute microphone": "Zapnout mikrofon",
+  "Turn on camera": "Zapnout kameru",
+  "Turn off camera": "Vypnout kameru",
+  "This call already exists, would you like to join?": "Tento hovor již existuje, chcete se připojit?",
+  "Thanks! We'll get right on it.": "Děkujeme! Hned se na to vrhneme.",
+  "Take me Home": "Domovská obrazovka",
+  "Submitting feedback…": "Odesílání zpětné vazby…",
+  "Submit feedback": "Dát feedback",
+  "Stop sharing screen": "Zastavit sdílení obrazovek",
+  "Speaker {{n}}": "Reproduktor {{n}}",
+  "Speaker": "Reproduktor",
+  "Spatial audio": "Prostorový zvuk",
+  "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í…",
+  "Sending debug logs…": "Posílání ladícího záznamu…",
+  "Send debug logs": "Poslat ladící záznam",
+  "Select an option": "Vyberte možnost",
+  "Saving…": "Ukládání…",
+  "Save": "Uložit",
+  "Return to home screen": "Vrátit se na domácí obrazovku",
+  "Remove": "Odstranit",
+  "Registering…": "Registrování…",
+  "Register": "Registrace",
+  "Profile": "Profil",
+  "Press and hold to talk": "Stiskněte a držte pro mluvení",
+  "Press and hold spacebar to talk": "Stiskněte a držte mezerník pro mluvení",
+  "Passwords must match": "Hesla se musí shodovat",
+  "Password": "Heslo",
+  "Not now, return to home screen": "Teď ne, vrátit se na domovskou obrazovku",
+  "No": "Ne",
+  "Mute microphone": "Ztlumit mikrofon",
+  "More": "Více",
+  "Microphone permissions needed to join the call.": "Přístup k mikrofonu je nutný pro připojení se k hovoru.",
+  "Microphone {{n}}": "Mikrofon {{n}}",
+  "Microphone": "Mikrofon",
+  "Login to your account": "Přihlásit se ke svůmu účtu",
+  "Login": "Přihlášení",
+  "Logging in…": "Přihlašování se…",
+  "Local volume": "Lokální hlasitost",
+  "Loading…": "Načítání…",
+  "Loading room…": "Načítání místnosti…",
+  "Leave": "Opustit hovor",
+  "Join call now": "Připojit se k hovoru",
+  "Join call": "Připojit se k hovoru",
+  "Invite people": "Pozvat lidi",
+  "Invite": "Pozvat",
+  "Inspector": "Insepktor",
+  "Incompatible versions!": "Nekompatibilní verze!",
+  "Incompatible versions": "Nekompatibilní verze"
+}

public/locales/de/app.json

@@ -0,0 +1,134 @@
+{
+  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Du hast bereits ein Konto?</0><1><0>Anmelden</0> Oder <2>Als Gast betreten</2></1>",
+  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Konto erstellen</0> Oder <2>Als Gast betreten</2>",
+  "<0>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</1>": "<0>Hoppla, da ist etwas schief gelaufen.</0><1>Die Übermittlung von Debug-Protokollen wird uns helfen, das Problem zu finden.</1>",
+  "<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>Warum vergibst du nicht abschließend ein Passwort, um dein Konto zu erhalten?</0><1>Du kannst deinen Namen behalten und ein Profilbild für zukünftige Anrufe festlegen.</1>",
+  "Accept camera/microphone permissions to join the call.": "Erlaube Zugriff auf Kamera/Mikrofon um dem Anruf beizutreten.",
+  "Accept microphone permissions to join the call.": "Erlaube Zugriff auf das Mikrofon um dem Anruf beizutreten.",
+  "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",
+  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Wenn du auf „Los geht’s“ klickst, akzeptierst du unsere <2>Geschäftsbedingungen</2>",
+  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Wenn du auf „Anruf beitreten“ klickst, akzeptierst du unsere <2>Geschäftsbedingungen</2>",
+  "Call link copied": "Anruflink kopiert",
+  "Call type menu": "Anruftyp Menü",
+  "Camera": "Kamera",
+  "Camera {{n}}": "Kamera {{n}}",
+  "Camera/microphone permissions needed to join the call.": "Kamera-/Mikrofonberechtigung für die Teilnahme am Anruf erforderlich.",
+  "Change layout": "Layout ändern",
+  "Close": "Schließen",
+  "Confirm password": "Passwort bestätigen",
+  "Connection lost": "Verbindung verloren",
+  "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",
+  "Description (optional)": "Beschreibung (optional)",
+  "Details": "Details",
+  "Developer": "Entwickler",
+  "Display name": "Anzeigename",
+  "Download debug logs": "Debug-Protokolle herunterladen",
+  "Entering room…": "Betrete Raum …",
+  "Exit full screen": "Vollbildmodus verlassen",
+  "Freedom": "Freiraum",
+  "Full screen": "Vollbild",
+  "Go": "Los geht’s",
+  "Grid layout menu": "Grid-Layout-Menü",
+  "Having trouble? Help us fix it.": "Du hast ein Problem? Hilf uns, es zu beheben.",
+  "Home": "Startseite",
+  "Include debug logs": "Debug-Protokolle einschließen",
+  "Incompatible versions": "Inkompatible Versionen",
+  "Incompatible versions!": "Inkompatible Versionen!",
+  "Inspector": "Inspektor",
+  "Invite": "Einladen",
+  "Invite people": "Personen einladen",
+  "Join call": "Anruf beitreten",
+  "Join call now": "Anruf beitreten",
+  "Join existing call?": "An bestehendem Anruf teilnehmen?",
+  "Leave": "Verlassen",
+  "Loading room…": "Lade Raum …",
+  "Loading…": "Lade …",
+  "Local volume": "Lokale Lautstärke",
+  "Logging in…": "Anmelden …",
+  "Login": "Anmelden",
+  "Login to your account": "Melde dich mit deinem Konto an",
+  "Microphone": "Mikrofon",
+  "Microphone permissions needed to join the call.": "Mikrofon-Berechtigung ist erforderlich, um dem Anruf beizutreten.",
+  "Microphone {{n}}": "Mikrofon {{n}}",
+  "More": "Mehr",
+  "More menu": "Weiteres Menü",
+  "Mute microphone": "Mikrofon stummschalten",
+  "No": "Nein",
+  "Not now, return to home screen": "Nicht jetzt, zurück zum Startbildschirm",
+  "Not registered yet? <2>Create an account</2>": "Noch nicht registriert? <2>Konto erstellen</2>",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Andere Benutzer versuchen, diesem Aufruf von einer inkompatiblen Softwareversion aus beizutreten. Diese Benutzer sollten ihre Web-Browser Seite neu laden:<1>{userLis}</1>",
+  "Password": "Passwort",
+  "Passwords must match": "Passwörter müssen übereinstimmen",
+  "Press and hold spacebar to talk": "Halte zum Sprechen die Leertaste gedrückt",
+  "Press and hold spacebar to talk over {{name}}": "Zum Verdrängen von {{name}} und Sprechen die Leertaste gedrückt halten",
+  "Press and hold to talk": "Zum Sprechen gedrückt halten",
+  "Press and hold to talk over {{name}}": "Zum Verdrängen von {{name}} und Sprechen gedrückt halten",
+  "Profile": "Profil",
+  "Recaptcha dismissed": "Recaptcha abgelehnt",
+  "Recaptcha not loaded": "Recaptcha nicht geladen",
+  "Register": "Registrieren",
+  "Registering…": "Registrierung …",
+  "Release spacebar key to stop": "Leertaste loslassen, um zu stoppen",
+  "Release to stop": "Loslassen zum Stoppen",
+  "Remove": "Entfernen",
+  "Return to home screen": "Zurück zum Startbildschirm",
+  "Save": "Speichern",
+  "Saving…": "Speichere …",
+  "Select an option": "Wähle eine Option",
+  "Send debug logs": "Debug-Logs senden",
+  "Sending…": "Senden …",
+  "Settings": "Einstellungen",
+  "Share screen": "Bildschirm teilen",
+  "Show call inspector": "Anrufinspektor anzeigen",
+  "Sign in": "Anmelden",
+  "Sign out": "Abmelden",
+  "Spatial audio": "Räumliche Audiowiedergabe",
+  "Speaker": "Wiedergabegerät",
+  "Speaker {{n}}": "Wiedergabegerät {{n}}",
+  "Spotlight": "Rampenlicht",
+  "Stop sharing screen": "Beenden der Bildschirmfreigabe",
+  "Submit feedback": "Rückmeldung geben",
+  "Submitting feedback…": "Sende Rückmeldung …",
+  "Take me Home": "Zurück zur Startseite",
+  "Talk over speaker": "Aktiven Sprecher verdrängen und sprechen",
+  "Talking…": "Sprechen …",
+  "Thanks! We'll get right on it.": "Vielen Dank! Wir werden uns sofort darum kümmern.",
+  "This call already exists, would you like to join?": "Dieser Aufruf existiert bereits, möchtest Du teilnehmen?",
+  "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>Terms and conditions</12>": "Diese Website wird durch ReCAPTCHA geschützt und es gelten die <2>Datenschutzerklärung</2> und <6>Nutzungsbedingungen</6> von Google.<9></9>Indem Du auf „Registrieren“ klickst, stimmst du unseren <12>Geschäftsbedingungen</12> zu",
+  "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)": "Dies wird die Audiowiedergabe eines Sprechers wirken lassen, als käme sie von der Stelle des zugehörigen Videobildes. (Experimentelle Funktion: Dies könnte die Stabilität der Audiowiedergabe beeinträchtigen.)",
+  "Turn off camera": "Kamera ausschalten",
+  "Turn on camera": "Kamera einschalten",
+  "Unmute microphone": "Mikrofon aktivieren",
+  "User ID": "Benutzer-ID",
+  "User menu": "Benutzermenü",
+  "Username": "Benutzername",
+  "Version: {{version}}": "Version: {{version}}",
+  "Video": "Video",
+  "Video call": "Videoanruf",
+  "Video call name": "Name des Videoanrufs",
+  "Waiting for network": "Warte auf Netzwerk",
+  "Waiting for other participants…": "Warte auf weitere Teilnehmer …",
+  "Walkie-talkie call": "Walkie-Talkie-Anruf",
+  "WebRTC is not supported or is being blocked in this browser.": "WebRTC wird in diesem Browser nicht unterstützt oder ist blockiert.",
+  "Yes, join call": "Ja, Anruf beitreten",
+  "You can't talk at the same time": "Du kannst nicht gleichzeitig sprechen",
+  "Your recent calls": "Deine letzten Anrufe",
+  "{{count}} people connected|one": "{{count}} Person verbunden",
+  "{{count}} people connected|other": "{{count}} Personen verbunden",
+  "{{displayName}}, your call is now ended": "{{displayName}}, dein Anruf wurde beendet",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "{{name}} is presenting": "{{name}} präsentiert",
+  "{{name}} is talking…": "{{name}} spricht …",
+  "{{roomName}} - Walkie-talkie call": "{{roomName}} – Walkie-Talkie-Anruf",
+  "Fetching group call timed out.": "Zeitüberschreitung beim Abrufen des Gruppenanrufs.",
+  "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>Anruflink kopieren und später beitreten</2>",
+  "{{name}} (Connecting...)": "{{name}} (verbindet sich …)"
+}

public/locales/en-GB/app.json

@@ -0,0 +1,134 @@
+{
+  "{{count}} people connected|one": "{{count}} person connected",
+  "{{count}} people connected|other": "{{count}} people connected",
+  "{{displayName}}, your call is now ended": "{{displayName}}, your call is now ended",
+  "{{name}} (Connecting...)": "{{name}} (Connecting...)",
+  "{{name}} is presenting": "{{name}} is presenting",
+  "{{name}} is talking…": "{{name}} is talking…",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "{{roomName}} - Walkie-talkie call": "{{roomName}} - Walkie-talkie 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><1>Submitting debug logs will help us track down the problem.</1>": "<0>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</1>",
+  "<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>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>",
+  "Accept camera/microphone permissions to join the call.": "Accept camera/microphone permissions to join the call.",
+  "Accept microphone permissions to join the call.": "Accept microphone permissions to join the call.",
+  "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",
+  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "By clicking \"Go\", you agree to our <2>Terms and conditions</2>",
+  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>",
+  "Call link copied": "Call link copied",
+  "Call type menu": "Call type menu",
+  "Camera": "Camera",
+  "Camera {{n}}": "Camera {{n}}",
+  "Camera/microphone permissions needed to join the call.": "Camera/microphone permissions needed to join the call.",
+  "Change layout": "Change layout",
+  "Close": "Close",
+  "Confirm password": "Confirm password",
+  "Connection lost": "Connection lost",
+  "Copied!": "Copied!",
+  "Copy and share this call link": "Copy and share this call link",
+  "Create account": "Create account",
+  "Debug log": "Debug log",
+  "Debug log request": "Debug log request",
+  "Description (optional)": "Description (optional)",
+  "Details": "Details",
+  "Developer": "Developer",
+  "Display name": "Display name",
+  "Download debug logs": "Download debug logs",
+  "Entering room…": "Entering room…",
+  "Exit full screen": "Exit full screen",
+  "Fetching group call timed out.": "Fetching group call timed out.",
+  "Freedom": "Freedom",
+  "Full screen": "Full screen",
+  "Go": "Go",
+  "Grid layout menu": "Grid layout menu",
+  "Having trouble? Help us fix it.": "Having trouble? Help us fix it.",
+  "Home": "Home",
+  "Include debug logs": "Include debug logs",
+  "Incompatible versions": "Incompatible versions",
+  "Incompatible versions!": "Incompatible versions!",
+  "Inspector": "Inspector",
+  "Invite": "Invite",
+  "Invite people": "Invite people",
+  "Join call": "Join call",
+  "Join call now": "Join call now",
+  "Join existing call?": "Join existing call?",
+  "Leave": "Leave",
+  "Loading room…": "Loading room…",
+  "Loading…": "Loading…",
+  "Local volume": "Local volume",
+  "Logging in…": "Logging in…",
+  "Login": "Login",
+  "Login to your account": "Login to your account",
+  "Microphone": "Microphone",
+  "Microphone {{n}}": "Microphone {{n}}",
+  "Microphone permissions needed to join the call.": "Microphone permissions needed to join the call.",
+  "More": "More",
+  "More menu": "More menu",
+  "Mute microphone": "Mute microphone",
+  "No": "No",
+  "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>",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>",
+  "Password": "Password",
+  "Passwords must match": "Passwords must match",
+  "Press and hold spacebar to talk": "Press and hold spacebar to talk",
+  "Press and hold spacebar to talk over {{name}}": "Press and hold spacebar to talk over {{name}}",
+  "Press and hold to talk": "Press and hold to talk",
+  "Press and hold to talk over {{name}}": "Press and hold to talk over {{name}}",
+  "Profile": "Profile",
+  "Recaptcha dismissed": "Recaptcha dismissed",
+  "Recaptcha not loaded": "Recaptcha not loaded",
+  "Register": "Register",
+  "Registering…": "Registering…",
+  "Release spacebar key to stop": "Release spacebar key to stop",
+  "Release to stop": "Release to stop",
+  "Remove": "Remove",
+  "Return to home screen": "Return to home screen",
+  "Save": "Save",
+  "Saving…": "Saving…",
+  "Select an option": "Select an option",
+  "Send debug logs": "Send debug logs",
+  "Sending debug logs…": "Sending debug logs…",
+  "Sending…": "Sending…",
+  "Settings": "Settings",
+  "Share screen": "Share screen",
+  "Show call inspector": "Show call inspector",
+  "Sign in": "Sign in",
+  "Sign out": "Sign out",
+  "Spatial audio": "Spatial audio",
+  "Speaker": "Speaker",
+  "Speaker {{n}}": "Speaker {{n}}",
+  "Spotlight": "Spotlight",
+  "Stop sharing screen": "Stop sharing screen",
+  "Submit feedback": "Submit feedback",
+  "Submitting feedback…": "Submitting feedback…",
+  "Take me Home": "Take me Home",
+  "Talk over speaker": "Talk over speaker",
+  "Talking…": "Talking…",
+  "Thanks! We'll get right on it.": "Thanks! We'll get right on it.",
+  "This call already exists, would you like to join?": "This call already exists, would you like to join?",
+  "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>Terms and conditions</12>": "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>Terms and conditions</12>",
+  "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)": "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)",
+  "Turn off camera": "Turn off camera",
+  "Turn on camera": "Turn on camera",
+  "Unmute microphone": "Unmute microphone",
+  "User ID": "User ID",
+  "User menu": "User menu",
+  "Username": "Username",
+  "Version: {{version}}": "Version: {{version}}",
+  "Video": "Video",
+  "Video call": "Video call",
+  "Video call name": "Video call name",
+  "Waiting for network": "Waiting for network",
+  "Waiting for other participants…": "Waiting for other participants…",
+  "Walkie-talkie call": "Walkie-talkie call",
+  "Walkie-talkie call name": "Walkie-talkie call name",
+  "WebRTC is not supported or is being blocked in this browser.": "WebRTC is not supported or is being blocked in this browser.",
+  "Yes, join call": "Yes, join call",
+  "You can't talk at the same time": "You can't talk at the same time",
+  "Your recent calls": "Your recent calls"
+}

public/locales/es/app.json

@@ -0,0 +1,134 @@
+{
+  "<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>",
+  "Press and hold to talk over {{name}}": "Mantén pulsado para hablar por encima de {{name}}",
+  "Your recent calls": "Tus llamadas recientes",
+  "WebRTC is not supported or is being blocked in this browser.": "Tu navegador no soporta o está bloqueando WebRTC.",
+  "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",
+  "Camera/microphone permissions needed to join the call.": "Se necesitan los permisos de cámara/micrófono para unirse a la llamada.",
+  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Al hacer clic en \"Unirse a la llamada ahora\", aceptarás nuestros <2>Términos y condiciones</2>",
+  "Accept microphone permissions to join the call.": "Acepta el permiso del micrófono para unirte a la llamada.",
+  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Al hacer clic en \"Comenzar\" aceptarás nuestros <2>Términos y condiciones</2>",
+  "You can't talk at the same time": "No podéis hablar a la vez",
+  "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…",
+  "Waiting for network": "Esperando a la red",
+  "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",
+  "User ID": "ID de usuario",
+  "Unmute microphone": "Desilenciar el micrófono",
+  "Turn on camera": "Encender la cámara",
+  "Turn off camera": "Apagar la cámara",
+  "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)": "Esto hará que el audio de la persona que hable parezca que viene de dondé esté posicionado en la pantalla. (Función experimental: esto puede afectar a la estabilidad del audio.)",
+  "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>Terms and conditions</12>": "Este sitio está protegido por ReCAPTCHA y se aplica <2>la Política de Privacidad</2> y <6>los Términos de Servicio</6> de Google.<9></9>Al hacer clic en \"Registrar\" aceptarás nuestros <12>Términos y condiciones</12>",
+  "Thanks! We'll get right on it.": "¡Gracias! Nos encargaremos de ello.",
+  "Talking…": "Hablando…",
+  "Talk over speaker": "Hablar por encima",
+  "Take me Home": "Volver al inicio",
+  "Submitting feedback…": "Enviando comentarios…",
+  "Submit feedback": "Enviar comentarios",
+  "Stop sharing screen": "Dejar de compartir pantalla",
+  "Spotlight": "Foco",
+  "Speaker {{n}}": "Altavoz {{n}}",
+  "Speaker": "Altavoz",
+  "Spatial audio": "Audio espacial",
+  "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…",
+  "Sending debug logs…": "Enviando registros de depuración…",
+  "Send debug logs": "Enviar registros de depuración",
+  "Select an option": "Selecciona una opción",
+  "Saving…": "Guardando…",
+  "Save": "Guardar",
+  "Return to home screen": "Volver a la pantalla de inicio",
+  "Remove": "Eliminar",
+  "Release to stop": "Suelta para parar",
+  "Release spacebar key to stop": "Suelta la barra espaciadora para parar",
+  "Registering…": "Registrando…",
+  "Recaptcha not loaded": "No se ha cargado el Recaptcha",
+  "Recaptcha dismissed": "Recaptcha cancelado",
+  "Profile": "Perfil",
+  "Press and hold to talk": "Mantén pulsado para hablar",
+  "Press and hold spacebar to talk over {{name}}": "Mantén pulsada la barra espaciadora para hablar por encima de {{name}}",
+  "Press and hold spacebar to talk": "Mantén pulsada la barra espaciadora para hablar",
+  "Passwords must match": "Las contraseñas deben coincidir",
+  "Password": "Contraseña",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Otros usuarios están intentando unirse a la llamada con versiones incompatibles. Estos usuarios deberán asegurarse de que han refrescado sus navegadores:<1>{userLis}</1>",
+  "Not now, return to home screen": "Ahora no, volver a la pantalla de inicio",
+  "No": "No",
+  "Mute microphone": "Silenciar micrófono",
+  "More menu": "Menú Más",
+  "More": "Más",
+  "Microphone permissions needed to join the call.": "Se necesitan permisos del micrófono para unirse a la llamada.",
+  "Microphone {{n}}": "Micrófono {{n}}",
+  "Microphone": "Micrófono",
+  "Login": "Iniciar sesión",
+  "Logging in…": "Iniciando sesión…",
+  "Local volume": "Volumen local",
+  "Loading…": "Cargando…",
+  "Loading room…": "Cargando sala…",
+  "Leave": "Abandonar",
+  "Join existing call?": "¿Unirse a llamada existente?",
+  "Join call now": "Unirse a la llamada ahora",
+  "Join call": "Unirse a la llamada",
+  "Invite people": "Invitar a gente",
+  "Invite": "Invitar",
+  "Inspector": "Inspector",
+  "Incompatible versions!": "¡Versiones incompatibles!",
+  "Incompatible versions": "Versiones incompatibles",
+  "Include debug logs": "Incluir registros de depuración",
+  "Home": "Inicio",
+  "Having trouble? Help us fix it.": "¿Tienes problemas? Ayúdanos a resolverlos.",
+  "Grid layout menu": "Menú de distribución de cuadrícula",
+  "Go": "Empezar",
+  "Full screen": "Pantalla completa",
+  "Freedom": "Libre",
+  "Fetching group call timed out.": "Se ha agotado el tiempo de espera para obtener la llamada grupal.",
+  "Exit full screen": "Salir de pantalla completa",
+  "Entering room…": "Entrando a la sala…",
+  "Download debug logs": "Descargar registros de depuración",
+  "Display name": "Nombre a mostrar",
+  "Developer": "Desarrollador",
+  "Details": "Detalles",
+  "Description (optional)": "Descripción (opcional)",
+  "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!",
+  "Connection lost": "Conexión perdida",
+  "Confirm password": "Confirmar contraseña",
+  "Close": "Cerrar",
+  "Change layout": "Cambiar distribución",
+  "Camera {{n}}": "Cámara {{n}}",
+  "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.",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "Audio": "Audio",
+  "Avatar": "Avatar",
+  "Accept camera/microphone permissions to join the call.": "Acepta los permisos de cámara/micrófono para unirte a la llamada.",
+  "<0>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</1>": "<0>Ups, algo ha salido mal.</0><1>Enviar los registros de depuración nos ayudará a localizar el problema.</1>",
+  "<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>",
+  "{{roomName}} - Walkie-talkie call": "{{roomName}} - Llamada de Walkie-talkie",
+  "{{name}} is talking…": "{{name}} está hablando…",
+  "{{name}} is presenting": "{{name}} está presentando",
+  "{{name}} (Connecting...)": "{{name}} (Conectando...)",
+  "{{displayName}}, your call is now ended": "{{displayName}}, tu llamada ha finalizado",
+  "{{count}} people connected|other": "{{count}} personas conectadas",
+  "{{count}} people connected|one": "{{count}} persona conectada"
+}

public/locales/et/app.json

@@ -0,0 +1,134 @@
+{
+  "Accept camera/microphone permissions to join the call.": "Kõnega anna õigused kaamera/mikrofoni kasutamiseks.",
+  "Accept microphone permissions to join the call.": "Kõnega liitumiseks anna õigused mikrofoni kasutamiseks.",
+  "<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 hoopis tahad salasõna seadistada ja sellega oma kasutajakonto alles jätta?</0><1>Siis saad säilitada oma nime ja määrata tunnuspildi, mida saad kasutada tulevastes kõnedes</1>",
+  "<0>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</1>": "<0>Ups, midagi läks valesti.</0><1>Logide saatmine meile aitab meil probleemi lahendada.</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>",
+  "{{roomName}} - Walkie-talkie call": "{{roomName}} - walkie-talkie-kõne",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "{{name}} is talking…": "{{nimi}} räägib…",
+  "{{name}} is presenting": "{{nimi}} esitab",
+  "{{name}} (Connecting...)": "{{nimi}} (ühendamisel...)",
+  "{{displayName}}, your call is now ended": "{{displayName}}, sinu kõne on nüüd lõppenud",
+  "{{count}} people connected|other": "{{count}} osalejat liitunud",
+  "{{count}} people connected|one": "{{count}} osaleja liitunud",
+  "Invite people": "Kutsu inimesi",
+  "Invite": "Kutsu",
+  "Inspector": "Inspektor",
+  "Incompatible versions!": "Ühildumatud versioonid!",
+  "Incompatible versions": "Ühildumatud versioonid",
+  "Include debug logs": "Lisa veatuvastuslogid",
+  "Home": "Avavaatesse",
+  "Having trouble? Help us fix it.": "Kas on probleeme? Aita meil asja parandada.",
+  "Grid layout menu": "Ruudustikvaate menüü",
+  "Go": "Jätka",
+  "Full screen": "Täisekraan",
+  "Freedom": "Vaba",
+  "Fetching group call timed out.": "Grupikõne kättesaamine aegus.",
+  "Exit full screen": "Välju täisekraanivaatest",
+  "Entering room…": "Ruumi sisenemine…",
+  "Download debug logs": "Lae alla veatuvastuslogid",
+  "Display name": "Kuvatav nimi",
+  "Developer": "Arendaja",
+  "Details": "Täpsemalt",
+  "Description (optional)": "Kirjeldus (valikuline)",
+  "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!",
+  "Connection lost": "Ühendus on katkenud",
+  "Confirm password": "Kinnita salasõna",
+  "Close": "Sulge",
+  "Change layout": "Muuda paigutust",
+  "Camera/microphone permissions needed to join the call.": "Kõnega liitumiseks vajalikud kaamera/mikrofoni kasutamise load.",
+  "Camera {{n}}": "Kaamera {{n}}",
+  "Camera": "Kaamera",
+  "Call type menu": "Kõnetüübi valik",
+  "Call link copied": "Kõne link on kopeeritud",
+  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Klõpsides „Liitu kõnega“nõustud sa meie <2>kasutustingimustega</2>",
+  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Klõpsides „Jätka“nõustud sa meie <2>kasutustingimustega</2>",
+  "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.",
+  "Press and hold spacebar to talk": "Rääkimiseks vajuta ja hoia all tühikuklahvi",
+  "Passwords must match": "Salasõnad ei klapi",
+  "Password": "Salasõna",
+  "Not registered yet? <2>Create an account</2>": "Pole veel registreerunud? <2>Loo kasutajakonto</2>",
+  "Not now, return to home screen": "Mitte praegu, mine tagasi avalehele",
+  "No": "Ei",
+  "Mute microphone": "Summuta mikrofon",
+  "Your recent calls": "Hiljutised kõned",
+  "You can't talk at the same time": "Üheaegselt ei saa rääkida",
+  "More menu": "Rohkem valikuid",
+  "More": "Rohkem",
+  "Microphone permissions needed to join the call.": "Kõnega liitumiseks on vaja lubada mikrofoni kasutamine.",
+  "Microphone {{n}}": "Mikrofon {{n}}",
+  "Microphone": "Mikrofon",
+  "Login to your account": "Logi oma kontosse sisse",
+  "Login": "Sisselogimine",
+  "Logging in…": "Sisselogimine …",
+  "Local volume": "Kohalik helitugevus",
+  "Loading…": "Laadimine …",
+  "Loading room…": "Ruumi laadimine …",
+  "Leave": "Lahku",
+  "Join existing call?": "Liitu juba käimasoleva kõnega?",
+  "Join call now": "Kõnega liitumine",
+  "Join call": "Kõnega liitumine",
+  "User ID": "Kasutajatunnus",
+  "Turn on camera": "Lülita kaamera sisse",
+  "Turn off camera": "Lülita kaamera välja",
+  "Submitting feedback…": "Tagasiside saatmine…",
+  "Take me Home": "Mine avalehele",
+  "Submit feedback": "Jaga tagasisidet",
+  "Stop sharing screen": "Lõpeta ekraani jagamine",
+  "Spotlight": "Rambivalgus",
+  "Speaker {{n}}": "Kõlar {{n}}",
+  "Speaker": "Kõlar",
+  "Spatial audio": "Ruumiline heli",
+  "Sign out": "Logi välja",
+  "Sign in": "Logi sisse",
+  "Show call inspector": "Näita kõneteavet",
+  "Share screen": "Jaga ekraani",
+  "Settings": "Seadistused",
+  "Sending…": "Saatmine…",
+  "Sending debug logs…": "Veaotsingulogide saatmine…",
+  "Send debug logs": "Saada veaotsingulogid",
+  "Select an option": "Vali oma eelistus",
+  "Saving…": "Salvestamine…",
+  "Save": "Salvesta",
+  "Return to home screen": "Tagasi avalehele",
+  "Remove": "Eemalda",
+  "Release to stop": "Peatamiseks vabasta klahv",
+  "Release spacebar key to stop": "Peatamiseks vabasta tühikuklahv",
+  "Registering…": "Registreerimine…",
+  "Register": "Registreeru",
+  "Recaptcha not loaded": "Robotilõks pole laetud",
+  "Recaptcha dismissed": "Robotilõks on vahele jäetud",
+  "Profile": "Profiil",
+  "Press and hold to talk over {{name}}": "{{name}} ülerääkimiseks vajuta ja hoia all",
+  "Press and hold to talk": "Rääkimiseks vajuta ja hoia all",
+  "Press and hold spacebar to talk over {{name}}": "{{name}} ülerääkimiseks vajuta ja hoia all tühikuklahvi",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Teised kasutajad üritavad selle kõnega liituda ühildumatuid versioone kasutades. Need kasutajad peaksid oma brauseris lehe uuestilaadimise tegema:<1>{userLis}</1>",
+  "Waiting for other participants…": "Ootame teiste osalejate lisandumist…",
+  "Waiting for network": "Ootame võrguühendust",
+  "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?",
+  "Talking…": "Jutt käib…",
+  "Talk over speaker": "Räägi teisest kõnelejast üle",
+  "Thanks! We'll get right on it.": "Tänud! Tegeleme sellega esimesel võimalusel.",
+  "Unmute microphone": "Aktiveeri mikrofon",
+  "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",
+  "WebRTC is not supported or is being blocked in this browser.": "WebRTC pole kas selles brauseris toetatud või on keelatud.",
+  "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)": "Muudab kõneleja heli nii, nagu tuleks see sealt, kus on tema pilt ekraanil. (See on katseline funktsionaalsus ja võib mõjutada heli stabiilsust.)",
+  "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>Terms and conditions</12>": "Siin saidis on kasutusel ReCAPTCHA ning kehtivad Google <2>privaatsuspoliitika</2> ja <6>teenusetingimused</6>.<9></9>Klikkides „Registreeru“, nõustud meie <12>kasutustingimustega</12>"
+}

public/locales/fa/app.json

@@ -0,0 +1,132 @@
+{
+  "Your recent calls": "تماس‌های اخیر شما",
+  "Video call": "تماس تصویری",
+  "Video": "ویدیو",
+  "Username": "نام کاربری",
+  "User ID": "آی دی کاربر",
+  "Turn on camera": "روشن کردن دوربین",
+  "Turn off camera": "خاموش کردن دوربین",
+  "Take me Home": "مرا به خانه ببر",
+  "Speaker": "بلندگو",
+  "Sign out": "خروج",
+  "Sign in": "ورود",
+  "Settings": "تنظیمات",
+  "Save": "ذخیره",
+  "Profile": "پروفایل",
+  "Password": "رمز عبور",
+  "No": "خیر",
+  "Mute microphone": "بی‌صدا کردن میکروفون",
+  "More": "بیشتر",
+  "Microphone": "میکروفون",
+  "Login to your account": "به حساب کاربری خود وارد شوید",
+  "Login": "ورود",
+  "Loading…": "بارگزاری…",
+  "Loading room…": "بارگزاری اتاق…",
+  "Leave": "خروج",
+  "Join existing call?": "پیوست به تماس؟",
+  "Join call now": "الان به تماس بپیوند",
+  "Join call": "پیوستن به تماس",
+  "Invite people": "دعوت از افراد",
+  "Invite": "دعوت",
+  "Home": "خانه",
+  "Go": "رفتن",
+  "Full screen": "تمام صحفه",
+  "Freedom": "آزادی",
+  "Exit full screen": "خروج از حالت تمام صفحه",
+  "Entering room…": "درحال وارد شدن به اتاق…",
+  "Download debug logs": "دانلود لاگ عیب‌یابی",
+  "Display name": "نام نمایشی",
+  "Developer": "توسعه دهنده",
+  "Details": "جزئیات",
+  "Description (optional)": "توضیحات (اختیاری)",
+  "Debug log request": "درخواست لاگ عیب‌یابی",
+  "Debug log": "لاگ عیب‌یابی",
+  "Create account": "ساخت حساب کاربری",
+  "Copy and share this call link": "لینک تماس را کپی کنید و به اشتراک بگذارید",
+  "Copied!": "کپی شد!",
+  "Connection lost": "ارتباط قطع شد",
+  "Confirm password": "تایید رمزعبور",
+  "Close": "بستن",
+  "Change layout": "تغییر طرح",
+  "Camera/microphone permissions needed to join the call.": "برای پیوستن به تماس، دسترسی به دوربین/ میکروفون نیاز است.",
+  "Camera {{n}}": "دوربین {{n}}",
+  "Camera": "دوربین",
+  "Call type menu": "منوی نوع تماس",
+  "Call link copied": "لینک تماس کپی شد",
+  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "با کلیک بر روی پیوستن به تماس، شما با <2>شرایط و قوانین استفاده</2> موافقت می‌کنید",
+  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "با کلیک بر روی برو، شما با <2>شرایط و قوانین استفاده</2> موافقت می‌کنید",
+  "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.": "کاربر دیگری در این تماس مشکلی دارد. برای تشخیص بهتر مشکل، بهتر است ما لاگ عیب‌یابی را جمع‌آوری کنیم.",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "Accept microphone permissions to join the call.": "پذیرفتن دسترسی به میکروفون برای پیوستن به تماس.",
+  "Accept camera/microphone permissions to join the call.": "پذیرفتن دسترسی دوربین/ میکروفون برای پیوستن به تماس.",
+  "<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>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</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>",
+  "{{roomName}} - Walkie-talkie call": "{{roomName}} - تماس واکی-تاکی",
+  "{{name}} is talking…": "{{name}} در حال صحبت است…",
+  "{{name}} is presenting": "{{name}} حاضر است",
+  "{{displayName}}, your call is now ended": "{{displayName}} تماس شما پایان یافت",
+  "{{count}} people connected|other": "{{count}} نفر متصل هستند",
+  "{{count}} people connected|one": "{{count}} فرد متصل هستند",
+  "Local volume": "حجم داخلی",
+  "Inspector": "بازرس",
+  "Incompatible versions!": "نسخه‌های ناسازگار!",
+  "Incompatible versions": "نسخه‌های ناسازگار",
+  "Spotlight": "نور افکن",
+  "Speaker {{n}}": "بلندگو {{n}}",
+  "Show call inspector": "نمایش بازرس تماس",
+  "Share screen": "اشتراک گذاری صفحه نمایش",
+  "Sending…": "در حال ارسال…",
+  "Sending debug logs…": "در حال ارسال باگ‌های عیب‌یابی…",
+  "Send debug logs": "ارسال لاگ‌های عیب‌یابی",
+  "Select an option": "یک گزینه را انتخاب کنید",
+  "Saving…": "در حال ذخیره…",
+  "Return to home screen": "برگشت به صفحه اصلی",
+  "Remove": "حذف",
+  "Release to stop": "برای توقف رها کنید",
+  "Release spacebar key to stop": "اسپیس بار را برای توقف رها کنید",
+  "Registering…": "ثبت‌نام…",
+  "Register": "ثبت‌نام",
+  "Recaptcha not loaded": "کپچا بارگیری نشد",
+  "Recaptcha dismissed": "بازکپچا رد شد",
+  "Press and hold to talk over {{name}}": "برای صحبت فشار دهید و نگه‌دارید {{name}}",
+  "Press and hold to talk": "برای صحبت فشار دهید و نگه‌دارید",
+  "Press and hold spacebar to talk over {{name}}": "برای صحبت کردن دکمه اسپیس بار را فشار دهید و نگه دارید {{name}}",
+  "Press and hold spacebar to talk": "برای صحبت کردن کلید فاصله را فشار داده و نگه دارید",
+  "Passwords must match": "رمز عبور باید همخوانی داشته باشد",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "کاربران دیگر تلاش می‌کنند با ورژن‌های ناسازگار به مکالمه بپیوندند. این کاربران باید از بروزرسانی مرورگرشان اطمینان داشته باشند:<1>{userLis}</1>",
+  "Not registered yet? <2>Create an account</2>": "هنوز ثبت‌نام نکرده‌اید؟ <2>ساخت حساب کاربری</2>",
+  "Not now, return to home screen": "الان نه، به صفحه اصلی برگردید",
+  "More menu": "تنظیمات بیشتر",
+  "Microphone permissions needed to join the call.": "برای پیوستن به مکالمه دسترسی به میکروفون نیاز است.",
+  "Microphone {{n}}": "میکروفون {{n}}",
+  "Logging in…": "ورود…",
+  "Include debug logs": "شامل لاگ‌های عیب‌یابی",
+  "Having trouble? Help us fix it.": "با مشکلی رو به رو شدید؟ به ما کمک کنید رفعش کنیم.",
+  "Grid layout menu": "منوی طرح‌بندی شبکه‌ای",
+  "Fetching group call timed out.": "زمان اتصال به مکالمه گروهی تمام شد.",
+  "You can't talk at the same time": "شما نمی توانید همزمان تماس بگیرید",
+  "Yes, join call": "بله، به تماس بپیوندید",
+  "WebRTC is not supported or is being blocked in this browser.": "WebRTC (ارتباطات رسانه‌ای بلادرنگ مانند انتقال صدا، ویدئو و داده‌) در این مرورگر پشتیبانی نمی‌شود یا در حال مسدود شدن است.",
+  "Walkie-talkie call name": "نامِ تماسِ واکی-تاکی",
+  "Walkie-talkie call": "تماسِ واکی-تاکی",
+  "Waiting for other participants…": "در انتظار برای دیگر شرکت‌کنندگان…",
+  "Waiting for network": "در انتظار شبکه",
+  "Video call name": "نامِ تماسِ تصویری",
+  "Version: {{version}}": "نسخه: {{نسخه}}",
+  "User menu": "فهرست کاربر",
+  "Unmute microphone": "میکروفون را باصدا کنید",
+  "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)": "این کار باعث می‌شود صدای بلندگو از جایی که کاشی‌های آن روی صفحه قرار گرفته است به نظر برسد. (ویژگی آزمایشی: این ممکن است بر پایداری صدا تأثیر بگذارد.)",
+  "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>Terms and conditions</12>": "این سایت توسط ReCAPTCHA محافظت می شود و <2>خط مشی رازداری</2> و <6>شرایط خدمات</6> Google اعمال می شود.<9></9>با کلیک کردن بر روی \"ثبت نام\"، شما با <12 >شرایط و ضوابط </12> ما موافقت می کنید",
+  "This call already exists, would you like to join?": "این تماس از قبل وجود دارد، می‌خواهید بپیوندید؟",
+  "Thanks! We'll get right on it.": "با تشکر! ما به درستی آن را انجام خواهیم داد.",
+  "Talking…": "در حال صحبت کردن…",
+  "Talk over speaker": "روی بلندگو صحبت کنید",
+  "Submitting feedback…": "در حال ارسال بازخورد…",
+  "Submit feedback": "بازخورد ارائه دهید",
+  "Stop sharing screen": "توقف اشتراک‌گذاری صفحه نمایش",
+  "Spatial audio": "صدای فضایی"
+}

public/locales/fr/app.json

@@ -0,0 +1,134 @@
+{
+  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Créer un compte</0> Or <2>Accès invité</2>",
+  "<0>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</1>": "<0>Mince, une erreur est survenue.</0><1>Envoyer les journaux de débogage nous aidera à résoudre le problème.</1>",
+  "<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>Pourquoi ne pas créer un mot de passe pour conserver votre compte ?</0><1>Vous pourrez garder votre nom et définir un avatar pour vos futurs appels</1>",
+  "Accept camera/microphone permissions to join the call.": "Autorisez l’accès à votre caméra et microphone pour rejoindre l’appel.",
+  "Accept microphone permissions to join the call.": "Autorisez l’accès au microphone pour rejoindre l’appel.",
+  "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",
+  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "En cliquant sur « Commencer » vous acceptez nos <2>conditions d’utilisation</2>",
+  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "En cliquant sur « Rejoindre l’appel » vous acceptez nos <2>conditions d’utilisation</2>",
+  "Call link copied": "Lien de l’appel copié",
+  "Call type menu": "Menu de type d’appel",
+  "Camera": "Caméra",
+  "Camera {{n}}": "Caméra {{n}}",
+  "Camera/microphone permissions needed to join the call.": "Accès à la caméra et au microphone requis pour rejoindre l’appel.",
+  "Change layout": "Changer la disposition",
+  "Close": "Fermer",
+  "Confirm password": "Confirmer le mot de passe",
+  "Connection lost": "Connexion interrompue",
+  "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",
+  "Description (optional)": "Description (facultatif)",
+  "Details": "Informations",
+  "Developer": "Développeur",
+  "Display name": "Nom d’affichage",
+  "Download debug logs": "Télécharger les journaux de débogage",
+  "Entering room…": "Entrée dans le salon…",
+  "Exit full screen": "Quitter le plein écran",
+  "Freedom": "Libre",
+  "Full screen": "Plein écran",
+  "Go": "Commencer",
+  "Grid layout menu": "Menu en grille",
+  "Having trouble? Help us fix it.": "Un problème ? Aidez nous à le résoudre.",
+  "Home": "Accueil",
+  "Include debug logs": "Inclure les journaux de débogage",
+  "Incompatible versions": "Versions incompatibles",
+  "Incompatible versions!": "Versions incompatibles !",
+  "Inspector": "Inspecteur",
+  "Invite people": "Inviter des gens",
+  "Join call": "Rejoindre l’appel",
+  "Join call now": "Rejoindre l’appel maintenant",
+  "Join existing call?": "Rejoindre un appel existant ?",
+  "Leave": "Partir",
+  "Loading room…": "Chargement du salon…",
+  "Loading…": "Chargement…",
+  "Local volume": "Volume local",
+  "Logging in…": "Connexion…",
+  "Login": "Connexion",
+  "Login to your account": "Connectez vous à votre compte",
+  "Microphone": "Microphone",
+  "Microphone permissions needed to join the call.": "Accès au microphone requis pour rejoindre l’appel.",
+  "Microphone {{n}}": "Microphone {{n}}",
+  "More": "Plus",
+  "More menu": "Menu plus",
+  "Mute microphone": "Couper le micro",
+  "No": "Non",
+  "Not now, return to home screen": "Pas maintenant, retourner à l’accueil",
+  "Not registered yet? <2>Create an account</2>": "Pas encore de compte ? <2>En créer un</2>",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Des utilisateurs essayent de rejoindre cet appel à partir de versions incompatibles. Ces utilisateurs doivent rafraîchir la page dans leur navigateur : <1>{userLis}</1>",
+  "Password": "Mot de passe",
+  "Passwords must match": "Les mots de passe doivent correspondre",
+  "Press and hold spacebar to talk": "Appuyez et maintenez la barre d’espace enfoncée pour parler",
+  "Press and hold spacebar to talk over {{name}}": "Appuyez et maintenez la barre d’espace enfoncée pour parler par dessus {{name}}",
+  "Press and hold to talk": "Appuyez et maintenez enfoncé pour parler",
+  "Press and hold to talk over {{name}}": "Appuyez et maintenez enfoncé pour parler par dessus {{name}}",
+  "Profile": "Profil",
+  "Recaptcha dismissed": "Recaptcha refusé",
+  "Recaptcha not loaded": "Recaptcha non chargé",
+  "Register": "S’enregistrer",
+  "Registering…": "Enregistrement…",
+  "Release spacebar key to stop": "Relâcher la barre d’espace pour arrêter",
+  "Release to stop": "Relâcher pour arrêter",
+  "Remove": "Supprimer",
+  "Return to home screen": "Retour à l’accueil",
+  "Save": "Enregistrer",
+  "Saving…": "Enregistrement…",
+  "Select an option": "Sélectionnez une option",
+  "Send debug logs": "Envoyer les journaux de débogage",
+  "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",
+  "Spatial audio": "Audio spatialisé",
+  "Spotlight": "Premier plan",
+  "Stop sharing screen": "Arrêter le partage d’écran",
+  "Submit feedback": "Envoyer des retours",
+  "Submitting feedback…": "Envoi des retours…",
+  "Take me Home": "Retouner à l’accueil",
+  "Talk over speaker": "Parler par dessus l’intervenant",
+  "Thanks! We'll get right on it.": "Merci ! Nous allons nous y attaquer.",
+  "This call already exists, would you like to join?": "Cet appel existe déjà, voulez-vous le rejoindre ?",
+  "{{name}} is presenting": "{{name}} est le présentateur",
+  "Fetching group call timed out.": "Échec de connexion à l’appel de groupe dans le temps imparti.",
+  "{{roomName}} - Walkie-talkie call": "{{roomName}} — Appel talkie-walkie",
+  "{{name}} is talking…": "{{name}} est en train de parler…",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "{{displayName}}, your call is now ended": "{{displayName}}, votre appel est désormais terminé",
+  "{{count}} people connected|other": "{{count}} personnes connectées",
+  "{{count}} people connected|one": "{{count}} personne connectée",
+  "Your recent calls": "Appels récents",
+  "You can't talk at the same time": "Vous ne pouvez pas parler en même temps",
+  "Yes, join call": "Oui, rejoindre l’appel",
+  "WebRTC is not supported or is being blocked in this browser.": "WebRTC n’est pas pris en charge ou est bloqué par ce navigateur.",
+  "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…",
+  "Waiting for network": "En attente du réseau",
+  "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",
+  "User menu": "Menu utilisateur",
+  "User ID": "Identifiant utilisateur",
+  "Unmute microphone": "Allumer le micro",
+  "Turn on camera": "Allumer la caméra",
+  "Turn off camera": "Couper la caméra",
+  "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)": "Cela donnera l’impression que le son de l’intervenant provient de là où leur tuile est positionnée sur l’écran. (Fonctionnalité expérimentale : ceci pourrait avoir un impact sur la stabilité du son.)",
+  "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>Terms and conditions</12>": "Ce site est protégé par ReCAPTCHA, la <2>politique de confidentialité</2> et les <6>conditions d’utilisation</6> de Google s’appliquent.<9></9>En cliquant sur « S’enregistrer » vous acceptez également nos <12>conditions d’utilisation</12>",
+  "Talking…": "Vous parlez…",
+  "Speaker {{n}}": "Intervenant {{n}}",
+  "Speaker": "Intervenant",
+  "Invite": "Inviter",
+  "<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>",
+  "{{name}} (Connecting...)": "{{name}} (Connexion…)"
+}

public/locales/id/app.json

@@ -0,0 +1,134 @@
+{
+  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Sudah punya akun?</0><1><0>Masuk</0> Atau <2>Akses sebagai tamu</2></1>",
+  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Buat akun</0> Atau <2>Akses sebagai tamu</2>",
+  "<0>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</1>": "<0>Aduh, ada yang salah.</0><1>Mengirimkan catatan pengawakutuan akan membantu kami melacak masalahnya.</1>",
+  "<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>Kenapa tidak selesaikan dengan mengatur sebuah kata sandi untuk menjaga akun Anda?</0><1>Anda akan dapat tetap menggunakan nama Anda dan atur sebuah avatar untuk digunakan dalam panggilan di masa mendatang</1>",
+  "Accept camera/microphone permissions to join the call.": "Terima izin kamera/mikrofon untuk bergabung ke panggilan.",
+  "Accept microphone permissions to join the call.": "Terima izin mikrofon untuk bergabung ke panggilan.",
+  "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",
+  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Dengan mengeklik \"Bergabung\", Anda terima <2>syarat dan ketentuan</2> kami",
+  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Dengan mengeklik \"Bergabung ke panggilan sekarang\", Anda terima <2>syarat dan ketentuan</2> kami",
+  "Call link copied": "Tautan panggilan disalin",
+  "Call type menu": "Menu jenis panggilan",
+  "Camera": "Kamera",
+  "Camera {{n}}": "Kamera {{n}}",
+  "Camera/microphone permissions needed to join the call.": "Izin kamera/mikrofon dibutuhkan untuk bergabung ke panggilan.",
+  "Change layout": "Ubah tata letak",
+  "Close": "Tutup",
+  "Confirm password": "Konfirmasi kata sandi",
+  "Connection lost": "Koneksi hilang",
+  "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",
+  "Description (optional)": "Deskripsi (opsional)",
+  "Details": "Detail",
+  "Developer": "Pengembang",
+  "Display name": "Nama tampilan",
+  "Download debug logs": "Unduh catatan pengawakutuan",
+  "Entering room…": "Memasuki ruangan…",
+  "Exit full screen": "Keluar dari layar penuh",
+  "Fetching group call timed out.": "Waktu pendapatan panggilan grup habis.",
+  "Freedom": "Bebas",
+  "Full screen": "Layar penuh",
+  "Go": "Bergabung",
+  "Grid layout menu": "Menu tata letak kisi",
+  "Having trouble? Help us fix it.": "Mengalami masalah? Bantu kami memperbaikinya.",
+  "Home": "Beranda",
+  "Include debug logs": "Termasuk catatan pengawakutuan",
+  "Incompatible versions": "Versi tidak kompatibel",
+  "Incompatible versions!": "Versi tidak kompatibel!",
+  "Inspector": "Inspektur",
+  "Invite": "Undang",
+  "Invite people": "Undang orang",
+  "Join call": "Bergabung ke panggilan",
+  "Join call now": "Bergabung ke panggilan sekarang",
+  "Join existing call?": "Bergabung ke panggilan yang sudah ada?",
+  "Leave": "Keluar",
+  "Loading room…": "Memuat ruangan…",
+  "Loading…": "Memuat…",
+  "Local volume": "Volume lokal",
+  "Logging in…": "Memasuki…",
+  "Login": "Masuk",
+  "Login to your account": "Masuk ke akun Anda",
+  "Microphone": "Mikrofon",
+  "Microphone permissions needed to join the call.": "Izin mikrofon dibutuhkan untuk bergabung ke panggilan ini.",
+  "Microphone {{n}}": "Mikrofon {{n}}",
+  "More": "Lainnya",
+  "More menu": "Menu lainnya",
+  "Mute microphone": "Bisukan mikrofon",
+  "No": "Tidak",
+  "Not now, return to home screen": "Tidak sekarang, kembali ke layar beranda",
+  "Not registered yet? <2>Create an account</2>": "Belum terdaftar? <2>Buat sebuah akun</2>",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Pengguna lain sedang mencoba bergabung ke panggilan ini dari versi yang tidak kompatibel. Pengguna berikut seharusnya memastikan bahwa mereka telah memuat ulang peramban mereka: <1>{userLis}</1>",
+  "Password": "Kata sandi",
+  "Passwords must match": "Kata sandi harus cocok",
+  "Press and hold spacebar to talk": "Tekan dan tahan bilah spasi untuk berbicara",
+  "Press and hold spacebar to talk over {{name}}": "Tekan dan tahan bilah spasi untuk berbicara pada {{name}}",
+  "Press and hold to talk": "Tekan dan tahan untuk berbicara",
+  "Press and hold to talk over {{name}}": "Tekan dan tahan untuk berbicara pada {{name}}",
+  "Profile": "Profil",
+  "Recaptcha dismissed": "Recaptcha ditutup",
+  "Recaptcha not loaded": "Recaptcha tidak dimuat",
+  "Register": "Daftar",
+  "Registering…": "Mendaftarkan…",
+  "Release spacebar key to stop": "Lepaskan bilah spasi untuk berhenti",
+  "Release to stop": "Lepaskan untuk berhenti",
+  "Remove": "Hapus",
+  "Return to home screen": "Kembali ke layar beranda",
+  "Save": "Simpan",
+  "Saving…": "Menyimpan…",
+  "Select an option": "Pilih sebuah opsi",
+  "Send debug logs": "Kirim catatan pengawakutuan",
+  "Sending…": "Mengirimkan…",
+  "Settings": "Pengaturan",
+  "Share screen": "Bagikan layar",
+  "Show call inspector": "Tampilkan inspektur panggilan",
+  "Sign in": "Masuk",
+  "Sign out": "Keluar",
+  "Spatial audio": "Audio spasial",
+  "Speaker": "Pembicara",
+  "Speaker {{n}}": "Pembicara {{n}}",
+  "Spotlight": "Sorotan",
+  "Stop sharing screen": "Berhenti membagikan layar",
+  "Submit feedback": "Kirim masukan",
+  "Submitting feedback…": "Mengirimkan masukan…",
+  "Take me Home": "Bawa saya ke Beranda",
+  "Talk over speaker": "Bicara pada pembicara",
+  "Talking…": "Berbicara…",
+  "Thanks! We'll get right on it.": "Terima kasih! Kami akan melihatnya.",
+  "This call already exists, would you like to join?": "Panggilan ini sudah ada, apakah Anda ingin bergabung?",
+  "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>Terms and conditions</12>": "Situs ini dilindungi oleh ReCAPTCHA dan <2>Kebijakan Privasi</2> dan <6>Ketentuan Layanan</6> Google berlaku.<9>Dengan mengeklik \"Daftar\", Anda terima <12>syarat dan ketentuan</12> kami",
+  "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)": "Ini akan membuat suara pembicara seolah-olah berasal dari tempat ubin mereka diposisikan di layar. (Fitur uji coba: ini dapat memengaruhi stabilitas audio.)",
+  "Turn off camera": "Matikan kamera",
+  "Turn on camera": "Nyalakan kamera",
+  "Unmute microphone": "Suarakan mikrofon",
+  "User ID": "ID pengguna",
+  "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 network": "Menunggu jaringan",
+  "Waiting for other participants…": "Menunggu peserta lain…",
+  "Walkie-talkie call": "Panggilan protofon",
+  "Walkie-talkie call name": "Nama panggilan protofon",
+  "WebRTC is not supported or is being blocked in this browser.": "WebRTC tidak didukung atau diblokir di peramban ini.",
+  "Yes, join call": "Ya, bergabung ke panggilan",
+  "You can't talk at the same time": "Anda tidak dapat berbicara pada waktu yang sama",
+  "Your recent calls": "Panggilan Anda terkini",
+  "{{count}} people connected|one": "{{count}} orang terhubung",
+  "{{count}} people connected|other": "{{count}} orang terhubung",
+  "{{displayName}}, your call is now ended": "{{displayName}}, panggilan Anda sekarang telah berakhir",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "{{name}} is presenting": "{{name}} sedang mempresentasi",
+  "{{name}} is talking…": "{{name}} sedang berbicara…",
+  "{{roomName}} - Walkie-talkie call": "{{roomName}} - Panggilan protofon",
+  "Sending debug logs…": "Mengirimkan catatan pengawakutuan…",
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Bergabung panggilan sekarang</0><1>Atau</1><2>Salin tautan dan bergabung nanti</2>",
+  "{{name}} (Connecting...)": "{{name}} (Menghubungkan...)"
+}

public/locales/ko/app.json

@@ -0,0 +1,12 @@
+{
+  "<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>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</1>": "",
+  "{{count}} people connected|one": "{{count}}명 연결됨",
+  "{{count}} people connected|other": "{{count}}명 연결됨",
+  "{{displayName}}, your call is now ended": "{{displayName}}님, 전화가 종료되었습니다",
+  "{{names}}, {{name}}": "{{names}}님, {{name}}님",
+  "{{name}} is presenting": "{{name}}님이 발표 중",
+  "{{name}} is talking…": "{{name}}님이 말하는 중…",
+  "{{roomName}} - Walkie-talkie call": "{{roomName}} - 워키토키 전화"
+}

public/locales/pl/app.json

@@ -0,0 +1,130 @@
+{
+  "More menu": "Menu \"więcej\"",
+  "Login": "Zaloguj się",
+  "Go": "Kontynuuj",
+  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Klikając \"Kontynuuj\", wyrażasz zgodę na nasze <2>Warunki</2>",
+  "{{count}} people connected|other": "{{count}} ludzi połączono",
+  "Your recent calls": "Twoje ostatnie połączenia",
+  "You can't talk at the same time": "Nie możesz mówić w tym samym czasie",
+  "Yes, join call": "Tak, dołącz do połączenia",
+  "WebRTC is not supported or is being blocked in this browser.": "WebRTC jest niewspierane lub zablokowane w tej przeglądarce.",
+  "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…",
+  "Waiting for network": "Oczekiwanie na sieć",
+  "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",
+  "User ID": "ID użytkownika",
+  "Unmute microphone": "Wyłącz wyciszenie mikrofonu",
+  "Turn on camera": "Włącz kamerę",
+  "Turn off camera": "Wyłącz kamerę",
+  "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)": "Sprawi to, że dźwięk mówcy będzie zdawał się dochodzić z jego miejsca na ekranie. (Funkcja eksperymentalna: może mieć wpływ na stabilność dźwięku.)",
+  "This call already exists, would you like to join?": "Te połączenie już istnieje, czy chcesz do niego dołączyć?",
+  "Thanks! We'll get right on it.": "Dziękujemy! Zaraz się tym zajmiemy.",
+  "Talking…": "Mówienie…",
+  "Take me Home": "Zabierz mnie do ekranu startowego",
+  "Submitting feedback…": "Przesyłanie opinii…",
+  "Submit feedback": "Prześlij opinię",
+  "Stop sharing screen": "Zatrzymaj udostępnianie ekranu",
+  "Spotlight": "Centrum uwagi",
+  "Speaker {{n}}": "Głośnik {{n}}",
+  "Speaker": "Głośnik",
+  "Spatial audio": "Dźwięk przestrzenny",
+  "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…",
+  "Sending debug logs…": "Wysyłanie dzienników debugowania…",
+  "Send debug logs": "Wyślij dzienniki debugowania",
+  "Select an option": "Wybierz opcję",
+  "Saving…": "Zapisywanie…",
+  "Save": "Zapisz",
+  "Return to home screen": "Powróć do ekranu domowego",
+  "Remove": "Usuń",
+  "Release to stop": "Puść przycisk, aby przestać",
+  "Release spacebar key to stop": "Puść spację, aby przestać",
+  "Registering…": "Rejestrowanie…",
+  "Register": "Zarejestruj",
+  "Recaptcha not loaded": "Recaptcha nie została załadowana",
+  "Recaptcha dismissed": "Recaptcha odrzucona",
+  "Profile": "Profil",
+  "Press and hold to talk over {{name}}": "Przytrzymaj, aby mówić wraz z {{name}}",
+  "Press and hold to talk": "Przytrzymaj, aby mówić",
+  "Press and hold spacebar to talk over {{name}}": "Przytrzymaj spację, aby mówić wraz z {{name}}",
+  "Press and hold spacebar to talk": "Przytrzymaj spację, aby mówić",
+  "Passwords must match": "Hasła muszą być identyczne",
+  "Password": "Hasło",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Inni użytkownicy próbują dołączyć do tego połączenia przy użyciu niekompatybilnych wersji. Powinni oni upewnić się, że odświeżyli stronę w swoich przeglądarkach:<1>{userLis}</1>",
+  "Not registered yet? <2>Create an account</2>": "Nie masz konta? <2>Utwórz je</2>",
+  "Not now, return to home screen": "Nie teraz, powróć do ekranu domowego",
+  "No": "Nie",
+  "Mute microphone": "Wycisz mikrofon",
+  "More": "Więcej",
+  "Microphone permissions needed to join the call.": "Aby dołączyć do połączenia, potrzebne są uprawnienia do mikrofonu.",
+  "Microphone {{n}}": "Mikrofon {{n}}",
+  "Microphone": "Mikrofon",
+  "Login to your account": "Zaloguj się do swojego konta",
+  "Logging in…": "Logowanie…",
+  "Local volume": "Lokalna głośność",
+  "Loading…": "Ładowanie…",
+  "Loading room…": "Ładowanie pokoju…",
+  "Leave": "Opuść",
+  "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",
+  "Invite people": "Zaproś ludzi",
+  "Invite": "Zaproś",
+  "Inspector": "Inspektor",
+  "Incompatible versions!": "Niekompatybilne wersje!",
+  "Incompatible versions": "Niekompatybilne wersje",
+  "Include debug logs": "Dołącz dzienniki debugowania",
+  "Home": "Strona domowa",
+  "Having trouble? Help us fix it.": "Masz problem? Pomóż nam go naprawić.",
+  "Grid layout menu": "Menu układu siatki",
+  "Full screen": "Pełen ekran",
+  "Freedom": "Wolność",
+  "Fetching group call timed out.": "Przekroczono limit czasu na uzyskanie połączenia grupowego.",
+  "Exit full screen": "Zamknij pełny ekran",
+  "Entering room…": "Wchodzenie do pokoju…",
+  "Download debug logs": "Pobierz dzienniki debugowania",
+  "Display name": "Wyświetlana nazwa",
+  "Developer": "Deweloper",
+  "Details": "Szczegóły",
+  "Description (optional)": "Opis (opcjonalny)",
+  "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 podziel się linkiem do połączenia",
+  "Copied!": "Skopiowano!",
+  "Connection lost": "Połączenie utracone",
+  "Confirm password": "Potwierdź hasło",
+  "Close": "Zamknij",
+  "Change layout": "Zmień układ",
+  "Camera/microphone permissions needed to join the call.": "Aby dołączyć do tego połączenia, potrzebne są uprawnienia do kamery/mikrofonu.",
+  "Camera {{n}}": "Kamera {{n}}",
+  "Camera": "Kamera",
+  "Call type menu": "Menu rodzaju połączenia",
+  "Call link copied": "Skopiowano link do połączenia",
+  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Klikając \"Dołącz do rozmowy\", wyrażasz zgodę na nasze <2>Warunki</2>",
+  "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.",
+  "Accept microphone permissions to join the call.": "Przyznaj uprawnienia do mikrofonu aby dołączyć do połączenia.",
+  "Accept camera/microphone permissions to join the call.": "Przyznaj uprawnienia do kamery/mikrofonu aby dołączyć do połączenia.",
+  "<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>Może zechcesz ustawić hasło, aby zachować swoje konto?</0><1>Będziesz w stanie utrzymać swoją nazwę i ustawić awatar do wyświetlania podczas połączeń w przyszłości</1>",
+  "<0>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</1>": "<0>Ups, coś poszło nie tak.</0><1>Przesłanie dzienników debugowania pomoże nam odnaleźć ten błąd.</1>",
+  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Utwórz konto</0> Albo <2>Dołącz jako gość</2>",
+  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Masz już konto?</0><1><0>Zaloguj się</0> Albo <2>Dołącz jako gość</2></1>",
+  "{{roomName}} - Walkie-talkie call": "{{roomName}} - połączenie walkie-talkie",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "{{name}} is talking…": "{{name}} mówi…",
+  "{{name}} is presenting": "{{name}} prezentuje",
+  "{{displayName}}, your call is now ended": "{{displayName}}, twoje połączenie zostało zakończone",
+  "{{count}} people connected|one": "{{count}} osoba połączona"
+}

public/locales/ru/app.json

@@ -0,0 +1,132 @@
+{
+  "Register": "Зарегистрироваться",
+  "Saving…": "Сохранение…",
+  "Registering…": "Регистрация…",
+  "Logging in…": "Вход…",
+  "Entering room…": "Вход в комнату…",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "Waiting for other participants…": "Ожидание других участников…",
+  "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)": "Эта функция балансирует звук к расположению плитки на экране. (Экспериментальная функция: может повлиять на стабильность аудио.)",
+  "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>Terms and conditions</12>": "Этот сайт защищён ReCAPTCHA от Google, ознакомьтесь с их <2>Политикой конфиденциальности</2> и <6>Пользовательским соглашением</6>.<9></9>Нажимая \"Зарегистрироваться\", вы также принимаете наши <12>Положения и условия</12>.",
+  "This call already exists, would you like to join?": "Этот звонок уже существует, хотите присоединиться?",
+  "Thanks! We'll get right on it.": "Спасибо! Мы учтём ваш отзыв.",
+  "Talking…": "Говорите…",
+  "Submitting feedback…": "Отправка отзыва…",
+  "Submit feedback": "Отправить отзыв",
+  "Sending debug logs…": "Отправка журнала отладки…",
+  "Select an option": "Выберите вариант",
+  "Release to stop": "Отпустите, чтобы прекратить вещание",
+  "Release spacebar key to stop": "Чтобы прекратить вещание, отпустите [Пробел]",
+  "Press and hold to talk over {{name}}": "Зажмите, чтобы говорить поверх участника {{name}}",
+  "Press and hold spacebar to talk over {{name}}": "Чтобы говорить поверх участника {{name}}, нажмите и удерживайте [Пробел]",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Другие пользователи пытаются присоединиться с неподдерживаемых версий программы. Этим участникам надо перезагрузить браузер: <1>{userLis}</1>",
+  "Grid layout menu": "Меню \"Расположение сеткой\"",
+  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Нажимая \"Присоединиться сейчас\", вы соглашаетесь с нашими <2>положениями и условиями</2>",
+  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Нажимая \"Далее\", вы соглашаетесь с нашими <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> или <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": "Ваши недавние звонки",
+  "You can't talk at the same time": "Вы не можете говорить одновременно",
+  "Yes, join call": "Да, присоединиться",
+  "WebRTC is not supported or is being blocked in this browser.": "WebRTC не поддерживается или заблокирован в этом браузере.",
+  "Walkie-talkie call name": "Название звонка-рации",
+  "Walkie-talkie call": "Звонок-рация",
+  "Waiting for network": "Ожидание сети",
+  "Video call name": "Название видео-звонка",
+  "Video call": "Видео-звонок",
+  "Video": "Видео",
+  "Version: {{version}}": "Версия: {{version}}",
+  "Username": "Имя пользователя",
+  "User menu": "Меню пользователя",
+  "User ID": "ID пользователя",
+  "Unmute microphone": "Включить микрофон",
+  "Turn on camera": "Включить камеру",
+  "Turn off camera": "Отключить камеру",
+  "Talk over speaker": "Говорить через динамик",
+  "Take me Home": "Перейти в Начало",
+  "Stop sharing screen": "Остановить показ экрана",
+  "Spotlight": "Внимание",
+  "Speaker {{n}}": "Динамик {{n}}",
+  "Speaker": "Динамик",
+  "Spatial audio": "Пространственное аудио",
+  "Sign out": "Выйти",
+  "Sign in": "Войти",
+  "Show call inspector": "Показать инспектор",
+  "Share screen": "Поделиться экраном",
+  "Settings": "Настройки",
+  "Sending…": "Отправка…",
+  "Local volume": "Местная громкость",
+  "Call type menu": "Меню \"Тип звонка\"",
+  "More menu": "Полное меню",
+  "{{roomName}} - Walkie-talkie call": "{{roomName}} - Звонок-рация",
+  "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.": "У одного из участников звонка есть неполадки. Чтобы лучше диагностировать похожие проблемы, нам нужен журнал отладки.",
+  "<0>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</1>": "<0>Ой, что-то пошло не так.</0><1>Отправив журнал отладки, вы поможете нам найти проблемный участок.</1>",
+  "Send debug logs": "Отправить журнал отладки",
+  "Save": "Сохранить",
+  "Return to home screen": "Вернуться в Начало",
+  "Remove": "Удалить",
+  "Recaptcha not loaded": "Невозможно начать проверку",
+  "Recaptcha dismissed": "Проверка не пройдена",
+  "Profile": "Профиль",
+  "Press and hold to talk": "Зажмите, чтобы говорить",
+  "Press and hold spacebar to talk": "Чтобы говорить, нажмите и удерживайте [Пробел]",
+  "Passwords must match": "Пароли должны совпадать",
+  "Password": "Пароль",
+  "Not registered yet? <2>Create an account</2>": "Ещё не зарегистрированы? <2>Создайте аккаунт</2>",
+  "Not now, return to home screen": "Не сейчас, вернуться в Начало",
+  "No": "Нет",
+  "Mute microphone": "Отключить микрофон",
+  "More": "Больше",
+  "Microphone permissions needed to join the call.": "Нужно разрешение на доступ к микрофону для присоединения к звонку.",
+  "Microphone {{n}}": "Микрофон {{n}}",
+  "Microphone": "Микрофон",
+  "Login to your account": "Войдите в свой аккаунт",
+  "Login": "Вход",
+  "Loading…": "Загрузка…",
+  "Loading room…": "Загрузка комнаты…",
+  "Leave": "Покинуть",
+  "Join existing call?": "Присоединиться к существующему звонку?",
+  "Join call now": "Присоединиться сейчас",
+  "Join call": "Присоединиться",
+  "Invite people": "Пригласить участников",
+  "Invite": "Пригласить",
+  "Inspector": "Инспектор",
+  "Incompatible versions!": "Несовместимые версии!",
+  "Incompatible versions": "Несовместимые версии",
+  "Home": "Начало",
+  "Having trouble? Help us fix it.": "Есть проблема? Помогите нам её устранить.",
+  "Go": "Далее",
+  "Full screen": "Полноэкранный режим",
+  "Freedom": "Свобода",
+  "Fetching group call timed out.": "Истекло время ожидания для группового звонка.",
+  "Exit full screen": "Выйти из полноэкранного режима",
+  "Display name": "Видимое имя",
+  "Developer": "Разработчику",
+  "Details": "Подробности",
+  "Description (optional)": "Описание (необязательно)",
+  "Create account": "Создать аккаунт",
+  "Copy and share this call link": "Скопируйте и поделитесь этой ссылкой на звонок",
+  "Copied!": "Скопировано!",
+  "Connection lost": "Соединение потеряно",
+  "Confirm password": "Подтвердите пароль",
+  "Close": "Закрыть",
+  "Change layout": "Изменить расположение",
+  "Camera/microphone permissions needed to join the call.": "Нужны разрешения на доступ к камере/микрофону для присоединения к звонку.",
+  "Camera {{n}}": "Камера {{n}}",
+  "Camera": "Камера",
+  "Call link copied": "Ссылка на звонок скопирована",
+  "Avatar": "Аватар",
+  "Audio": "Аудио",
+  "Accept microphone permissions to join the call.": "Для присоединения к звонку разрешите доступ к микрофону.",
+  "Accept camera/microphone permissions to join the call.": "Для присоединения к звонку разрешите доступ к камере/микрофону.",
+  "{{name}} is talking…": "{{name}} говорит…",
+  "{{name}} is presenting": "{{name}} показывает",
+  "{{displayName}}, your call is now ended": "{{displayName}}, ваш звонок завершён",
+  "{{count}} people connected|other": "{{count}} подключилось",
+  "{{count}} people connected|one": "{{count}} подключился"
+}

public/locales/tr/app.json

@@ -0,0 +1,102 @@
+{
+  "<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>Hesabınızı tutmak için niye bir parola açmıyorsunuz?</0><1>Böylece ileriki aramalarda adınızı ve avatarınızı kullanabileceksiniz</1>",
+  "Accept camera/microphone permissions to join the call.": "Aramaya katılmanız için kamera/mikrofon erişimine izin verin.",
+  "Accept microphone permissions to join the call.": "Aramaya katılmak için mikrofon erişim izni verin.",
+  "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",
+  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "\"Git\"e tıklayarak,<2>hükümler ve koşullar</2>ı kabul etmiş sayılırsınız",
+  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "\"Şimdi katıl\"a tıklayarak, <2>hükümler ve koşullar</2>ı kabul etmiş sayılırsınız",
+  "Call link copied": "Arama bağlantısı kopyalandı",
+  "Call type menu": "Arama tipi menüsü",
+  "Camera": "Kamera",
+  "Camera {{n}}": "{{n}}. kamera",
+  "Camera/microphone permissions needed to join the call.": "Aramaya katılmak için kamera/mikrofon izinleri gerek.",
+  "Change layout": "Yerleşimi değiştir",
+  "Close": "Kapat",
+  "Confirm password": "Parolayı tekrar edin",
+  "Connection lost": "Bağlantı koptu",
+  "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",
+  "Description (optional)": "Tanım (isteğe bağlı)",
+  "Details": "Ayrıntı",
+  "Developer": "Geliştirici",
+  "Display name": "Ekran adı",
+  "Download debug logs": "Hata ayıklama kütüğünü indir",
+  "Entering room…": "Odaya giriliyor…",
+  "Exit full screen": "Tam ekranı terk et",
+  "Fetching group call timed out.": "Grup çağrısı zaman aşımına uğradı.",
+  "Freedom": "Özgürlük",
+  "Full screen": "Tam ekran",
+  "Go": "Git",
+  "Grid layout menu": "Izgara plan menü",
+  "Having trouble? Help us fix it.": "Sorun mu var? Çözmemize yardım edin.",
+  "Home": "Ev",
+  "Include debug logs": "Hata ayıklama kütüğünü dahil et",
+  "Incompatible versions": "Uyumsuz sürümler",
+  "Incompatible versions!": "Sürüm uyumsuz!",
+  "Inspector": "Denetçi",
+  "Invite people": "Kişileri davet et",
+  "Join call": "Aramaya katıl",
+  "Join call now": "Aramaya katıl",
+  "Join existing call?": "Mevcut aramaya katıl?",
+  "Leave": "Çık",
+  "Loading room…": "Oda yükleniyor…",
+  "Loading…": "Yükleniyor…",
+  "Local volume": "Yerel ses seviyesi",
+  "Logging in…": "Giriliyor…",
+  "Login": "Gir",
+  "Login to your account": "Hesabınıza girin",
+  "Microphone": "Mikrofon",
+  "Microphone permissions needed to join the call.": "Aramaya katılmak için mikrofon erişim izni gerek.",
+  "Microphone {{n}}": "{{n}}. mikrofon",
+  "More": "Daha",
+  "More menu": "Daha fazla",
+  "Mute microphone": "Mikrofonu kapat",
+  "No": "Hayır",
+  "Not now, return to home screen": "Şimdi değil, ev ekranına dön",
+  "Not registered yet? <2>Create an account</2>": "Kaydolmadınız mı? <2>Hesap açın</2>",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Başka kullanıcılar uyumsuz sürümden katılmaya çalışıyorlar. <1>{userLis}</1> tarayıcılarını mutlaka tazelemeliler.",
+  "Password": "Parola",
+  "Passwords must match": "Parolalar aynı olmalı",
+  "Press and hold spacebar to talk": "Konuşmak için boşluk çubuğunu basılı tutun",
+  "Press and hold to talk": "Konuşmak için basılı tutun",
+  "Recaptcha dismissed": "reCAPTCHA atlandı",
+  "Recaptcha not loaded": "reCAPTCHA yüklenmedi",
+  "Register": "Kaydol",
+  "Registering…": "Kaydediyor…",
+  "Release spacebar key to stop": "Kesmek için boşluk tuşunu bırakın",
+  "Release to stop": "Kesmek için bırakın",
+  "Remove": "Çıkar",
+  "Return to home screen": "Ev ekranına geri dön",
+  "Save": "Kaydet",
+  "Saving…": "Kaydediliyor…",
+  "Select an option": "Bir seçenek seç",
+  "Send debug logs": "Hata ayıklama kütüğünü gönder",
+  "Sending…": "Gönderiliyor…",
+  "Settings": "Ayarlar",
+  "Share screen": "Ekran paylaş",
+  "Show call inspector": "Arama denetçisini göster",
+  "Sign in": "Gir",
+  "Sign out": "Çık",
+  "Spatial audio": "Uzamsal ses",
+  "Stop sharing screen": "Ekran paylaşmayı terk et",
+  "Submit feedback": "Geri bildirim ver",
+  "Submitting feedback…": "Geri bildirimler gönderiliyor…",
+  "Take me Home": "Ev ekranına gir",
+  "Talking…": "Konuşuyor…",
+  "Thanks! We'll get right on it.": "Sağol! Bununla ilgileneceğiz.",
+  "This call already exists, would you like to join?": "Bu arama zaten var, katılmak ister misiniz?",
+  "{{count}} people connected|one": "{{count}} kişi bağlı",
+  "{{count}} people connected|other": "{{count}} kişi bağlı",
+  "{{displayName}}, your call is now ended": "Aramanız bitti, {{displayName]}!",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "{{name}} is presenting": "{{name}} sunuyor",
+  "{{name}} is talking…": "{{name}} konuşuyor…",
+  "<0>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</1>": "<0>Hoop, bir şeyler yanlış.</0><1>Hata ayıklama kütüğünü göndermek sorunu incelememize yardımcı olur.</1>",
+  "<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

@@ -0,0 +1,134 @@
+{
+  "Loading…": "Завантаження…",
+  "Your recent calls": "Ваші недавні виклики",
+  "You can't talk at the same time": "Не можна говорити одночасно",
+  "Yes, join call": "Так, приєднатися до виклику",
+  "WebRTC is not supported or is being blocked in this browser.": "WebRTC не підтримується або блокується в цьому браузері.",
+  "Walkie-talkie call name": "Назва виклику-рації",
+  "Walkie-talkie call": "Виклик-рація",
+  "Waiting for other participants…": "Очікування на інших учасників…",
+  "Waiting for network": "Очікування мережі",
+  "Video call name": "Назва відеовиклику",
+  "Video call": "Відеовиклик",
+  "Video": "Відео",
+  "Version: {{version}}": "Версія: {{version}}",
+  "Username": "Ім'я користувача",
+  "User menu": "Меню користувача",
+  "User ID": "ID користувача",
+  "Unmute microphone": "Увімкнути мікрофон",
+  "Turn on camera": "Увімкнути камеру",
+  "Turn off camera": "Вимкнути камеру",
+  "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)": "Це призведе до того, що звук мовця здаватиметься таким, ніби він надходить з того місця, де розміщено його плитку на екрані. (Експериментальна можливість: це може вплинути на стабільність звуку.)",
+  "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>Terms and conditions</12>": "Цей сайт захищений ReCAPTCHA і до нього застосовується <2>Політика приватності</2> і <6>Умови надання послуг</6> Google.<9></9>Натискаючи кнопку «Зареєструватися», ви погоджуєтеся з нашими <12>Умовами та положеннями</12>",
+  "This call already exists, would you like to join?": "Цей виклик уже існує, бажаєте приєднатися?",
+  "Thanks! We'll get right on it.": "Дякуємо! Ми зараз же візьмемося за це.",
+  "Talking…": "Говоріть…",
+  "Talk over speaker": "Говорити через динамік",
+  "Take me Home": "Перейти до Домівки",
+  "Submitting feedback…": "Надсилання відгуку…",
+  "Submit feedback": "Надіслати відгук",
+  "Stop sharing screen": "Припинити показ екрана",
+  "Spotlight": "У центрі уваги",
+  "Speaker {{n}}": "Динамік {{n}}",
+  "Speaker": "Динамік",
+  "Spatial audio": "Просторовий звук",
+  "Sign out": "Вийти",
+  "Sign in": "Увійти",
+  "Show call inspector": "Показати інспектора виклику",
+  "Share screen": "Поділитися екраном",
+  "Settings": "Налаштування",
+  "Sending…": "Надсилання…",
+  "Sending debug logs…": "Надсилання журналу зневадження…",
+  "Send debug logs": "Надіслати журнал зневадження",
+  "Select an option": "Вибрати опцію",
+  "Saving…": "Збереження…",
+  "Save": "Зберегти",
+  "Return to home screen": "Повернутися на екран домівки",
+  "Remove": "Вилучити",
+  "Release to stop": "Відпустіть, щоб закінчити",
+  "Release spacebar key to stop": "Відпустіть пробіл, щоб закінчити",
+  "Registering…": "Реєстрація…",
+  "Register": "Зареєструватися",
+  "Recaptcha not loaded": "Recaptcha не завантажено",
+  "Recaptcha dismissed": "Recaptcha не пройдено",
+  "Profile": "Профіль",
+  "Press and hold to talk over {{name}}": "Затисніть, щоб говорити одночасно з {{name}}",
+  "Press and hold to talk": "Затисніть, щоб говорити",
+  "Press and hold spacebar to talk over {{name}}": "Щоб говорити одночасно з {{name}}, затисніть пробіл",
+  "Press and hold spacebar to talk": "Затисніть пробіл, щоб говорити",
+  "Passwords must match": "Паролі відрізняються",
+  "Password": "Пароль",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Інші користувачі намагаються приєднатися до цього виклику з несумісних версій. Ці користувачі повинні переконатися, що вони оновили сторінки своїх браузерів:<1>{userLis}</1>",
+  "Not registered yet? <2>Create an account</2>": "Ще не зареєстровані? <2>Створіть обліковий запис</2>",
+  "Not now, return to home screen": "Не зараз, повернутися на екран домівки",
+  "No": "Ні",
+  "Mute microphone": "Заглушити мікрофон",
+  "More menu": "Усе меню",
+  "More": "Докладніше",
+  "Microphone permissions needed to join the call.": "Для участі у виклику необхідний дозвіл на користування мікрофоном.",
+  "Microphone {{n}}": "Мікрофон {{n}}",
+  "Microphone": "Мікрофон",
+  "Login to your account": "Увійдіть до свого облікового запису",
+  "Login": "Увійти",
+  "Logging in…": "Вхід…",
+  "Local volume": "Локальна гучність",
+  "Loading room…": "Завантаження кімнати…",
+  "Leave": "Вийти",
+  "Join existing call?": "Приєднатися до наявного виклику?",
+  "Join call now": "Приєднатися до виклику зараз",
+  "Join call": "Приєднатися до виклику",
+  "Invite people": "Запросити людей",
+  "Invite": "Запросити",
+  "Inspector": "Інспектор",
+  "Incompatible versions!": "Несумісні версії!",
+  "Incompatible versions": "Несумісні версії",
+  "Include debug logs": "Долучити журнали зневадження",
+  "Home": "Домівка",
+  "Having trouble? Help us fix it.": "Проблеми? Допоможіть нам це виправити.",
+  "Grid layout menu": "Меню у вигляді сітки",
+  "Go": "Далі",
+  "Full screen": "Повноекранний режим",
+  "Freedom": "Свобода",
+  "Fetching group call timed out.": "Вичерпано час очікування групового виклику.",
+  "Exit full screen": "Вийти з повноекранного режиму",
+  "Entering room…": "Вхід у кімнату…",
+  "Download debug logs": "Завантажити журнали зневадження",
+  "Display name": "Показуване ім'я",
+  "Developer": "Розробнику",
+  "Details": "Подробиці",
+  "Description (optional)": "Опис (необов'язково)",
+  "Debug log request": "Запит журналу зневадження",
+  "Debug log": "Журнал зневадження",
+  "Create account": "Створити обліковий запис",
+  "Copy and share this call link": "Скопіювати та поділитися цим посиланням на виклик",
+  "Copied!": "Скопійовано!",
+  "Connection lost": "З'єднання розірвано",
+  "Confirm password": "Підтвердити пароль",
+  "Close": "Закрити",
+  "Change layout": "Змінити макет",
+  "Camera/microphone permissions needed to join the call.": "Для приєднання до виклику необхідні дозволи камери/мікрофона.",
+  "Camera {{n}}": "Камера {{n}}",
+  "Camera": "Камера",
+  "Call type menu": "Меню типу виклику",
+  "Call link copied": "Посилання на виклик скопійовано",
+  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Натиснувши «Приєднатися до виклику зараз», ви погодитеся з нашими <2>Умовами та положеннями</2>",
+  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Натиснувши «Далі», ви погодитеся з нашими <2>Умовами та положеннями</2>",
+  "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.": "Інший користувач у цьому виклику має проблему. Щоб краще визначити ці проблеми, ми хотіли б зібрати журнал зневадження.",
+  "Accept microphone permissions to join the call.": "Надайте дозволи на використання мікрофонів для приєднання до виклику.",
+  "Accept camera/microphone permissions to join the call.": "Надайте дозвіл на використання камери/мікрофона для приєднання до виклику.",
+  "<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>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</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>",
+  "{{roomName}} - Walkie-talkie call": "{{roomName}} - Виклик-рація",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "{{name}} is talking…": "{{name}} балакає…",
+  "{{name}} is presenting": "{{name}} показує",
+  "{{displayName}}, your call is now ended": "{{displayName}}, ваш виклик завершено",
+  "{{count}} people connected|other": "{{count}} під'єдналися",
+  "{{count}} people connected|one": "{{count}} під'єднується",
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Приєднатися до виклику зараз</0><1>Or</1><2>Скопіювати посилання на виклик і приєднатися пізніше</2>",
+  "{{name}} (Connecting...)": "{{name}} (З'єднання...)"
+}

src/App.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { Suspense } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { OverlayProvider } from "@react-aria/overlays";
@@ -43,34 +43,36 @@ export default function App({ history }: AppProps) {
 
   return (
     <Router history={history}>
-      <ClientProvider>
-        <InspectorContextProvider>
-          <Sentry.ErrorBoundary fallback={errorPage}>
-            <OverlayProvider>
-              <Switch>
-                <SentryRoute exact path="/">
-                  <HomePage />
-                </SentryRoute>
-                <SentryRoute exact path="/login">
-                  <LoginPage />
-                </SentryRoute>
-                <SentryRoute exact path="/register">
-                  <RegisterPage />
-                </SentryRoute>
-                <SentryRoute path="/room/:roomId?">
-                  <RoomPage />
-                </SentryRoute>
-                <SentryRoute path="/inspector">
-                  <SequenceDiagramViewerPage />
-                </SentryRoute>
-                <SentryRoute path="*">
-                  <RoomRedirect />
-                </SentryRoute>
-              </Switch>
-            </OverlayProvider>
-          </Sentry.ErrorBoundary>
-        </InspectorContextProvider>
-      </ClientProvider>
+      <Suspense fallback={null}>
+        <ClientProvider>
+          <InspectorContextProvider>
+            <Sentry.ErrorBoundary fallback={errorPage}>
+              <OverlayProvider>
+                <Switch>
+                  <SentryRoute exact path="/">
+                    <HomePage />
+                  </SentryRoute>
+                  <SentryRoute exact path="/login">
+                    <LoginPage />
+                  </SentryRoute>
+                  <SentryRoute exact path="/register">
+                    <RegisterPage />
+                  </SentryRoute>
+                  <SentryRoute path="/room/:roomId?">
+                    <RoomPage />
+                  </SentryRoute>
+                  <SentryRoute path="/inspector">
+                    <SequenceDiagramViewerPage />
+                  </SentryRoute>
+                  <SentryRoute path="*">
+                    <RoomRedirect />
+                  </SentryRoute>
+                </Switch>
+              </OverlayProvider>
+            </Sentry.ErrorBoundary>
+          </InspectorContextProvider>
+        </ClientProvider>
+      </Suspense>
     </Router>
   );
 }

src/ClientContext.tsx

@@ -22,19 +22,23 @@ import React, {
   createContext,
   useMemo,
   useContext,
+  useRef,
 } from "react";
 import { useHistory } from "react-router-dom";
 import { MatrixClient, ClientEvent } from "matrix-js-sdk/src/client";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { logger } from "matrix-js-sdk/src/logger";
+import { useTranslation } from "react-i18next";
 
 import { ErrorView } from "./FullScreenView";
 import {
   initClient,
-  initMatroskaClient,
   defaultHomeserver,
   CryptoStoreIntegrityError,
+  fallbackICEServerAllowed,
 } from "./matrix-utils";
+import { widget } from "./widget";
+import { translatedError } from "./TranslatedError";
 
 declare global {
   interface Window {
@@ -84,6 +88,7 @@ interface Props {
 
 export const ClientProvider: FC<Props> = ({ children }) => {
   const history = useHistory();
+  const initializing = useRef(false);
   const [
     { loading, isAuthenticated, isPasswordlessUser, client, userName, error },
     setState,
@@ -97,19 +102,21 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   });
 
   useEffect(() => {
+    // In case the component is mounted, unmounted, and remounted quickly (as
+    // React does in strict mode), we need to make sure not to doubly initialize
+    // the client
+    if (initializing.current) return;
+    initializing.current = true;
+
     const init = async (): Promise<
       Pick<ClientProviderState, "client" | "isPasswordlessUser">
     > => {
-      const query = new URLSearchParams(window.location.search);
-      const widgetId = query.get("widgetId");
-      const parentUrl = query.get("parentUrl");
-
-      if (widgetId && parentUrl) {
-        // We're inside a widget, so let's engage *Matroska mode*
-        logger.log("Using a Matroska client");
+      if (widget) {
+        // We're inside a widget, so let's engage *matryoshka mode*
+        logger.log("Using a matryoshka client");
 
         return {
-          client: await initMatroskaClient(widgetId, parentUrl),
+          client: await widget.client,
           isPasswordlessUser: false,
         };
       } else {
@@ -132,6 +139,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
                   accessToken: access_token,
                   userId: user_id,
                   deviceId: device_id,
+                  fallbackICEServerAllowed: fallbackICEServerAllowed,
                 },
                 true
               ),
@@ -147,10 +155,11 @@ export const ClientProvider: FC<Props> = ({ children }) => {
                     accessToken: access_token,
                     userId: user_id,
                     deviceId: device_id,
+                    fallbackICEServerAllowed: fallbackICEServerAllowed,
                   },
                   false // Don't need the crypto store just to log out
                 );
-                await client.logout(undefined, true);
+                await client.logout(true);
               } catch (err_) {
                 logger.warn(
                   "The previous session was lost, and we couldn't log it out, " +
@@ -189,7 +198,8 @@ export const ClientProvider: FC<Props> = ({ children }) => {
           userName: null,
           error: undefined,
         });
-      });
+      })
+      .finally(() => (initializing.current = false));
   }, []);
 
   const changePassword = useCallback(
@@ -256,13 +266,29 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     [client]
   );
 
-  const logout = useCallback(() => {
+  const logout = useCallback(async () => {
+    await client.logout(true);
+    await client.clearStores();
     clearSession();
+    setState({
+      client: undefined,
+      loading: false,
+      isAuthenticated: false,
+      isPasswordlessUser: true,
+      userName: "",
+      error: undefined,
+    });
     history.push("/");
-  }, [history]);
+  }, [history, client]);
+
+  const { t } = useTranslation();
 
   useEffect(() => {
-    if (client) {
+    // To protect against multiple sessions writing to the same storage
+    // simultaneously, we send a to-device message that shuts down all other
+    // running instances of the app. This isn't necessary if the app is running
+    // in a widget though, since then it'll be mostly stateless.
+    if (!widget && client) {
       const loadTime = Date.now();
 
       const onToDeviceEvent = (event: MatrixEvent) => {
@@ -277,8 +303,9 @@ export const ClientProvider: FC<Props> = ({ children }) => {
 
           setState((prev) => ({
             ...prev,
-            error: new Error(
-              "This application has been opened in another tab."
+            error: translatedError(
+              "This application has been opened in another tab.",
+              t
             ),
           }));
         }
@@ -296,7 +323,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
         client?.removeListener(ClientEvent.ToDeviceEvent, onToDeviceEvent);
       };
     }
-  }, [client]);
+  }, [client, t]);
 
   const context = useMemo<ClientState>(
     () => ({

src/Facepile.tsx

@@ -14,10 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { HTMLAttributes } from "react";
+import React, { HTMLAttributes, useMemo } from "react";
 import classNames from "classnames";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { useTranslation } from "react-i18next";
 
 import styles from "./Facepile.module.css";
 import { Avatar, Size, sizes } from "./Avatar";
@@ -44,13 +45,25 @@ export function Facepile({
   size = Size.XS,
   ...rest
 }: Props) {
+  const { t } = useTranslation();
+
   const _size = sizes.get(size);
   const _overlap = overlapMap[size];
 
+  const title = useMemo(() => {
+    return participants.reduce<string | null>(
+      (prev, curr) =>
+        prev === null
+          ? curr.name
+          : t("{{names}}, {{name}}", { names: prev, name: curr.name }),
+      null
+    ) as string;
+  }, [participants, t]);
+
   return (
     <div
       className={classNames(styles.facepile, styles[size], className)}
-      title={participants.map((member) => member.name).join(", ")}
+      title={title}
       style={{
         width:
           Math.min(participants.length, max + 1) * (_size - _overlap) +
@@ -59,12 +72,12 @@ export function Facepile({
       {...rest}
     >
       {participants.slice(0, max).map((member, i) => {
-        const avatarUrl = member.user?.avatarUrl;
+        const avatarUrl = member.getMxcAvatarUrl();
         return (
           <Avatar
             key={member.userId}
             size={size}
-            src={avatarUrl}
+            src={avatarUrl ?? undefined}
             fallback={member.name.slice(0, 1).toUpperCase()}
             className={styles.avatar}
             style={{ left: i * (_size - _overlap) }}

src/FullScreenView.tsx

@@ -1,12 +1,14 @@
 import React, { ReactNode, useCallback, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import classNames from "classnames";
+import { Trans, useTranslation } from "react-i18next";
 
 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 import { LinkButton, Button } from "./button";
 import { useSubmitRageshake } from "./settings/submit-rageshake";
 import { ErrorMessage } from "./input/Input";
 import styles from "./FullScreenView.module.css";
+import { translatedError, TranslatedError } from "./TranslatedError";
 
 interface FullScreenViewProps {
   className?: string;
@@ -35,6 +37,7 @@ interface ErrorViewProps {
 
 export function ErrorView({ error }: ErrorViewProps) {
   const location = useLocation();
+  const { t } = useTranslation();
 
   useEffect(() => {
     console.error(error);
@@ -47,7 +50,11 @@ export function ErrorView({ error }: ErrorViewProps) {
   return (
     <FullScreenView>
       <h1>Error</h1>
-      <p>{error.message}</p>
+      <p>
+        {error instanceof TranslatedError
+          ? error.translatedMessage
+          : error.message}
+      </p>
       {location.pathname === "/" ? (
         <Button
           size="lg"
@@ -55,7 +62,7 @@ export function ErrorView({ error }: ErrorViewProps) {
           className={styles.homeLink}
           onPress={onReload}
         >
-          Return to home screen
+          {t("Return to home screen")}
         </Button>
       ) : (
         <LinkButton
@@ -64,7 +71,7 @@ export function ErrorView({ error }: ErrorViewProps) {
           className={styles.homeLink}
           to="/"
         >
-          Return to home screen
+          {t("Return to home screen")}
         </LinkButton>
       )}
     </FullScreenView>
@@ -72,6 +79,7 @@ export function ErrorView({ error }: ErrorViewProps) {
 }
 
 export function CrashView() {
+  const { t } = useTranslation();
   const { submitRageshake, sending, sent, error } = useSubmitRageshake();
 
   const sendDebugLogs = useCallback(() => {
@@ -85,11 +93,11 @@ export function CrashView() {
     window.location.href = "/";
   }, []);
 
-  let logsComponent;
+  let logsComponent: JSX.Element | null = null;
   if (sent) {
-    logsComponent = <div>Thanks! We'll get right on it.</div>;
+    logsComponent = <div>{t("Thanks! We'll get right on it.")}</div>;
   } else if (sending) {
-    logsComponent = <div>Sending...</div>;
+    logsComponent = <div>{t("Sending…")}</div>;
   } else {
     logsComponent = (
       <Button
@@ -98,33 +106,39 @@ export function CrashView() {
         onPress={sendDebugLogs}
         className={styles.wideButton}
       >
-        Send debug logs
+        {t("Send debug logs")}
       </Button>
     );
   }
 
   return (
     <FullScreenView>
-      <h1>Oops, something's gone wrong.</h1>
-      <p>Submitting debug logs will help us track down the problem.</p>
+      <Trans>
+        <h1>Oops, something's gone wrong.</h1>
+        <p>Submitting debug logs will help us track down the problem.</p>
+      </Trans>
       <div className={styles.sendLogsSection}>{logsComponent}</div>
-      {error && <ErrorMessage>Couldn't send debug logs!</ErrorMessage>}
+      {error && (
+        <ErrorMessage error={translatedError("Couldn't send debug logs!", t)} />
+      )}
       <Button
         size="lg"
         variant="default"
         className={styles.wideButton}
         onPress={onReload}
       >
-        Return to home screen
+        {t("Return to home screen")}
       </Button>
     </FullScreenView>
   );
 }
 
 export function LoadingView() {
+  const { t } = useTranslation();
+
   return (
     <FullScreenView>
-      <h1>Loading...</h1>
+      <h1>{t("Loading…")}</h1>
     </FullScreenView>
   );
 }

src/Header.tsx

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import { useButton } from "@react-aria/button";
 import { AriaButtonProps } from "@react-types/button";
 import { Room } from "matrix-js-sdk/src/models/room";
+import { useTranslation } from "react-i18next";
 
 import styles from "./Header.module.css";
 import { useModalTriggerState } from "./Modal";
@@ -156,6 +157,7 @@ export function VersionMismatchWarning({
   users,
   room,
 }: VersionMismatchWarningProps) {
+  const { t } = useTranslation();
   const { modalState, modalProps } = useModalTriggerState();
 
   const onDetailsClick = useCallback(() => {
@@ -166,9 +168,9 @@ export function VersionMismatchWarning({
 
   return (
     <span className={styles.versionMismatchWarning}>
-      Incomaptible versions!
+      {t("Incompatible versions!")}
       <Button variant="link" onClick={onDetailsClick}>
-        Details
+        {t("Details")}
       </Button>
       {modalState.isOpen && (
         <IncompatibleVersionModal userIds={users} room={room} {...modalProps} />

src/IncompatibleVersionModal.tsx

@@ -15,7 +15,8 @@ limitations under the License.
 */
 
 import { Room } from "matrix-js-sdk/src/models/room";
-import React from "react";
+import React, { useMemo } from "react";
+import { Trans, useTranslation } from "react-i18next";
 
 import { Modal, ModalContent } from "./Modal";
 import { Body } from "./typography/Typography";
@@ -30,17 +31,21 @@ export const IncompatibleVersionModal: React.FC<Props> = ({
   room,
   ...rest
 }) => {
-  const userLis = Array.from(userIds).map((u) => (
-    <li>{room.getMember(u).name}</li>
-  ));
+  const { t } = useTranslation();
+  const userLis = useMemo(
+    () => [...userIds].map((u) => <li>{room.getMember(u)?.name ?? u}</li>),
+    [userIds, room]
+  );
 
   return (
-    <Modal title="Incompatible Versions" isDismissable {...rest}>
+    <Modal title={t("Incompatible versions")} isDismissable {...rest}>
       <ModalContent>
         <Body>
-          Other users are trying to join this call from incompatible versions.
-          These users should ensure that they have refreshed their browsers:
-          <ul>{userLis}</ul>
+          <Trans>
+            Other users are trying to join this call from incompatible versions.
+            These users should ensure that they have refreshed their browsers:
+            <ul>{userLis}</ul>
+          </Trans>
         </Body>
       </ModalContent>
     </Modal>

src/LazyEventEmitter.ts

@@ -0,0 +1,90 @@
+/*
+Copyright 2022 Matrix.org Foundation C.I.C.
+
+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 EventEmitter from "events";
+
+type NonEmptyArray<T> = [T, ...T[]];
+
+/**
+ * An event emitter that lets events pile up in a backlog until a listener is
+ * present, at which point any events that were missed are re-emitted.
+ */
+export class LazyEventEmitter extends EventEmitter {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private eventBacklogs = new Map<string | symbol, NonEmptyArray<any[]>>();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public emit(type: string | symbol, ...args: any[]): boolean {
+    const hasListeners = super.emit(type, ...args);
+
+    if (!hasListeners) {
+      // The event was missed, so add it to the backlog
+      const backlog = this.eventBacklogs.get(type);
+      if (backlog) {
+        backlog.push(args);
+      } else {
+        // Start a new backlog
+        this.eventBacklogs.set(type, [args]);
+      }
+    }
+
+    return hasListeners;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public on(type: string | symbol, listener: (...args: any[]) => void): this {
+    super.on(type, listener);
+
+    const backlog = this.eventBacklogs.get(type);
+    if (backlog) {
+      // That was the first listener for this type, so let's send it all the
+      // events that have piled up
+      for (const args of backlog) super.emit(type, ...args);
+      // Backlog is now clear
+      this.eventBacklogs.delete(type);
+    }
+
+    return this;
+  }
+
+  public addListener(
+    type: string | symbol,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    listener: (...args: any[]) => void
+  ): this {
+    return this.on(type, listener);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public once(type: string | symbol, listener: (...args: any[]) => void): this {
+    super.once(type, listener);
+
+    const backlog = this.eventBacklogs.get(type);
+    if (backlog) {
+      // That was the first listener for this type, so let's send it the first
+      // of the events that have piled up
+      super.emit(type, ...backlog[0]);
+      // Clear the event from the backlog
+      if (backlog.length === 1) {
+        this.eventBacklogs.delete(type);
+      } else {
+        backlog.shift();
+      }
+    }
+
+    return this;
+  }
+}

src/Modal.tsx

@@ -33,6 +33,7 @@ import { FocusScope } from "@react-aria/focus";
 import { ButtonAria, useButton } from "@react-aria/button";
 import classNames from "classnames";
 import { AriaDialogProps } from "@react-types/dialog";
+import { useTranslation } from "react-i18next";
 
 import { ReactComponent as CloseIcon } from "./icons/Close.svg";
 import styles from "./Modal.module.css";
@@ -53,6 +54,7 @@ export function Modal({
   onClose,
   ...rest
 }: ModalProps) {
+  const { t } = useTranslation();
   const modalRef = useRef();
   const { overlayProps, underlayProps } = useOverlay(
     { ...rest, onClose },
@@ -90,6 +92,7 @@ export function Modal({
                 {...closeButtonProps}
                 ref={closeButtonRef}
                 className={styles.closeButton}
+                title={t("Close")}
               >
                 <CloseIcon />
               </button>

src/SequenceDiagramViewerPage.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import {
   SequenceDiagramViewer,
@@ -30,7 +31,8 @@ interface DebugLog {
 }
 
 export function SequenceDiagramViewerPage() {
-  usePageTitle("Inspector");
+  const { t } = useTranslation();
+  usePageTitle(t("Inspector"));
 
   const [debugLog, setDebugLog] = useState<DebugLog>();
   const [selectedUserId, setSelectedUserId] = useState<string>();
@@ -49,7 +51,7 @@ export function SequenceDiagramViewerPage() {
           type="file"
           id="debugLog"
           name="debugLog"
-          label="Debug Log"
+          label={t("Debug log")}
           onChange={onChangeDebugLog}
         />
       </FieldRow>

src/Tooltip.module.css

@@ -3,10 +3,12 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 8px 10px;
+  padding: 10px;
   color: var(--primary-content);
   border-radius: 8px;
   max-width: 135px;
   width: max-content;
+  font-size: 12px;
+  font-weight: 500;
   text-align: center;
 }

src/Tooltip.tsx

@@ -86,7 +86,7 @@ export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
       targetRef: triggerRef,
       overlayRef,
       isOpen: tooltipState.isOpen,
-      offset: 5,
+      offset: 12,
     });
 
     return (

src/TranslatedError.ts

@@ -0,0 +1,41 @@
+/*
+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 i18n from "i18next";
+
+/**
+ * An error with messages in both English and the user's preferred language.
+ */
+// Abstract to force consumers to use the function below rather than calling the
+// constructor directly
+export abstract class TranslatedError extends Error {
+  /**
+   * The error message in the user's preferred language.
+   */
+  public readonly translatedMessage: string;
+
+  public constructor(messageKey: string, translationFn: typeof i18n.t) {
+    super(translationFn(messageKey, { lng: "en-GB" }));
+    this.translatedMessage = translationFn(messageKey);
+  }
+}
+
+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);

src/UrlParams.ts

@@ -17,42 +17,53 @@ limitations under the License.
 import { useMemo } from "react";
 import { useLocation } from "react-router-dom";
 
-export interface RoomParams {
+export interface UrlParams {
   roomAlias: string | null;
   roomId: string | null;
   viaServers: string[];
   // Whether the app is running in embedded mode, and should keep the user
   // confined to the current room
   isEmbedded: boolean;
+  // Whether the app should pause before joining the call until it sees an
+  // io.element.join widget action, allowing it to be preloaded
+  preload: boolean;
+  // Whether to hide the room header when in a call
+  hideHeader: boolean;
+  // Whether to hide the screen-sharing button
+  hideScreensharing: boolean;
   // Whether to start a walkie-talkie call instead of a video call
   isPtt: boolean;
   // Whether to use end-to-end encryption
   e2eEnabled: boolean;
-  // The user's ID (only used in Matroska mode)
+  // The user's ID (only used in matryoshka mode)
   userId: string | null;
   // The display name to use for auto-registration
   displayName: string | null;
-  // The device's ID (only used in Matroska mode)
+  // The device's ID (only used in matryoshka mode)
   deviceId: string | null;
+  // The base URL of the homeserver to use for media lookups in matryoshka mode
+  baseUrl: string | null;
+  // The BCP 47 code of the language the app should use
+  lang: string | null;
 }
 
 /**
- * Gets the room parameters for the current URL.
- * @param {string} query The URL query string
- * @param {string} fragment The URL fragment string
- * @returns {RoomParams} The room parameters encoded in the URL
+ * Gets the app parameters for the current URL.
+ * @param query The URL query string
+ * @param fragment The URL fragment string
+ * @returns The app parameters encoded in the URL
  */
-export const getRoomParams = (
+export const getUrlParams = (
   query: string = window.location.search,
   fragment: string = window.location.hash
-): RoomParams => {
+): UrlParams => {
   const fragmentQueryStart = fragment.indexOf("?");
   const fragmentParams = new URLSearchParams(
     fragmentQueryStart === -1 ? "" : fragment.substring(fragmentQueryStart)
   );
   const queryParams = new URLSearchParams(query);
 
-  // Normally, room params should be encoded in the fragment so as to avoid
+  // 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.
   const hasParam = (name: string): boolean =>
@@ -75,19 +86,24 @@ export const getRoomParams = (
     roomId: getParam("roomId"),
     viaServers: getAllParams("via"),
     isEmbedded: hasParam("embed"),
+    preload: hasParam("preload"),
+    hideHeader: hasParam("hideHeader"),
+    hideScreensharing: hasParam("hideScreensharing"),
     isPtt: hasParam("ptt"),
     e2eEnabled: getParam("enableE2e") !== "false", // Defaults to true
     userId: getParam("userId"),
     displayName: getParam("displayName"),
     deviceId: getParam("deviceId"),
+    baseUrl: getParam("baseUrl"),
+    lang: getParam("lang"),
   };
 };
 
 /**
- * Hook to simplify use of getRoomParams.
- * @returns {RoomParams} The room parameters for the current URL
+ * Hook to simplify use of getUrlParams.
+ * @returns The app parameters for the current URL
  */
-export const useRoomParams = (): RoomParams => {
+export const useUrlParams = (): UrlParams => {
   const { hash, search } = useLocation();
-  return useMemo(() => getRoomParams(search, hash), [search, hash]);
+  return useMemo(() => getUrlParams(search, hash), [search, hash]);
 };

src/UserMenu.tsx

@@ -1,6 +1,7 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Item } from "@react-stately/collections";
 import { useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 import { Button, LinkButton } from "./button";
 import { PopoverMenuTrigger } from "./popover/PopoverMenu";
@@ -30,6 +31,7 @@ export function UserMenu({
   avatarUrl,
   onAction,
 }: UserMenuProps) {
+  const { t } = useTranslation();
   const location = useLocation();
 
   const items = useMemo(() => {
@@ -45,7 +47,7 @@ export function UserMenu({
       if (isPasswordlessUser && !preventNavigation) {
         arr.push({
           key: "login",
-          label: "Sign In",
+          label: t("Sign in"),
           icon: LoginIcon,
         });
       }
@@ -53,14 +55,16 @@ export function UserMenu({
       if (!isPasswordlessUser && !preventNavigation) {
         arr.push({
           key: "logout",
-          label: "Sign Out",
+          label: t("Sign out"),
           icon: LogoutIcon,
         });
       }
     }
 
     return arr;
-  }, [isAuthenticated, isPasswordlessUser, displayName, preventNavigation]);
+  }, [isAuthenticated, isPasswordlessUser, displayName, preventNavigation, t]);
+
+  const tooltip = useCallback(() => t("Profile"), [t]);
 
   if (!isAuthenticated) {
     return (
@@ -72,7 +76,7 @@ export function UserMenu({
 
   return (
     <PopoverMenuTrigger placement="bottom right">
-      <TooltipTrigger tooltip={() => "Profile"} placement="bottom left">
+      <TooltipTrigger tooltip={tooltip} placement="bottom left">
         <Button variant="icon" className={styles.userButton}>
           {isAuthenticated && (!isPasswordlessUser || avatarUrl) ? (
             <Avatar
@@ -87,7 +91,7 @@ export function UserMenu({
         </Button>
       </TooltipTrigger>
       {(props) => (
-        <Menu {...props} label="User menu" onAction={onAction}>
+        <Menu {...props} label={t("User menu")} onAction={onAction}>
           {items.map(({ key, icon: Icon, label }) => (
             <Item key={key} textValue={label}>
               <Icon width={24} height={24} className={styles.menuIcon} />

src/auth/LoginPage.tsx

@@ -23,6 +23,7 @@ import React, {
   useMemo,
 } 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 { useClient } from "../ClientContext";
@@ -34,7 +35,8 @@ import { useInteractiveLogin } from "./useInteractiveLogin";
 import { usePageTitle } from "../usePageTitle";
 
 export const LoginPage: FC = () => {
-  usePageTitle("Login");
+  const { t } = useTranslation();
+  usePageTitle(t("Login"));
 
   const { setClient } = useClient();
   const login = useInteractiveLogin();
@@ -93,8 +95,8 @@ export const LoginPage: FC = () => {
                 <InputField
                   type="text"
                   ref={usernameRef}
-                  placeholder="Username"
-                  label="Username"
+                  placeholder={t("Username")}
+                  label={t("Username")}
                   autoCorrect="off"
                   autoCapitalize="none"
                   prefix="@"
@@ -105,18 +107,18 @@ export const LoginPage: FC = () => {
                 <InputField
                   type="password"
                   ref={passwordRef}
-                  placeholder="Password"
-                  label="Password"
+                  placeholder={t("Password")}
+                  label={t("Password")}
                 />
               </FieldRow>
               {error && (
                 <FieldRow>
-                  <ErrorMessage>{error.message}</ErrorMessage>
+                  <ErrorMessage error={error} />
                 </FieldRow>
               )}
               <FieldRow>
                 <Button type="submit" disabled={loading}>
-                  {loading ? "Logging in..." : "Login"}
+                  {loading ? t("Logging in…") : t("Login")}
                 </Button>
               </FieldRow>
             </form>
@@ -124,9 +126,11 @@ export const LoginPage: FC = () => {
           <div className={styles.authLinks}>
             <p>Not registered yet?</p>
             <p>
-              <Link to="/register">Create an account</Link>
-              {" Or "}
-              <Link to="/">Access as a guest</Link>
+              <Trans>
+                <Link to="/register">Create an account</Link>
+                {" Or "}
+                <Link to="/">Access as a guest</Link>
+              </Trans>
             </p>
           </div>
         </div>

src/auth/RegisterPage.tsx

@@ -26,6 +26,7 @@ import React, {
 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 { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
@@ -40,7 +41,8 @@ import { Caption, Link } from "../typography/Typography";
 import { usePageTitle } from "../usePageTitle";
 
 export const RegisterPage: FC = () => {
-  usePageTitle("Register");
+  const { t } = useTranslation();
+  usePageTitle(t("Register"));
 
   const { loading, isAuthenticated, isPasswordlessUser, client, setClient } =
     useClient();
@@ -126,11 +128,11 @@ export const RegisterPage: FC = () => {
 
   useEffect(() => {
     if (password && passwordConfirmation && password !== passwordConfirmation) {
-      confirmPasswordRef.current?.setCustomValidity("Passwords must match");
+      confirmPasswordRef.current?.setCustomValidity(t("Passwords must match"));
     } else {
       confirmPasswordRef.current?.setCustomValidity("");
     }
-  }, [password, passwordConfirmation]);
+  }, [password, passwordConfirmation, t]);
 
   useEffect(() => {
     if (!loading && isAuthenticated && !isPasswordlessUser && !registering) {
@@ -154,8 +156,8 @@ export const RegisterPage: FC = () => {
                 <InputField
                   type="text"
                   name="userName"
-                  placeholder="Username"
-                  label="Username"
+                  placeholder={t("Username")}
+                  label={t("Username")}
                   autoCorrect="off"
                   autoCapitalize="none"
                   prefix="@"
@@ -171,8 +173,8 @@ export const RegisterPage: FC = () => {
                     setPassword(e.target.value)
                   }
                   value={password}
-                  placeholder="Password"
-                  label="Password"
+                  placeholder={t("Password")}
+                  label={t("Password")}
                 />
               </FieldRow>
               <FieldRow>
@@ -184,45 +186,49 @@ export const RegisterPage: FC = () => {
                     setPasswordConfirmation(e.target.value)
                   }
                   value={passwordConfirmation}
-                  placeholder="Confirm Password"
-                  label="Confirm Password"
+                  placeholder={t("Confirm password")}
+                  label={t("Confirm password")}
                   ref={confirmPasswordRef}
                 />
               </FieldRow>
               <Caption>
-                This site is protected by ReCAPTCHA and the Google{" "}
-                <Link href="https://www.google.com/policies/privacy/">
-                  Privacy Policy
-                </Link>{" "}
-                and{" "}
-                <Link href="https://policies.google.com/terms">
-                  Terms of Service
-                </Link>{" "}
-                apply.
-                <br />
-                By clicking "Register", you agree to our{" "}
-                <Link href={privacyPolicyUrl}>Terms and conditions</Link>
+                <Trans>
+                  This site is protected by ReCAPTCHA and the Google{" "}
+                  <Link href="https://www.google.com/policies/privacy/">
+                    Privacy Policy
+                  </Link>{" "}
+                  and{" "}
+                  <Link href="https://policies.google.com/terms">
+                    Terms of Service
+                  </Link>{" "}
+                  apply.
+                  <br />
+                  By clicking "Register", you agree to our{" "}
+                  <Link href={privacyPolicyUrl}>Terms and conditions</Link>
+                </Trans>
               </Caption>
               {error && (
                 <FieldRow>
-                  <ErrorMessage>{error.message}</ErrorMessage>
+                  <ErrorMessage error={error} />
                 </FieldRow>
               )}
               <FieldRow>
                 <Button type="submit" disabled={registering}>
-                  {registering ? "Registering..." : "Register"}
+                  {registering ? t("Registering…") : t("Register")}
                 </Button>
               </FieldRow>
               <div id={recaptchaId} />
             </form>
           </div>
           <div className={styles.authLinks}>
-            <p>Already have an account?</p>
-            <p>
-              <Link to="/login">Log in</Link>
-              {" Or "}
-              <Link to="/">Access as a guest</Link>
-            </p>
+            <Trans>
+              <p>Already have an account?</p>
+              <p>
+                <Link to="/login">Log in</Link>
+                {" Or "}
+                <Link to="/">Access as a guest</Link>
+              </p>
+            </Trans>
           </div>
         </div>
       </div>

src/auth/useInteractiveLogin.ts

@@ -29,7 +29,7 @@ export const useInteractiveLogin = () =>
       password: string
     ) => Promise<[MatrixClient, Session]>
   >(async (homeserver: string, username: string, password: string) => {
-    const authClient = createClient(homeserver);
+    const authClient = createClient({ baseUrl: homeserver });
 
     const interactiveAuth = new InteractiveAuth({
       matrixClient: authClient,

src/auth/useInteractiveRegistration.ts

@@ -37,7 +37,7 @@ export const useInteractiveRegistration = (): [
 
   const authClient = useRef<MatrixClient>();
   if (!authClient.current) {
-    authClient.current = createClient(defaultHomeserver);
+    authClient.current = createClient({ baseUrl: defaultHomeserver });
   }
 
   useEffect(() => {

src/auth/useRecaptcha.ts

@@ -16,6 +16,9 @@ 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 { translatedError } from "../TranslatedError";
 
 declare global {
   interface Window {
@@ -32,6 +35,7 @@ interface RecaptchaPromiseRef {
 }
 
 export const useRecaptcha = (sitekey: string) => {
+  const { t } = useTranslation();
   const [recaptchaId] = useState(() => randomString(16));
   const promiseRef = useRef<RecaptchaPromiseRef>();
 
@@ -71,14 +75,14 @@ export const useRecaptcha = (sitekey: string) => {
 
     if (!window.grecaptcha) {
       console.log("Recaptcha not loaded");
-      return Promise.reject(new Error("Recaptcha not loaded"));
+      return Promise.reject(translatedError("Recaptcha not loaded", t));
     }
 
     return new Promise((resolve, reject) => {
       const observer = new MutationObserver((mutationsList) => {
         for (const item of mutationsList) {
           if ((item.target as HTMLElement)?.style?.visibility !== "visible") {
-            reject(new Error("Recaptcha dismissed"));
+            reject(translatedError("Recaptcha dismissed", t));
             observer.disconnect();
             return;
           }
@@ -108,7 +112,7 @@ export const useRecaptcha = (sitekey: string) => {
         });
       }
     });
-  }, [sitekey]);
+  }, [sitekey, t]);
 
   const reset = useCallback(() => {
     window.grecaptcha?.reset();

src/button/Button.tsx

@@ -18,6 +18,7 @@ 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 styles from "./Button.module.css";
 import { ReactComponent as MicIcon } from "../icons/Mic.svg";
@@ -142,9 +143,11 @@ export function MicButton({
   // TODO: add all props for <Button>
   [index: string]: unknown;
 }) {
+  const { t } = useTranslation();
+
   return (
     <TooltipTrigger
-      tooltip={() => (muted ? "Unmute microphone" : "Mute microphone")}
+      tooltip={() => (muted ? t("Unmute microphone") : t("Mute microphone"))}
     >
       <Button variant="toolbar" {...rest} off={muted}>
         {muted ? <MuteMicIcon /> : <MicIcon />}
@@ -161,9 +164,11 @@ export function VideoButton({
   // TODO: add all props for <Button>
   [index: string]: unknown;
 }) {
+  const { t } = useTranslation();
+
   return (
     <TooltipTrigger
-      tooltip={() => (muted ? "Turn on camera" : "Turn off camera")}
+      tooltip={() => (muted ? t("Turn on camera") : t("Turn off camera"))}
     >
       <Button variant="toolbar" {...rest} off={muted}>
         {muted ? <DisableVideoIcon /> : <VideoIcon />}
@@ -182,9 +187,11 @@ export function ScreenshareButton({
   // TODO: add all props for <Button>
   [index: string]: unknown;
 }) {
+  const { t } = useTranslation();
+
   return (
     <TooltipTrigger
-      tooltip={() => (enabled ? "Stop sharing screen" : "Share screen")}
+      tooltip={() => (enabled ? t("Stop sharing screen") : t("Share screen"))}
     >
       <Button variant="toolbarSecondary" {...rest} on={enabled}>
         <ScreenshareIcon />
@@ -201,8 +208,11 @@ export function HangupButton({
   // TODO: add all props for <Button>
   [index: string]: unknown;
 }) {
+  const { t } = useTranslation();
+  const tooltip = useCallback(() => t("Leave"), [t]);
+
   return (
-    <TooltipTrigger tooltip={() => "Leave"}>
+    <TooltipTrigger tooltip={tooltip}>
       <Button
         variant="toolbar"
         className={classNames(styles.hangupButton, className)}
@@ -222,8 +232,11 @@ export function SettingsButton({
   // TODO: add all props for <Button>
   [index: string]: unknown;
 }) {
+  const { t } = useTranslation();
+  const tooltip = useCallback(() => t("Settings"), [t]);
+
   return (
-    <TooltipTrigger tooltip={() => "Settings"}>
+    <TooltipTrigger tooltip={tooltip}>
       <Button variant="toolbar" {...rest}>
         <SettingsIcon />
       </Button>
@@ -239,8 +252,11 @@ export function InviteButton({
   // TODO: add all props for <Button>
   [index: string]: unknown;
 }) {
+  const { t } = useTranslation();
+  const tooltip = useCallback(() => t("Invite"), [t]);
+
   return (
-    <TooltipTrigger tooltip={() => "Invite"}>
+    <TooltipTrigger tooltip={tooltip}>
       <Button variant="toolbar" {...rest}>
         <AddUserIcon />
       </Button>
@@ -256,8 +272,11 @@ interface AudioButtonProps extends Omit<Props, "variant"> {
 }
 
 export function AudioButton({ volume, ...rest }: AudioButtonProps) {
+  const { t } = useTranslation();
+  const tooltip = useCallback(() => t("Local volume"), [t]);
+
   return (
-    <TooltipTrigger tooltip={() => "Local volume"}>
+    <TooltipTrigger tooltip={tooltip}>
       <Button variant="icon" {...rest}>
         <VolumeIcon volume={volume} />
       </Button>
@@ -273,12 +292,13 @@ export function FullscreenButton({
   fullscreen,
   ...rest
 }: FullscreenButtonProps) {
-  const getTooltip = useCallback(() => {
-    return fullscreen ? "Exit full screen" : "Full screen";
-  }, [fullscreen]);
+  const { t } = useTranslation();
+  const tooltip = useCallback(() => {
+    return fullscreen ? t("Exit full screen") : t("Full screen");
+  }, [fullscreen, t]);
 
   return (
-    <TooltipTrigger tooltip={getTooltip}>
+    <TooltipTrigger tooltip={tooltip}>
       <Button variant="icon" {...rest}>
         {fullscreen ? <FullscreenExit /> : <Fullscreen />}
       </Button>

src/button/CopyButton.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
+import { useTranslation } from "react-i18next";
 import useClipboard from "react-use-clipboard";
 
 import { ReactComponent as CheckIcon } from "../icons/Check.svg";
@@ -36,6 +37,7 @@ export function CopyButton({
   copiedMessage,
   ...rest
 }: Props) {
+  const { t } = useTranslation();
   const [isCopied, setCopied] = useClipboard(value, { successDuration: 3000 });
 
   return (
@@ -49,7 +51,7 @@ export function CopyButton({
     >
       {isCopied ? (
         <>
-          {variant !== "icon" && <span>{copiedMessage || "Copied!"}</span>}
+          {variant !== "icon" && <span>{copiedMessage || t("Copied!")}</span>}
           <CheckIcon />
         </>
       ) : (

src/home/CallTypeDropdown.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React, { FC } from "react";
 import { Item } from "@react-stately/collections";
+import { useTranslation } from "react-i18next";
 
 import { Headline } from "../typography/Typography";
 import { Button } from "../button";
@@ -39,25 +40,29 @@ interface Props {
 }
 
 export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
+  const { t } = useTranslation();
+
   return (
     <PopoverMenuTrigger placement="bottom">
       <Button variant="dropdown" className={commonStyles.headline}>
         <Headline className={styles.label}>
-          {callType === CallType.Video ? "Video call" : "Walkie-talkie call"}
+          {callType === CallType.Video
+            ? t("Video call")
+            : t("Walkie-talkie call")}
         </Headline>
       </Button>
       {(props: JSX.IntrinsicAttributes) => (
-        <Menu {...props} label="Call type menu" onAction={setCallType}>
-          <Item key={CallType.Video} textValue="Video call">
+        <Menu {...props} label={t("Call type menu")} onAction={setCallType}>
+          <Item key={CallType.Video} textValue={t("Video call")}>
             <VideoIcon />
-            <span>Video call</span>
+            <span>{t("Video call")}</span>
             {callType === CallType.Video && (
               <CheckIcon className={menuStyles.checkIcon} />
             )}
           </Item>
-          <Item key={CallType.Radio} textValue="Walkie-talkie call">
+          <Item key={CallType.Radio} textValue={t("Walkie-talkie call")}>
             <MicIcon />
-            <span>Walkie-talkie call</span>
+            <span>{t("Walkie-talkie call")}</span>
             {callType === CallType.Radio && (
               <CheckIcon className={menuStyles.checkIcon} />
             )}

src/home/HomePage.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 import { useClient } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
@@ -23,7 +24,8 @@ import { RegisteredView } from "./RegisteredView";
 import { usePageTitle } from "../usePageTitle";
 
 export function HomePage() {
-  usePageTitle("Home");
+  const { t } = useTranslation();
+  usePageTitle(t("Home"));
 
   const { isAuthenticated, isPasswordlessUser, loading, error, client } =
     useClient();

src/home/JoinExistingCallModal.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { PressEvent } from "@react-types/shared";
+import { useTranslation } from "react-i18next";
 
 import { Modal, ModalContent } from "../Modal";
 import { Button } from "../button";
@@ -29,13 +30,15 @@ interface Props {
   [index: string]: unknown;
 }
 export function JoinExistingCallModal({ onJoin, onClose, ...rest }: Props) {
+  const { t } = useTranslation();
+
   return (
-    <Modal title="Join existing call?" isDismissable {...rest}>
+    <Modal title={t("Join existing call?")} isDismissable {...rest}>
       <ModalContent>
-        <p>This call already exists, would you like to join?</p>
+        <p>{t("This call already exists, would you like to join?")}</p>
         <FieldRow rightAlign className={styles.buttons}>
-          <Button onPress={onClose}>No</Button>
-          <Button onPress={onJoin}>Yes, join call</Button>
+          <Button onPress={onClose}>{t("No")}</Button>
+          <Button onPress={onJoin}>{t("Yes, join call")}</Button>
         </FieldRow>
       </ModalContent>
     </Modal>

src/home/RegisteredView.tsx

@@ -22,6 +22,7 @@ import React, {
 } from "react";
 import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
+import { useTranslation } from "react-i18next";
 
 import { createRoom, roomAliasLocalpartFromRoomName } from "../matrix-utils";
 import { useGroupCallRooms } from "./useGroupCallRooms";
@@ -48,6 +49,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
   const history = useHistory();
+  const { t } = useTranslation();
   const { modalState, modalProps } = useModalTriggerState();
 
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
@@ -93,7 +95,9 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
   }, [history, existingRoomId]);
 
   const callNameLabel =
-    callType === CallType.Video ? "Video call name" : "Walkie-talkie call name";
+    callType === CallType.Video
+      ? t("Video call name")
+      : t("Walkie-talkie call name");
 
   return (
     <>
@@ -127,19 +131,19 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
                 className={styles.button}
                 disabled={loading}
               >
-                {loading ? "Loading..." : "Go"}
+                {loading ? t("Loading…") : t("Go")}
               </Button>
             </FieldRow>
             {error && (
               <FieldRow className={styles.fieldRow}>
-                <ErrorMessage>{error.message}</ErrorMessage>
+                <ErrorMessage error={error} />
               </FieldRow>
             )}
           </Form>
           {recentRooms.length > 0 && (
             <>
               <Title className={styles.recentCallsTitle}>
-                Your recent Calls
+                {t("Your recent calls")}
               </Title>
               <CallList rooms={recentRooms} client={client} disableFacepile />
             </>

src/home/UnauthenticatedView.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React, { FC, useCallback, useState, FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
+import { Trans, useTranslation } from "react-i18next";
 
 import { useClient } from "../ClientContext";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
@@ -47,6 +48,7 @@ export const UnauthenticatedView: FC = () => {
   const { modalState, modalProps } = useModalTriggerState();
   const [onFinished, setOnFinished] = useState<() => void>();
   const history = useHistory();
+  const { t } = useTranslation();
 
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     (e) => {
@@ -105,7 +107,9 @@ export const UnauthenticatedView: FC = () => {
   );
 
   const callNameLabel =
-    callType === CallType.Video ? "Video call name" : "Walkie-talkie call name";
+    callType === CallType.Video
+      ? t("Video call name")
+      : t("Walkie-talkie call name");
 
   return (
     <>
@@ -137,24 +141,26 @@ export const UnauthenticatedView: FC = () => {
               <InputField
                 id="displayName"
                 name="displayName"
-                label="Display Name"
-                placeholder="Display Name"
+                label={t("Display name")}
+                placeholder={t("Display name")}
                 type="text"
                 required
                 autoComplete="off"
               />
             </FieldRow>
             <Caption>
-              By clicking "Go", you agree to our{" "}
-              <Link href={privacyPolicyUrl}>Terms and conditions</Link>
+              <Trans>
+                By clicking "Go", you agree to our{" "}
+                <Link href={privacyPolicyUrl}>Terms and conditions</Link>
+              </Trans>
             </Caption>
             {error && (
               <FieldRow>
-                <ErrorMessage>{error.message}</ErrorMessage>
+                <ErrorMessage error={error} />
               </FieldRow>
             )}
             <Button type="submit" size="lg" disabled={loading}>
-              {loading ? "Loading..." : "Go"}
+              {loading ? t("Loading…") : t("Go")}
             </Button>
             <div id={recaptchaId} />
           </Form>
@@ -162,14 +168,16 @@ export const UnauthenticatedView: FC = () => {
         <footer className={styles.footer}>
           <Body className={styles.mobileLoginLink}>
             <Link color="primary" to="/login">
-              Login to your account
+              {t("Login to your account")}
             </Link>
           </Body>
           <Body>
-            Not registered yet?{" "}
-            <Link color="primary" to="/register">
-              Create an account
-            </Link>
+            <Trans>
+              Not registered yet?{" "}
+              <Link color="primary" to="/register">
+                Create an account
+              </Link>
+            </Trans>
           </Body>
         </footer>
       </div>

src/icons/Logo.svg

@@ -1,4 +1,5 @@
 <svg width="260" height="30" viewBox="0 0 260 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<desc>Element Call (Beta)</desc>
 <circle cx="15" cy="15" r="13" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30ZM12.2579 6.98923C12.2579 6.38376 12.7497 5.89292 13.3565 5.89292C17.4687 5.89292 20.8024 9.21967 20.8024 13.3234C20.8024 13.9289 20.3106 14.4197 19.7038 14.4197C19.0971 14.4197 18.6052 13.9289 18.6052 13.3234C18.6052 10.4306 16.2553 8.08554 13.3565 8.08554C12.7497 8.08554 12.2579 7.59471 12.2579 6.98923ZM24.1066 13.3235C24.1066 12.7181 23.6148 12.2272 23.008 12.2272C22.4013 12.2272 21.9094 12.7181 21.9094 13.3235C21.9094 16.2163 19.5595 18.5614 16.6607 18.5614C16.0539 18.5614 15.5621 19.0523 15.5621 19.6577C15.5621 20.2632 16.0539 20.754 16.6607 20.754C20.7729 20.754 24.1066 17.4273 24.1066 13.3235ZM17.7601 23.011C17.7601 23.6164 17.2682 24.1073 16.6615 24.1073C12.5492 24.1073 9.21553 20.7805 9.21553 16.6768C9.21553 16.0713 9.70739 15.5805 10.3141 15.5805C10.9209 15.5805 11.4127 16.0713 11.4127 16.6768C11.4127 19.5696 13.7627 21.9146 16.6615 21.9146C17.2682 21.9146 17.7601 22.4055 17.7601 23.011ZM5.89281 16.6769C5.89281 17.2824 6.38466 17.7732 6.9914 17.7732C7.59813 17.7732 8.08999 17.2824 8.08999 16.6769C8.08999 13.7841 10.4399 11.439 13.3388 11.439C13.9455 11.439 14.4373 10.9482 14.4373 10.3427C14.4373 9.73722 13.9455 9.24639 13.3388 9.24639C9.22647 9.24639 5.89281 12.5731 5.89281 16.6769Z" fill="#0DBD8B"/>
 <path d="M53.5406 17.258H42.8052C42.932 18.3814 43.3397 19.2782 44.0282 19.9486C44.7167 20.6009 45.6227 20.927 46.746 20.927C47.4889 20.927 48.1593 20.7459 48.7572 20.3835C49.3551 20.0211 49.7809 19.5319 50.0346 18.9159H53.296C52.8611 20.3472 52.0458 21.5068 50.8499 22.3947C49.6722 23.2644 48.2771 23.6992 46.6645 23.6992C44.5627 23.6992 42.8596 23.0016 41.555 21.6065C40.2686 20.2114 39.6254 18.4448 39.6254 16.3068C39.6254 14.2231 40.2776 12.4747 41.5822 11.0614C42.8867 9.64814 44.5718 8.94151 46.6373 8.94151C48.7029 8.94151 50.3698 9.63908 51.6381 11.0342C52.9245 12.4112 53.5677 14.1506 53.5677 16.2524L53.5406 17.258ZM46.6373 11.5778C45.6227 11.5778 44.7801 11.8767 44.1098 12.4747C43.4394 13.0726 43.0226 13.8698 42.8596 14.8663H50.3607C50.2158 13.8698 49.8172 13.0726 49.1649 12.4747C48.5126 11.8767 47.6701 11.5778 46.6373 11.5778Z" fill="white"/>

src/input/AvatarInputField.tsx

@@ -20,6 +20,7 @@ import { useCallback } from "react";
 import { useState } from "react";
 import { forwardRef } from "react";
 import classNames from "classnames";
+import { useTranslation } from "react-i18next";
 
 import { Avatar, Size } from "../Avatar";
 import { Button } from "../button";
@@ -39,6 +40,8 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
     { id, label, className, avatarUrl, displayName, onRemoveAvatar, ...rest },
     ref
   ) => {
+    const { t } = useTranslation();
+
     const [removed, setRemoved] = useState(false);
     const [objUrl, setObjUrl] = useState<string>(null);
 
@@ -97,7 +100,7 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
             variant="icon"
             onPress={onPressRemoveAvatar}
           >
-            Remove
+            {t("Remove")}
           </Button>
         )}
       </div>

src/input/Input.tsx

@@ -14,11 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ChangeEvent, forwardRef, ReactNode } from "react";
+import React, { ChangeEvent, FC, forwardRef, ReactNode } from "react";
 import classNames from "classnames";
 
 import styles from "./Input.module.css";
 import { ReactComponent as CheckIcon } from "../icons/Check.svg";
+import { TranslatedError } from "../TranslatedError";
 
 interface FieldRowProps {
   children: ReactNode;
@@ -140,10 +141,12 @@ export const InputField = forwardRef<
   }
 );
 
-export function ErrorMessage({
-  children,
-}: {
-  children: ReactNode;
-}): JSX.Element {
-  return <p className={styles.errorMessage}>{children}</p>;
+interface ErrorMessageProps {
+  error: Error;
 }
+
+export const ErrorMessage: FC<ErrorMessageProps> = ({ error }) => (
+  <p className={styles.errorMessage}>
+    {error instanceof TranslatedError ? error.translatedMessage : error.message}
+  </p>
+);

src/input/SelectInput.tsx

@@ -19,6 +19,7 @@ import { AriaSelectOptions, HiddenSelect, useSelect } from "@react-aria/select";
 import { useButton } from "@react-aria/button";
 import { useSelectState } from "@react-stately/select";
 import classNames from "classnames";
+import { useTranslation } from "react-i18next";
 
 import { Popover } from "../popover/Popover";
 import { ListBox } from "../ListBox";
@@ -30,6 +31,7 @@ interface Props extends AriaSelectOptions<object> {
 }
 
 export function SelectInput(props: Props): JSX.Element {
+  const { t } = useTranslation();
   const state = useSelectState(props);
 
   const ref = useRef();
@@ -56,7 +58,7 @@ export function SelectInput(props: Props): JSX.Element {
         <span {...valueProps} className={styles.selectedItem}>
           {state.selectedItem
             ? state.selectedItem.rendered
-            : "Select an option"}
+            : t("Select an option")}
         </span>
         <ArrowDownIcon />
       </button>

src/main.tsx

@@ -20,26 +20,42 @@ limitations under the License.
 // dependency references.
 import "matrix-js-sdk/src/browser-index";
 
-import React from "react";
-import ReactDOM from "react-dom";
+import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import { createBrowserHistory } from "history";
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import Backend from "i18next-http-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
 
 import "./index.css";
 import App from "./App";
 import { init as initRageshake } from "./settings/rageshake";
+import { getUrlParams } from "./UrlParams";
 
 initRageshake();
 
 console.info(`matrix-video-chat ${import.meta.env.VITE_APP_VERSION || "dev"}`);
 
+const root = createRoot(document.getElementById("root")!);
+
+let fatalError: Error | null = null;
+
 if (!window.isSecureContext) {
-  throw new Error(
+  fatalError = new Error(
     "This app cannot run in an insecure context. To fix this, access the app " +
       "via a local loopback address, or serve it over HTTPS.\n" +
       "https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts"
   );
+} else if (!navigator.mediaDevices) {
+  fatalError = new Error("Your browser does not support WebRTC.");
+}
+
+if (fatalError !== null) {
+  root.render(fatalError.message);
+  throw fatalError; // Stop the app early
 }
 
 if (import.meta.env.VITE_CUSTOM_THEME) {
@@ -104,9 +120,37 @@ Sentry.init({
   tracesSampleRate: 1.0,
 });
 
-ReactDOM.render(
-  <React.StrictMode>
+const languageDetector = new LanguageDetector();
+languageDetector.addDetector({
+  name: "urlFragment",
+  // Look for a language code in the URL's fragment
+  lookup: () => getUrlParams().lang ?? undefined,
+});
+
+i18n
+  .use(Backend)
+  .use(languageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: "en-GB",
+    defaultNS: "app",
+    keySeparator: false,
+    nsSeparator: false,
+    pluralSeparator: "|",
+    contextSeparator: "|",
+    interpolation: {
+      escapeValue: false, // React has built-in XSS protections
+    },
+    detection: {
+      // No localStorage detectors or caching here, since we don't have any way
+      // of letting the user manually select a language
+      order: ["urlFragment", "navigator"],
+      caches: [],
+    },
+  });
+
+root.render(
+  <StrictMode>
     <App history={history} />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </StrictMode>
 );

src/matrix-utils.ts

@@ -1,34 +1,30 @@
-import Olm from "@matrix-org/olm";
-import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
 import { IndexedDBStore } from "matrix-js-sdk/src/store/indexeddb";
 import { MemoryStore } from "matrix-js-sdk/src/store/memory";
 import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
 import { LocalStorageCryptoStore } from "matrix-js-sdk/src/crypto/store/localStorage-crypto-store";
 import { MemoryCryptoStore } from "matrix-js-sdk/src/crypto/store/memory-crypto-store";
-import {
-  createClient,
-  createRoomWidgetClient,
-  MatrixClient,
-} from "matrix-js-sdk/src/matrix";
+import { createClient } from "matrix-js-sdk/src/matrix";
 import { ICreateClientOpts } from "matrix-js-sdk/src/matrix";
 import { ClientEvent } from "matrix-js-sdk/src/client";
-import { EventType } from "matrix-js-sdk/src/@types/event";
 import { Visibility, Preset } from "matrix-js-sdk/src/@types/partials";
 import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
-import { WidgetApi } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
   GroupCallIntent,
   GroupCallType,
 } from "matrix-js-sdk/src/webrtc/groupCall";
 
+import type { MatrixClient } from "matrix-js-sdk/src/client";
 import type { Room } from "matrix-js-sdk/src/models/room";
 import IndexedDBWorker from "./IndexedDBWorker?worker";
-import { getRoomParams } from "./room/useRoomParams";
+import { getUrlParams } from "./UrlParams";
+import { loadOlm } from "./olm";
 
 export const defaultHomeserver =
   (import.meta.env.VITE_DEFAULT_HOMESERVER as string) ??
   `${window.location.protocol}//${window.location.host}`;
+export const fallbackICEServerAllowed =
+  import.meta.env.VITE_FALLBACK_STUN_ALLOWED === "true";
 
 export const defaultHomeserverHost = new URL(defaultHomeserver).host;
 
@@ -64,73 +60,6 @@ function waitForSync(client: MatrixClient) {
   });
 }
 
-/**
- * Initialises and returns a new widget-API-based Matrix Client.
- * @param widgetId The ID of the widget that the app is running inside.
- * @param parentUrl The URL of the parent client.
- * @returns The MatrixClient instance
- */
-export async function initMatroskaClient(
-  widgetId: string,
-  parentUrl: string
-): Promise<MatrixClient> {
-  // In this mode, we use a special client which routes all requests through
-  // the host application via the widget API
-
-  const { roomId, userId, deviceId } = getRoomParams();
-  if (!roomId) throw new Error("Room ID must be supplied");
-  if (!userId) throw new Error("User ID must be supplied");
-  if (!deviceId) throw new Error("Device ID must be supplied");
-
-  // These are all the event types the app uses
-  const sendState = [
-    { eventType: EventType.GroupCallPrefix },
-    { eventType: EventType.GroupCallMemberPrefix, stateKey: userId },
-  ];
-  const receiveState = [
-    { eventType: EventType.RoomMember },
-    { eventType: EventType.GroupCallPrefix },
-    { eventType: EventType.GroupCallMemberPrefix },
-  ];
-  const sendRecvToDevice = [
-    EventType.CallInvite,
-    EventType.CallCandidates,
-    EventType.CallAnswer,
-    EventType.CallHangup,
-    EventType.CallReject,
-    EventType.CallSelectAnswer,
-    EventType.CallNegotiate,
-    EventType.CallSDPStreamMetadataChanged,
-    EventType.CallSDPStreamMetadataChangedPrefix,
-    EventType.CallReplaces,
-    "org.matrix.call_duplicate_session",
-  ];
-
-  // Since all data should be coming from the host application, there's no
-  // need to persist anything, and therefore we can use the default stores
-  // We don't even need to set up crypto
-  const client = createRoomWidgetClient(
-    new WidgetApi(widgetId, new URL(parentUrl).origin),
-    {
-      sendState,
-      receiveState,
-      sendToDevice: sendRecvToDevice,
-      receiveToDevice: sendRecvToDevice,
-      turnServers: true,
-    },
-    roomId,
-    {
-      baseUrl: "",
-      userId,
-      deviceId,
-      timelineSupport: true,
-    }
-  );
-
-  await client.startClient();
-  return client;
-}
-
 /**
  * Initialises and returns a new standalone Matrix Client.
  * If true is passed for the 'restore' parameter, a check will be made
@@ -144,12 +73,9 @@ export async function initClient(
   clientOptions: ICreateClientOpts,
   restore: boolean
 ): Promise<MatrixClient> {
-  // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-  window.OLM_OPTIONS = {};
-  await Olm.init({ locateFile: () => olmWasmPath });
+  await loadOlm();
 
   let indexedDB: IDBFactory;
-
   try {
     indexedDB = window.indexedDB;
   } catch (e) {}
@@ -206,12 +132,12 @@ export async function initClient(
     storeOpts.cryptoStore = new MemoryCryptoStore();
   }
 
-  // XXX: we read from the room params in RoomPage too:
+  // XXX: we read from the URL params in RoomPage too:
   // it would be much better to read them in one place and pass
   // the values around, but we initialise the matrix client in
   // many different places so we'd have to pass it into all of
   // them.
-  const { e2eEnabled } = getRoomParams();
+  const { e2eEnabled } = getUrlParams();
   if (!e2eEnabled) {
     logger.info("Disabling E2E: group call signalling will NOT be encrypted.");
   }
@@ -224,6 +150,7 @@ export async function initClient(
     // so we don't want API calls taking ages, we'd rather they just fail.
     localTimeoutMs: 5000,
     useE2eForGroupCall: e2eEnabled,
+    fallbackICEServerAllowed: fallbackICEServerAllowed,
   });
 
   try {

src/media-utils.ts

@@ -0,0 +1,89 @@
+/*
+Copyright 2022 Matrix.org Foundation C.I.C.
+
+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 { logger } from "matrix-js-sdk/src/logger";
+
+/**
+ * Finds a media device with label matching 'deviceName'
+ * @param deviceName The label of the device to look for
+ * @param devices The list of devices to search
+ * @returns A matching media device or undefined if no matching device was found
+ */
+export async function findDeviceByName(
+  deviceName: string,
+  kind: MediaDeviceKind,
+  devices: MediaDeviceInfo[]
+): Promise<string | undefined> {
+  const deviceInfo = devices.find(
+    (d) => d.kind === kind && d.label === deviceName
+  );
+  return deviceInfo?.deviceId;
+}
+
+/**
+ * Gets the available audio input/output and video input devices
+ * from the browser: a wrapper around mediaDevices.enumerateDevices()
+ * that requests a stream and holds it while calling enumerateDevices().
+ * This is because some browsers (Firefox) only return device labels when
+ * the app has an active user media stream. In Chrome, this will get a
+ * stream from the default camera which can mean, for example, that the
+ * light for the FaceTime camera turns on briefly even if you selected
+ * another camera. Once the Permissions API
+ * (https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API)
+ * is ready for primetime, this should allow us to avoid this.
+ *
+ * @return The available media devices
+ */
+export async function getDevices(): Promise<MediaDeviceInfo[]> {
+  // First get the devices without their labels, to learn what kinds of streams
+  // we can request
+  let devices: MediaDeviceInfo[];
+  try {
+    devices = await navigator.mediaDevices.enumerateDevices();
+  } catch (error) {
+    logger.warn("Unable to refresh WebRTC devices", error);
+    devices = [];
+  }
+
+  let stream: MediaStream | null = null;
+  try {
+    if (devices.some((d) => d.kind === "audioinput")) {
+      // Holding just an audio stream will be enough to get us all device labels
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    } else if (devices.some((d) => d.kind === "videoinput")) {
+      // We have to resort to a video stream
+      stream = await navigator.mediaDevices.getUserMedia({ video: true });
+    }
+  } catch (e) {
+    logger.info("Couldn't get media stream for enumerateDevices: failing");
+    throw e;
+  }
+
+  if (stream !== null) {
+    try {
+      return await navigator.mediaDevices.enumerateDevices();
+    } catch (error) {
+      logger.warn("Unable to refresh WebRTC devices", error);
+    } finally {
+      for (const track of stream.getTracks()) {
+        track.stop();
+      }
+    }
+  }
+
+  // If all else failed, continue without device labels
+  return devices;
+}

src/olm.ts

@@ -0,0 +1,29 @@
+/*
+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 Olm from "@matrix-org/olm";
+import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
+
+// https://gitlab.matrix.org/matrix-org/olm/-/issues/10
+window.OLM_OPTIONS = {};
+
+let olmLoaded: Promise<void> | null = null;
+
+/**
+ * Loads Olm, if not already loaded.
+ */
+export const loadOlm = (): Promise<void> =>
+  (olmLoaded ??= Olm.init({ locateFile: () => olmWasmPath }));

src/profile/ProfileModal.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React, { ChangeEvent, useCallback, useEffect, useState } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
+import { useTranslation } from "react-i18next";
 
 import { Button } from "../button";
 import { useProfile } from "./useProfile";
@@ -31,6 +32,7 @@ interface Props {
 }
 export function ProfileModal({ client, ...rest }: Props) {
   const { onClose } = rest;
+  const { t } = useTranslation();
   const {
     success,
     error,
@@ -83,14 +85,14 @@ export function ProfileModal({ client, ...rest }: Props) {
   }, [success, onClose]);
 
   return (
-    <Modal title="Profile" isDismissable {...rest}>
+    <Modal title={t("Profile")} isDismissable {...rest}>
       <ModalContent>
         <form onSubmit={onSubmit}>
           <FieldRow className={styles.avatarFieldRow}>
             <AvatarInputField
               id="avatar"
               name="avatar"
-              label="Avatar"
+              label={t("Avatar")}
               avatarUrl={avatarUrl}
               displayName={displayName}
               onRemoveAvatar={onRemoveAvatar}
@@ -100,7 +102,7 @@ export function ProfileModal({ client, ...rest }: Props) {
             <InputField
               id="userId"
               name="userId"
-              label="User Id"
+              label={t("User ID")}
               type="text"
               disabled
               value={client.getUserId()}
@@ -110,18 +112,18 @@ export function ProfileModal({ client, ...rest }: Props) {
             <InputField
               id="displayName"
               name="displayName"
-              label="Display Name"
+              label={t("Display name")}
               type="text"
               required
               autoComplete="off"
-              placeholder="Display Name"
+              placeholder={t("Display name")}
               value={displayName}
               onChange={onChangeDisplayName}
             />
           </FieldRow>
           {error && (
             <FieldRow>
-              <ErrorMessage>{error.message}</ErrorMessage>
+              <ErrorMessage error={error} />
             </FieldRow>
           )}
           <FieldRow rightAlign>
@@ -129,7 +131,7 @@ export function ProfileModal({ client, ...rest }: Props) {
               Cancel
             </Button>
             <Button type="submit" disabled={loading}>
-              {loading ? "Saving..." : "Save"}
+              {loading ? t("Saving…") : t("Save")}
             </Button>
           </FieldRow>
         </form>

src/profile/useProfile.ts

@@ -101,7 +101,9 @@ export function useProfile(client: MatrixClient) {
           if (removeAvatar) {
             await client.setAvatarUrl("");
           } else if (avatar) {
-            mxcAvatarUrl = await client.uploadContent(avatar);
+            ({ content_uri: mxcAvatarUrl } = await client.uploadContent(
+              avatar
+            ));
             await client.setAvatarUrl(mxcAvatarUrl);
           }
 

src/room/AudioPreview.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React from "react";
 import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import { Item } from "@react-stately/collections";
+import { useTranslation } from "react-i18next";
 
 import styles from "./AudioPreview.module.css";
 import { SelectInput } from "../input/SelectInput";
@@ -43,24 +44,26 @@ export function AudioPreview({
   audioOutputs,
   setAudioOutput,
 }: Props) {
+  const { t } = useTranslation();
+
   return (
     <>
-      <h1>{`${roomName} - Walkie-talkie call`}</h1>
+      <h1>{t("{{roomName}} - Walkie-talkie call", { roomName })}</h1>
       <div className={styles.preview}>
         {state === GroupCallState.LocalCallFeedUninitialized && (
           <Body fontWeight="semiBold" className={styles.microphonePermissions}>
-            Microphone permissions needed to join the call.
+            {t("Microphone permissions needed to join the call.")}
           </Body>
         )}
         {state === GroupCallState.InitializingLocalCallFeed && (
           <Body fontWeight="semiBold" className={styles.microphonePermissions}>
-            Accept microphone permissions to join the call.
+            {t("Accept microphone permissions to join the call.")}
           </Body>
         )}
         {state === GroupCallState.LocalCallFeedInitialized && (
           <>
             <SelectInput
-              label="Microphone"
+              label={t("Microphone")}
               selectedKey={audioInput}
               onSelectionChange={setAudioInput}
               className={styles.inputField}
@@ -69,13 +72,13 @@ export function AudioPreview({
                 <Item key={deviceId}>
                   {!!label && label.trim().length > 0
                     ? label
-                    : `Microphone ${index + 1}`}
+                    : t("Microphone {{n}}", { n: index + 1 })}
                 </Item>
               ))}
             </SelectInput>
             {audioOutputs.length > 0 && (
               <SelectInput
-                label="Speaker"
+                label={t("Speaker")}
                 selectedKey={audioOutput}
                 onSelectionChange={setAudioOutput}
                 className={styles.inputField}
@@ -84,7 +87,7 @@ export function AudioPreview({
                   <Item key={deviceId}>
                     {!!label && label.trim().length > 0
                       ? label
-                      : `Speaker ${index + 1}`}
+                      : t("Speaker {{n}}", { n: index + 1 })}
                   </Item>
                 ))}
               </SelectInput>

src/room/CallEndedView.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
+import { Trans, useTranslation } from "react-i18next";
 
 import styles from "./CallEndedView.module.css";
 import { LinkButton } from "../button";
@@ -24,6 +25,7 @@ import { Subtitle, Body, Link, Headline } from "../typography/Typography";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 
 export function CallEndedView({ client }: { client: MatrixClient }) {
+  const { t } = useTranslation();
   const { displayName } = useProfile(client);
 
   return (
@@ -37,29 +39,31 @@ export function CallEndedView({ client }: { client: MatrixClient }) {
       <div className={styles.container}>
         <main className={styles.main}>
           <Headline className={styles.headline}>
-            {displayName}, your call is now ended
+            {t("{{displayName}}, your call is now ended", { displayName })}
           </Headline>
           <div className={styles.callEndedContent}>
-            <Subtitle>
-              Why not finish by setting up a password to keep your account?
-            </Subtitle>
-            <Subtitle>
-              You'll be able to keep your name and set an avatar for use on
-              future calls
-            </Subtitle>
+            <Trans>
+              <Subtitle>
+                Why not finish by setting up a password to keep your account?
+              </Subtitle>
+              <Subtitle>
+                You'll be able to keep your name and set an avatar for use on
+                future calls
+              </Subtitle>
+            </Trans>
             <LinkButton
               className={styles.callEndedButton}
               size="lg"
               variant="default"
               to="/register"
             >
-              Create account
+              {t("Create account")}
             </LinkButton>
           </div>
         </main>
         <Body className={styles.footer}>
           <Link color="primary" to="/">
-            Not now, return to home screen
+            {t("Not now, return to home screen")}
           </Link>
         </Body>
       </div>

src/room/FeedbackModal.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React, { useCallback, useEffect } from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
+import { useTranslation } from "react-i18next";
 
 import { Modal, ModalContent } from "../Modal";
 import { Button } from "../button";
@@ -25,6 +26,7 @@ import {
   useRageshakeRequest,
 } from "../settings/submit-rageshake";
 import { Body } from "../typography/Typography";
+
 interface Props {
   inCall: boolean;
   roomId: string;
@@ -32,7 +34,9 @@ interface Props {
   // TODO: add all props for for <Modal>
   [index: string]: unknown;
 }
+
 export function FeedbackModal({ inCall, roomId, onClose, ...rest }: Props) {
+  const { t } = useTranslation();
   const { submitRageshake, sending, sent, error } = useSubmitRageshake();
   const sendRageshakeRequest = useRageshakeRequest();
 
@@ -67,15 +71,20 @@ export function FeedbackModal({ inCall, roomId, onClose, ...rest }: Props) {
   }, [sent, onClose]);
 
   return (
-    <Modal title="Submit Feedback" isDismissable onClose={onClose} {...rest}>
+    <Modal
+      title={t("Submit feedback")}
+      isDismissable
+      onClose={onClose}
+      {...rest}
+    >
       <ModalContent>
-        <Body>Having trouble? Help us fix it.</Body>
+        <Body>{t("Having trouble? Help us fix it.")}</Body>
         <form onSubmit={onSubmitFeedback}>
           <FieldRow>
             <InputField
               id="description"
               name="description"
-              label="Description (optional)"
+              label={t("Description (optional)")}
               type="textarea"
             />
           </FieldRow>
@@ -83,19 +92,19 @@ export function FeedbackModal({ inCall, roomId, onClose, ...rest }: Props) {
             <InputField
               id="sendLogs"
               name="sendLogs"
-              label="Include Debug Logs"
+              label={t("Include debug logs")}
               type="checkbox"
               defaultChecked
             />
           </FieldRow>
           {error && (
             <FieldRow>
-              <ErrorMessage>{error.message}</ErrorMessage>
+              <ErrorMessage error={error} />
             </FieldRow>
           )}
           <FieldRow>
             <Button type="submit" disabled={sending}>
-              {sending ? "Submitting feedback..." : "Submit Feedback"}
+              {sending ? t("Submitting feedback…") : t("Submit feedback")}
             </Button>
           </FieldRow>
         </form>

src/room/GridLayoutMenu.tsx

@@ -14,8 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { useCallback } from "react";
 import { Item } from "@react-stately/collections";
+import { useTranslation } from "react-i18next";
 
 import { Button } from "../button";
 import { PopoverMenuTrigger } from "../popover/PopoverMenu";
@@ -27,28 +28,33 @@ import { Menu } from "../Menu";
 import { TooltipTrigger } from "../Tooltip";
 
 export type Layout = "freedom" | "spotlight";
+
 interface Props {
   layout: Layout;
   setLayout: (layout: Layout) => void;
 }
+
 export function GridLayoutMenu({ layout, setLayout }: Props) {
+  const { t } = useTranslation();
+  const tooltip = useCallback(() => t("Change layout"), [t]);
+
   return (
     <PopoverMenuTrigger placement="bottom right">
-      <TooltipTrigger tooltip={() => "Layout Type"}>
+      <TooltipTrigger tooltip={tooltip}>
         <Button variant="icon">
           {layout === "spotlight" ? <SpotlightIcon /> : <FreedomIcon />}
         </Button>
       </TooltipTrigger>
       {(props: JSX.IntrinsicAttributes) => (
-        <Menu {...props} label="Grid layout menu" onAction={setLayout}>
-          <Item key="freedom" textValue="Freedom">
+        <Menu {...props} label={t("Grid layout menu")} onAction={setLayout}>
+          <Item key="freedom" textValue={t("Freedom")}>
             <FreedomIcon />
             <span>Freedom</span>
             {layout === "freedom" && (
               <CheckIcon className={menuStyles.checkIcon} />
             )}
           </Item>
-          <Item key="spotlight" textValue="Spotlight">
+          <Item key="spotlight" textValue={t("Spotlight")}>
             <SpotlightIcon />
             <span>Spotlight</span>
             {layout === "spotlight" && (

src/room/GroupCallLoader.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React, { ReactNode } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+import { useTranslation } from "react-i18next";
 
 import { useLoadGroupCall } from "./useLoadGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
@@ -37,6 +38,7 @@ export function GroupCallLoader({
   children,
   createPtt,
 }: Props): JSX.Element {
+  const { t } = useTranslation();
   const { loading, error, groupCall } = useLoadGroupCall(
     client,
     roomIdOrAlias,
@@ -44,12 +46,12 @@ export function GroupCallLoader({
     createPtt
   );
 
-  usePageTitle(groupCall ? groupCall.room.name : "Loading...");
+  usePageTitle(groupCall ? groupCall.room.name : t("Loading…"));
 
   if (loading) {
     return (
       <FullScreenView>
-        <h1>Loading room...</h1>
+        <h1>{t("Loading room…")}</h1>
       </FullScreenView>
     );
   }

src/room/GroupCallView.tsx

@@ -18,7 +18,11 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import { MatrixClient } from "matrix-js-sdk/src/client";
+import { logger } from "matrix-js-sdk/src/logger";
+import { useTranslation } from "react-i18next";
 
+import type { IWidgetApiRequest } from "matrix-widget-api";
+import { widget, ElementWidgetActions, JoinCallData } from "../widget";
 import { useGroupCall } from "./useGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
 import { LobbyView } from "./LobbyView";
@@ -28,22 +32,31 @@ import { CallEndedView } from "./CallEndedView";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 import { useLocationNavigation } from "../useLocationNavigation";
+import { useMediaHandler } from "../settings/useMediaHandler";
+import { findDeviceByName, getDevices } from "../media-utils";
+
 declare global {
   interface Window {
-    groupCall: GroupCall;
+    groupCall?: GroupCall;
   }
 }
+
 interface Props {
   client: MatrixClient;
   isPasswordlessUser: boolean;
   isEmbedded: boolean;
+  preload: boolean;
+  hideHeader: boolean;
   roomIdOrAlias: string;
   groupCall: GroupCall;
 }
+
 export function GroupCallView({
   client,
   isPasswordlessUser,
   isEmbedded,
+  preload,
+  hideHeader,
   roomIdOrAlias,
   groupCall,
 }: Props) {
@@ -63,20 +76,90 @@ export function GroupCallView({
     toggleScreensharing,
     requestingScreenshare,
     isScreensharing,
-    localScreenshareFeed,
     screenshareFeeds,
     participants,
     unencryptedEventsFromUsers,
   } = useGroupCall(groupCall);
 
+  const { t } = useTranslation();
+  const { setAudioInput, setVideoInput } = useMediaHandler();
   const avatarUrl = useRoomAvatar(groupCall.room);
 
   useEffect(() => {
     window.groupCall = groupCall;
+    return () => {
+      delete window.groupCall;
+    };
+  }, [groupCall]);
 
-    // In embedded mode, bypass the lobby and just enter the call straight away
-    if (isEmbedded) groupCall.enter();
-  }, [groupCall, isEmbedded]);
+  useEffect(() => {
+    if (widget && preload) {
+      // In preload mode, wait for a join action before entering
+      const onJoin = async (ev: CustomEvent<IWidgetApiRequest>) => {
+        // Get the available devices so we can match the selected device
+        // to its ID. This involves getting a media stream (see docs on
+        // the function) so we only do it once and re-use the result.
+        const devices = await getDevices();
+
+        const { audioInput, videoInput } = ev.detail
+          .data as unknown as JoinCallData;
+
+        if (audioInput !== null) {
+          const deviceId = await findDeviceByName(
+            audioInput,
+            "audioinput",
+            devices
+          );
+          if (!deviceId) {
+            logger.warn("Unknown audio input: " + audioInput);
+          } else {
+            logger.debug(
+              `Found audio input ID ${deviceId} for name ${audioInput}`
+            );
+            setAudioInput(deviceId);
+          }
+        }
+
+        if (videoInput !== null) {
+          const deviceId = await findDeviceByName(
+            videoInput,
+            "videoinput",
+            devices
+          );
+          if (!deviceId) {
+            logger.warn("Unknown video input: " + videoInput);
+          } else {
+            logger.debug(
+              `Found video input ID ${deviceId} for name ${videoInput}`
+            );
+            setVideoInput(deviceId);
+          }
+        }
+        await Promise.all([
+          groupCall.setMicrophoneMuted(audioInput === null),
+          groupCall.setLocalVideoMuted(videoInput === null),
+        ]);
+
+        await groupCall.enter();
+        await Promise.all([
+          widget.api.setAlwaysOnScreen(true),
+          widget.api.transport.reply(ev.detail, {}),
+        ]);
+      };
+
+      widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
+      return () => {
+        widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
+      };
+    }
+  }, [groupCall, preload, setAudioInput, setVideoInput]);
+
+  useEffect(() => {
+    if (isEmbedded && !preload) {
+      // In embedded mode, bypass the lobby and just enter the call straight away
+      groupCall.enter();
+    }
+  }, [groupCall, isEmbedded, preload]);
 
   useSentryGroupCallHandler(groupCall);
 
@@ -88,11 +171,29 @@ export function GroupCallView({
   const onLeave = useCallback(() => {
     setLeft(true);
     leave();
+    if (widget) {
+      widget.api.transport.send(ElementWidgetActions.HangupCall, {});
+      widget.api.setAlwaysOnScreen(false);
+    }
 
-    if (!isPasswordlessUser) {
+    if (!isPasswordlessUser && !isEmbedded) {
       history.push("/");
     }
-  }, [leave, isPasswordlessUser, history]);
+  }, [leave, isPasswordlessUser, isEmbedded, history]);
+
+  useEffect(() => {
+    if (widget && state === GroupCallState.Entered) {
+      const onHangup = async (ev: CustomEvent<IWidgetApiRequest>) => {
+        leave();
+        await widget.api.transport.reply(ev.detail, {});
+        widget.api.setAlwaysOnScreen(false);
+      };
+      widget.lazyActions.once(ElementWidgetActions.HangupCall, onHangup);
+      return () => {
+        widget.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
+      };
+    }
+  }, [groupCall, state, leave]);
 
   if (error) {
     return <ErrorView error={error} />;
@@ -109,6 +210,7 @@ export function GroupCallView({
           userMediaFeeds={userMediaFeeds}
           onLeave={onLeave}
           isEmbedded={isEmbedded}
+          hideHeader={hideHeader}
         />
       );
     } else {
@@ -118,6 +220,7 @@ export function GroupCallView({
           client={client}
           roomName={groupCall.room.name}
           avatarUrl={avatarUrl}
+          participants={participants}
           microphoneMuted={microphoneMuted}
           localVideoMuted={localVideoMuted}
           toggleLocalVideoMuted={toggleLocalVideoMuted}
@@ -127,47 +230,55 @@ export function GroupCallView({
           onLeave={onLeave}
           toggleScreensharing={toggleScreensharing}
           isScreensharing={isScreensharing}
-          localScreenshareFeed={localScreenshareFeed}
           screenshareFeeds={screenshareFeeds}
           roomIdOrAlias={roomIdOrAlias}
           unencryptedEventsFromUsers={unencryptedEventsFromUsers}
+          hideHeader={hideHeader}
         />
       );
     }
   } else if (state === GroupCallState.Entering) {
     return (
       <FullScreenView>
-        <h1>Entering room...</h1>
+        <h1>{t("Entering room…")}</h1>
       </FullScreenView>
     );
   } else if (left) {
-    return <CallEndedView client={client} />;
-  } else {
-    if (isEmbedded) {
-      return (
-        <FullScreenView>
-          <h1>Loading room...</h1>
-        </FullScreenView>
-      );
+    if (isPasswordlessUser) {
+      return <CallEndedView client={client} />;
     } else {
-      return (
-        <LobbyView
-          client={client}
-          groupCall={groupCall}
-          roomName={groupCall.room.name}
-          avatarUrl={avatarUrl}
-          state={state}
-          onInitLocalCallFeed={initLocalCallFeed}
-          localCallFeed={localCallFeed}
-          onEnter={enter}
-          microphoneMuted={microphoneMuted}
-          localVideoMuted={localVideoMuted}
-          toggleLocalVideoMuted={toggleLocalVideoMuted}
-          toggleMicrophoneMuted={toggleMicrophoneMuted}
-          roomIdOrAlias={roomIdOrAlias}
-          isEmbedded={isEmbedded}
-        />
-      );
+      // If the user is a regular user, we'll have sent them back to the homepage,
+      // so just sit here & do nothing: otherwise we would (briefly) mount the
+      // LobbyView again which would open capture devices again.
+      return null;
     }
+  } else if (preload) {
+    return null;
+  } else if (isEmbedded) {
+    return (
+      <FullScreenView>
+        <h1>{t("Loading room…")}</h1>
+      </FullScreenView>
+    );
+  } else {
+    return (
+      <LobbyView
+        client={client}
+        groupCall={groupCall}
+        roomName={groupCall.room.name}
+        avatarUrl={avatarUrl}
+        state={state}
+        onInitLocalCallFeed={initLocalCallFeed}
+        localCallFeed={localCallFeed}
+        onEnter={enter}
+        microphoneMuted={microphoneMuted}
+        localVideoMuted={localVideoMuted}
+        toggleLocalVideoMuted={toggleLocalVideoMuted}
+        toggleMicrophoneMuted={toggleMicrophoneMuted}
+        roomIdOrAlias={roomIdOrAlias}
+        isEmbedded={isEmbedded}
+        hideHeader={hideHeader}
+      />
+    );
   }
 }

src/room/InCallView.module.css

@@ -43,7 +43,7 @@ limitations under the License.
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 64px;
+  height: calc(50px + 2 * 8px);
 }
 
 .footer > * {
@@ -54,7 +54,7 @@ limitations under the License.
   margin-right: 0px;
 }
 
-.footerFullscreen {
+.maximised .footer {
   position: absolute;
   width: 100%;
   bottom: 0;
@@ -67,8 +67,14 @@ limitations under the License.
   transform: translate(-50%, -50%);
 }
 
-@media (min-width: 800px) {
+@media (min-height: 300px) {
   .footer {
-    height: 118px;
+    height: calc(50px + 2 * 24px);
+  }
+}
+
+@media (min-width: 800px) {
+  .footer {
+    height: calc(50px + 2 * 32px);
   }
 }

src/room/InCallView.tsx

@@ -14,14 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { useEffect, useCallback, useMemo, useRef } from "react";
 import { usePreventScroll } from "@react-aria/overlays";
+import useMeasure from "react-use-measure";
+import { ResizeObserver } from "@juggle/resize-observer";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
 import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
 import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { JoinRule } from "matrix-js-sdk/src/@types/partials";
 
+import type { IWidgetApiRequest } from "matrix-widget-api";
 import styles from "./InCallView.module.css";
 import {
   HangupButton,
@@ -52,6 +57,10 @@ import { useAudioContext } from "../video-grid/useMediaStream";
 import { useFullscreen } from "../video-grid/useFullscreen";
 import { AudioContainer } from "../video-grid/AudioContainer";
 import { useAudioOutputDevice } from "../video-grid/useAudioOutputDevice";
+import { widget, ElementWidgetActions } from "../widget";
+import { useJoinRule } from "./useJoinRule";
+import { useUrlParams } from "../UrlParams";
+import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -62,6 +71,7 @@ const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 interface Props {
   client: MatrixClient;
   groupCall: GroupCall;
+  participants: RoomMember[];
   roomName: string;
   avatarUrl: string;
   microphoneMuted: boolean;
@@ -74,13 +84,16 @@ interface Props {
   onLeave: () => void;
   isScreensharing: boolean;
   screenshareFeeds: CallFeed[];
-  localScreenshareFeed: CallFeed;
   roomIdOrAlias: string;
   unencryptedEventsFromUsers: Set<string>;
+  hideHeader: boolean;
 }
 
-export interface Participant {
+// Represents something that should get a tile on the layout,
+// ie. a user's video feed or a screen share feed.
+export interface TileDescriptor {
   id: string;
+  member: RoomMember;
   focused: boolean;
   presenter: boolean;
   callFeed?: CallFeed;
@@ -90,6 +103,7 @@ export interface Participant {
 export function InCallView({
   client,
   groupCall,
+  participants,
   roomName,
   avatarUrl,
   microphoneMuted,
@@ -102,14 +116,28 @@ export function InCallView({
   toggleScreensharing,
   isScreensharing,
   screenshareFeeds,
-  localScreenshareFeed,
   roomIdOrAlias,
   unencryptedEventsFromUsers,
+  hideHeader,
 }: Props) {
+  const { t } = useTranslation();
   usePreventScroll();
-  const elementRef = useRef<HTMLDivElement>();
+  const joinRule = useJoinRule(groupCall.room);
+
+  const containerRef1 = useRef<HTMLDivElement | null>(null);
+  const [containerRef2, bounds] = useMeasure({ polyfill: ResizeObserver });
+  // Merge the refs so they can attach to the same element
+  const containerRef = useCallback(
+    (el: HTMLDivElement) => {
+      containerRef1.current = el;
+      containerRef2(el);
+    },
+    [containerRef1, containerRef2]
+  );
+
   const { layout, setLayout } = useVideoGridLayout(screenshareFeeds.length > 0);
-  const { toggleFullscreen, fullscreenParticipant } = useFullscreen(elementRef);
+  const { toggleFullscreen, fullscreenParticipant } =
+    useFullscreen(containerRef1);
 
   const [spatialAudio] = useSpatialAudio();
 
@@ -122,53 +150,114 @@ export function InCallView({
 
   useAudioOutputDevice(audioRef, audioOutput);
 
-  const items = useMemo(() => {
-    const participants: Participant[] = [];
+  const { hideScreensharing } = useUrlParams();
 
-    for (const callFeed of userMediaFeeds) {
-      participants.push({
-        id: callFeed.stream.id,
-        callFeed,
-        focused:
-          screenshareFeeds.length === 0 && layout === "spotlight"
-            ? callFeed.userId === activeSpeaker
-            : false,
-        isLocal: callFeed.isLocal(),
+  useEffect(() => {
+    widget?.api.transport.send(
+      layout === "freedom"
+        ? ElementWidgetActions.TileLayout
+        : ElementWidgetActions.SpotlightLayout,
+      {}
+    );
+  }, [layout]);
+
+  useEffect(() => {
+    if (widget) {
+      const onTileLayout = async (ev: CustomEvent<IWidgetApiRequest>) => {
+        setLayout("freedom");
+        await widget.api.transport.reply(ev.detail, {});
+      };
+      const onSpotlightLayout = async (ev: CustomEvent<IWidgetApiRequest>) => {
+        setLayout("spotlight");
+        await widget.api.transport.reply(ev.detail, {});
+      };
+
+      widget.lazyActions.on(ElementWidgetActions.TileLayout, onTileLayout);
+      widget.lazyActions.on(
+        ElementWidgetActions.SpotlightLayout,
+        onSpotlightLayout
+      );
+
+      return () => {
+        widget.lazyActions.off(ElementWidgetActions.TileLayout, onTileLayout);
+        widget.lazyActions.off(
+          ElementWidgetActions.SpotlightLayout,
+          onSpotlightLayout
+        );
+      };
+    }
+  }, [setLayout]);
+
+  const items = useMemo(() => {
+    const tileDescriptors: TileDescriptor[] = [];
+
+    // one tile for each participants, to start with (we want a tile for everyone we
+    // think should be in the call, even if we don't have a media feed for them yet)
+    for (const p of participants) {
+      const userMediaFeed = userMediaFeeds.find((f) => f.userId === p.userId);
+
+      // NB. this assumes that the same user can't join more than once from multiple
+      // devices, but the participants are just RoomMembers, so this assumption is baked
+      // into GroupCall itself.
+      tileDescriptors.push({
+        id: p.userId,
+        member: p,
+        callFeed: userMediaFeed,
+        focused: screenshareFeeds.length === 0 && p.userId === activeSpeaker,
+        isLocal: p.userId === client.getUserId(),
         presenter: false,
       });
     }
 
-    for (const callFeed of screenshareFeeds) {
-      const userMediaItem = participants.find(
-        (item) => item.callFeed.userId === callFeed.userId
+    // add the screenshares too
+    for (const screenshareFeed of screenshareFeeds) {
+      const userMediaItem = tileDescriptors.find(
+        (item) => item.member.userId === screenshareFeed.userId
       );
 
       if (userMediaItem) {
         userMediaItem.presenter = true;
       }
 
-      participants.push({
-        id: callFeed.stream.id,
-        callFeed,
+      tileDescriptors.push({
+        id: screenshareFeed.stream.id,
+        member: screenshareFeed.getMember()!,
+        callFeed: screenshareFeed,
         focused: true,
-        isLocal: callFeed.isLocal(),
+        isLocal: screenshareFeed.isLocal(),
         presenter: false,
       });
     }
 
-    return participants;
-  }, [userMediaFeeds, activeSpeaker, screenshareFeeds, layout]);
+    return tileDescriptors;
+  }, [client, participants, userMediaFeeds, activeSpeaker, screenshareFeeds]);
+
+  // The maximised participant: either the participant that the user has
+  // manually put in fullscreen, or the focused (active) participant if the
+  // window is too small to show everyone
+  const maximisedParticipant = useMemo(
+    () =>
+      fullscreenParticipant ??
+      (bounds.height <= 400 && bounds.width <= 400
+        ? items.find((item) => item.focused) ??
+          items.find((item) => item.callFeed) ??
+          null
+        : null),
+    [fullscreenParticipant, bounds, items]
+  );
+
+  const reducedControls = bounds.width <= 400;
 
   const renderAvatar = useCallback(
     (roomMember: RoomMember, width: number, height: number) => {
-      const avatarUrl = roomMember.user?.avatarUrl;
+      const avatarUrl = roomMember.getMxcAvatarUrl();
       const size = Math.round(Math.min(width, height) / 2);
 
       return (
         <Avatar
           key={roomMember.userId}
           size={size}
-          src={avatarUrl}
+          src={avatarUrl ?? undefined}
           fallback={roomMember.name.slice(0, 1).toUpperCase()}
           className={styles.avatar}
         />
@@ -177,32 +266,47 @@ export function InCallView({
     []
   );
 
-  const renderContent = useCallback((): JSX.Element => {
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  const renderContent = (): JSX.Element => {
     if (items.length === 0) {
       return (
         <div className={styles.centerMessage}>
-          <p>Waiting for other participants...</p>
+          <p>{t("Waiting for other participants…")}</p>
         </div>
       );
     }
-    if (fullscreenParticipant) {
+    if (maximisedParticipant) {
       return (
         <VideoTileContainer
-          key={fullscreenParticipant.id}
-          item={fullscreenParticipant}
+          height={bounds.height}
+          width={bounds.width}
+          key={maximisedParticipant.id}
+          item={maximisedParticipant}
           getAvatar={renderAvatar}
           audioContext={audioContext}
           audioDestination={audioDestination}
           disableSpeakingIndicator={true}
-          isFullscreen={!!fullscreenParticipant}
+          maximised={Boolean(maximisedParticipant)}
+          fullscreen={maximisedParticipant === fullscreenParticipant}
           onFullscreen={toggleFullscreen}
         />
       );
     }
 
     return (
-      <VideoGrid items={items} layout={layout} disableAnimations={isSafari}>
-        {({ item, ...rest }: { item: Participant; [x: string]: unknown }) => (
+      <VideoGrid
+        items={items}
+        layout={layout}
+        disableAnimations={prefersReducedMotion || isSafari}
+      >
+        {({
+          item,
+          ...rest
+        }: {
+          item: TileDescriptor;
+          [x: string]: unknown;
+        }) => (
           <VideoTileContainer
             key={item.id}
             item={item}
@@ -210,43 +314,36 @@ export function InCallView({
             audioContext={audioContext}
             audioDestination={audioDestination}
             disableSpeakingIndicator={items.length < 3}
-            isFullscreen={!!fullscreenParticipant}
+            maximised={false}
+            fullscreen={false}
             onFullscreen={toggleFullscreen}
             {...rest}
           />
         )}
       </VideoGrid>
     );
-  }, [
-    fullscreenParticipant,
-    items,
-    audioContext,
-    audioDestination,
-    layout,
-    renderAvatar,
-    toggleFullscreen,
-  ]);
+  };
 
   const {
     modalState: rageshakeRequestModalState,
     modalProps: rageshakeRequestModalProps,
   } = useRageshakeRequestModal(groupCall.room.roomId);
 
-  const footerClassNames = classNames(styles.footer, {
-    [styles.footerFullscreen]: fullscreenParticipant,
+  const containerClasses = classNames(styles.inRoom, {
+    [styles.maximised]: maximisedParticipant,
   });
 
   return (
-    <div className={styles.inRoom} ref={elementRef}>
+    <div className={containerClasses} ref={containerRef}>
       <audio ref={audioRef} />
-      {(!spatialAudio || fullscreenParticipant) && (
+      {(!spatialAudio || maximisedParticipant) && (
         <AudioContainer
           items={items}
           audioContext={audioContext}
           audioDestination={audioDestination}
         />
       )}
-      {!fullscreenParticipant && (
+      {!hideHeader && !maximisedParticipant && (
         <Header>
           <LeftNav>
             <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
@@ -262,21 +359,24 @@ export function InCallView({
         </Header>
       )}
       {renderContent()}
-      <div className={footerClassNames}>
+      <div className={styles.footer}>
         <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
         <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
-        {canScreenshare && !isSafari && !fullscreenParticipant && (
-          <ScreenshareButton
-            enabled={isScreensharing}
-            onPress={toggleScreensharing}
-          />
-        )}
-        {!fullscreenParticipant && (
+        {canScreenshare &&
+          !hideScreensharing &&
+          !isSafari &&
+          !reducedControls && (
+            <ScreenshareButton
+              enabled={isScreensharing}
+              onPress={toggleScreensharing}
+            />
+          )}
+        {!reducedControls && (
           <OverflowMenu
             inCall
             roomIdOrAlias={roomIdOrAlias}
             groupCall={groupCall}
-            showInvite={true}
+            showInvite={joinRule === JoinRule.Public}
             feedbackModalState={feedbackModalState}
             feedbackModalProps={feedbackModalProps}
           />

src/room/InviteModal.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
 
 import { Modal, ModalContent, ModalProps } from "../Modal";
 import { CopyButton } from "../button";
@@ -25,19 +26,23 @@ interface Props extends Omit<ModalProps, "title" | "children"> {
   roomIdOrAlias: string;
 }
 
-export const InviteModal: FC<Props> = ({ roomIdOrAlias, ...rest }) => (
-  <Modal
-    title="Invite People"
-    isDismissable
-    className={styles.inviteModal}
-    {...rest}
-  >
-    <ModalContent>
-      <p>Copy and share this meeting link</p>
-      <CopyButton
-        className={styles.copyButton}
-        value={getRoomUrl(roomIdOrAlias)}
-      />
-    </ModalContent>
-  </Modal>
-);
+export const InviteModal: FC<Props> = ({ roomIdOrAlias, ...rest }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      title={t("Invite people")}
+      isDismissable
+      className={styles.inviteModal}
+      {...rest}
+    >
+      <ModalContent>
+        <p>{t("Copy and share this call link")}</p>
+        <CopyButton
+          className={styles.copyButton}
+          value={getRoomUrl(roomIdOrAlias)}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};

src/room/LobbyView.tsx

@@ -19,6 +19,7 @@ import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { PressEvent } from "@react-types/shared";
 import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+import { Trans, useTranslation } from "react-i18next";
 
 import styles from "./LobbyView.module.css";
 import { Button, CopyButton } from "../button";
@@ -47,6 +48,7 @@ interface Props {
   localVideoMuted: boolean;
   roomIdOrAlias: string;
   isEmbedded: boolean;
+  hideHeader: boolean;
 }
 export function LobbyView({
   client,
@@ -63,7 +65,9 @@ export function LobbyView({
   toggleMicrophoneMuted,
   roomIdOrAlias,
   isEmbedded,
+  hideHeader,
 }: Props) {
+  const { t } = useTranslation();
   const { stream } = useCallFeed(localCallFeed);
   const {
     audioInput,
@@ -90,14 +94,16 @@ export function LobbyView({
 
   return (
     <div className={styles.room}>
-      <Header>
-        <LeftNav>
-          <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
-        </LeftNav>
-        <RightNav>
-          <UserMenuContainer />
-        </RightNav>
-      </Header>
+      {!hideHeader && (
+        <Header>
+          <LeftNav>
+            <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
+          </LeftNav>
+          <RightNav>
+            <UserMenuContainer />
+          </RightNav>
+        </Header>
+      )}
       <div className={styles.joinRoom}>
         <div className={styles.joinRoomContent}>
           {groupCall.isPtt ? (
@@ -124,29 +130,31 @@ export function LobbyView({
               audioOutput={audioOutput}
             />
           )}
-          <Button
-            ref={joinCallButtonRef}
-            className={styles.copyButton}
-            size="lg"
-            disabled={state !== GroupCallState.LocalCallFeedInitialized}
-            onPress={onEnter}
-          >
-            Join call now
-          </Button>
-          <Body>Or</Body>
-          <CopyButton
-            variant="secondaryCopy"
-            value={getRoomUrl(roomIdOrAlias)}
-            className={styles.copyButton}
-            copiedMessage="Call link copied"
-          >
-            Copy call link and join later
-          </CopyButton>
+          <Trans>
+            <Button
+              ref={joinCallButtonRef}
+              className={styles.copyButton}
+              size="lg"
+              disabled={state !== GroupCallState.LocalCallFeedInitialized}
+              onPress={onEnter}
+            >
+              Join call now
+            </Button>
+            <Body>Or</Body>
+            <CopyButton
+              variant="secondaryCopy"
+              value={getRoomUrl(roomIdOrAlias)}
+              className={styles.copyButton}
+              copiedMessage={t("Call link copied")}
+            >
+              Copy call link and join later
+            </CopyButton>
+          </Trans>
         </div>
         {!isEmbedded && (
           <Body className={styles.joinRoomFooter}>
             <Link color="primary" to="/">
-              Take me Home
+              {t("Take me Home")}
             </Link>
           </Body>
         )}

src/room/OverflowMenu.tsx

@@ -18,6 +18,7 @@ import React, { useCallback } from "react";
 import { Item } from "@react-stately/collections";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
 import { OverlayTriggerState } from "@react-stately/overlays";
+import { useTranslation } from "react-i18next";
 
 import { Button } from "../button";
 import { Menu } from "../Menu";
@@ -31,6 +32,7 @@ import { SettingsModal } from "../settings/SettingsModal";
 import { InviteModal } from "./InviteModal";
 import { TooltipTrigger } from "../Tooltip";
 import { FeedbackModal } from "./FeedbackModal";
+
 interface Props {
   roomIdOrAlias: string;
   inCall: boolean;
@@ -42,6 +44,7 @@ interface Props {
     onClose: () => void;
   };
 }
+
 export function OverflowMenu({
   roomIdOrAlias,
   inCall,
@@ -50,6 +53,8 @@ export function OverflowMenu({
   feedbackModalState,
   feedbackModalProps,
 }: Props) {
+  const { t } = useTranslation();
+
   const {
     modalState: inviteModalState,
     modalProps: inviteModalProps,
@@ -90,29 +95,31 @@ export function OverflowMenu({
     [feedbackModalState, inviteModalState, settingsModalState]
   );
 
+  const tooltip = useCallback(() => t("More"), [t]);
+
   return (
     <>
       <PopoverMenuTrigger disableOnState>
-        <TooltipTrigger tooltip={() => "More"} placement="top">
+        <TooltipTrigger tooltip={tooltip} placement="top">
           <Button variant="toolbar">
             <OverflowIcon />
           </Button>
         </TooltipTrigger>
         {(props: JSX.IntrinsicAttributes) => (
-          <Menu {...props} label="more menu" onAction={onAction}>
+          <Menu {...props} label={t("More menu")} onAction={onAction}>
             {showInvite && (
-              <Item key="invite" textValue="Invite people">
+              <Item key="invite" textValue={t("Invite people")}>
                 <AddUserIcon />
-                <span>Invite people</span>
+                <span>{t("Invite people")}</span>
               </Item>
             )}
-            <Item key="settings" textValue="Settings">
+            <Item key="settings" textValue={t("Settings")}>
               <SettingsIcon />
-              <span>Settings</span>
+              <span>{t("Settings")}</span>
             </Item>
-            <Item key="feedback" textValue="Submit Feedback">
+            <Item key="feedback" textValue={t("Submit feedback")}>
               <FeedbackIcon />
-              <span>Submit Feedback</span>
+              <span>{t("Submit feedback")}</span>
             </Item>
           </Menu>
         )}

src/room/PTTButton.tsx

@@ -22,6 +22,7 @@ import styles from "./PTTButton.module.css";
 import { ReactComponent as MicIcon } from "../icons/Mic.svg";
 import { useEventTarget } from "../useEvents";
 import { Avatar } from "../Avatar";
+import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
 
 interface Props {
   enabled: boolean;
@@ -159,8 +160,14 @@ export const PTTButton: React.FC<Props> = ({
   // TODO: We will need to disable this for a global PTT hotkey to work
   useEventTarget(window, "blur", unhold);
 
+  const prefersReducedMotion = usePrefersReducedMotion();
   const { shadow } = useSpring({
-    shadow: (Math.max(activeSpeakerVolume, -70) + 70) * 0.6,
+    immediate: prefersReducedMotion,
+    shadow: prefersReducedMotion
+      ? activeSpeakerUserId
+        ? 17
+        : 0
+      : (Math.max(activeSpeakerVolume, -70) + 70) * 0.6,
     config: {
       clamp: true,
       tension: 300,

src/room/PTTCallView.tsx

@@ -17,10 +17,12 @@ limitations under the License.
 import React, { useEffect } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
+import i18n from "i18next";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
 import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+import { useTranslation } from "react-i18next";
 
 import { useDelayedState } from "../useDelayedState";
 import { useModalTriggerState } from "../Modal";
@@ -50,40 +52,45 @@ function getPromptText(
   talkOverEnabled: boolean,
   activeSpeakerUserId: string,
   activeSpeakerDisplayName: string,
-  connected: boolean
+  connected: boolean,
+  t: typeof i18n.t
 ): string {
-  if (!connected) return "Connection lost";
+  if (!connected) return t("Connection lost");
 
   const isTouchScreen = Boolean(window.ontouchstart !== undefined);
 
   if (networkWaiting) {
-    return "Waiting for network";
+    return t("Waiting for network");
   }
 
   if (showTalkOverError) {
-    return "You can't talk at the same time";
+    return t("You can't talk at the same time");
   }
 
   if (pttButtonHeld && activeSpeakerIsLocalUser) {
     if (isTouchScreen) {
-      return "Release to stop";
+      return t("Release to stop");
     } else {
-      return "Release spacebar key to stop";
+      return t("Release spacebar key to stop");
     }
   }
 
   if (talkOverEnabled && activeSpeakerUserId && !activeSpeakerIsLocalUser) {
     if (isTouchScreen) {
-      return `Press and hold to talk over ${activeSpeakerDisplayName}`;
+      return t("Press and hold to talk over {{name}}", {
+        name: activeSpeakerDisplayName,
+      });
     } else {
-      return `Press and hold spacebar to talk over ${activeSpeakerDisplayName}`;
+      return t("Press and hold spacebar to talk over {{name}}", {
+        name: activeSpeakerDisplayName,
+      });
     }
   }
 
   if (isTouchScreen) {
-    return "Press and hold to talk";
+    return t("Press and hold to talk");
   } else {
-    return "Press and hold spacebar to talk";
+    return t("Press and hold spacebar to talk");
   }
 }
 
@@ -97,6 +104,7 @@ interface Props {
   userMediaFeeds: CallFeed[];
   onLeave: () => void;
   isEmbedded: boolean;
+  hideHeader: boolean;
 }
 
 export const PTTCallView: React.FC<Props> = ({
@@ -109,7 +117,9 @@ export const PTTCallView: React.FC<Props> = ({
   userMediaFeeds,
   onLeave,
   isEmbedded,
+  hideHeader,
 }) => {
+  const { t } = useTranslation();
   const { modalState: inviteModalState, modalProps: inviteModalProps } =
     useModalTriggerState();
   const { modalState: feedbackModalState, modalProps: feedbackModalProps } =
@@ -176,7 +186,7 @@ export const PTTCallView: React.FC<Props> = ({
         // https://github.com/vector-im/element-call/issues/328
         show={false}
       />
-      {showControls && (
+      {!hideHeader && showControls && (
         <Header className={styles.header}>
           <LeftNav>
             <RoomSetupHeaderInfo
@@ -193,9 +203,11 @@ export const PTTCallView: React.FC<Props> = ({
         {showControls && (
           <>
             <div className={styles.participants}>
-              <p>{`${participants.length} ${
-                participants.length > 1 ? "people" : "person"
-              } connected`}</p>
+              <p>
+                {t("{{count}} people connected", {
+                  count: participants.length,
+                })}
+              </p>
               <Facepile
                 size={facepileSize}
                 max={8}
@@ -228,8 +240,10 @@ export const PTTCallView: React.FC<Props> = ({
                     <AudioIcon className={styles.speakerIcon} />
                   )}
                   {activeSpeakerIsLocalUser
-                    ? "Talking..."
-                    : `${activeSpeakerDisplayName} is talking...`}
+                    ? t("Talking…")
+                    : t("{{name}} is talking…", {
+                        name: activeSpeakerDisplayName,
+                      })}
                 </h2>
                 <Timer value={activeSpeakerUserId} />
               </div>
@@ -261,7 +275,8 @@ export const PTTCallView: React.FC<Props> = ({
                 talkOverEnabled,
                 activeSpeakerUserId,
                 activeSpeakerDisplayName,
-                connected
+                connected,
+                t
               )}
             </p>
           )}
@@ -276,7 +291,7 @@ export const PTTCallView: React.FC<Props> = ({
             <Toggle
               isSelected={talkOverEnabled}
               onChange={setTalkOverEnabled}
-              label="Talk over speaker"
+              label={t("Talk over speaker")}
               id="talkOverEnabled"
             />
           )}

src/room/RageshakeRequestModal.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, { FC, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 
 import { Modal, ModalContent, ModalProps } from "../Modal";
 import { Button } from "../button";
@@ -33,6 +34,7 @@ export const RageshakeRequestModal: FC<Props> = ({
   roomIdOrAlias,
   ...rest
 }) => {
+  const { t } = useTranslation();
   const { submitRageshake, sending, sent, error } = useSubmitRageshake();
 
   useEffect(() => {
@@ -42,11 +44,12 @@ export const RageshakeRequestModal: FC<Props> = ({
   }, [sent, rest]);
 
   return (
-    <Modal title="Debug Log Request" isDismissable {...rest}>
+    <Modal title={t("Debug log request")} isDismissable {...rest}>
       <ModalContent>
         <Body>
-          Another user on this call is having an issue. In order to better
-          diagnose these issues we'd like to collect a debug log.
+          {t(
+            "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log."
+          )}
         </Body>
         <FieldRow>
           <Button
@@ -59,12 +62,12 @@ export const RageshakeRequestModal: FC<Props> = ({
             }
             disabled={sending}
           >
-            {sending ? "Sending debug log..." : "Send debug log"}
+            {sending ? t("Sending debug logs…") : t("Send debug logs")}
           </Button>
         </FieldRow>
         {error && (
           <FieldRow>
-            <ErrorMessage>{error.message}</ErrorMessage>
+            <ErrorMessage error={error} />
           </FieldRow>
         )}
       </ModalContent>

src/room/RoomAuthView.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React, { useCallback, useState } from "react";
 import { useLocation } from "react-router-dom";
+import { Trans, useTranslation } from "react-i18next";
 
 import styles from "./RoomAuthView.module.css";
 import { Button } from "../button";
@@ -50,6 +51,7 @@ export function RoomAuthView() {
     [registerPasswordlessUser]
   );
 
+  const { t } = useTranslation();
   const location = useLocation();
 
   return (
@@ -64,42 +66,46 @@ export function RoomAuthView() {
       </Header>
       <div className={styles.container}>
         <main className={styles.main}>
-          <Headline className={styles.headline}>Join Call</Headline>
+          <Headline className={styles.headline}>{t("Join call")}</Headline>
           <Form className={styles.form} onSubmit={onSubmit}>
             <FieldRow>
               <InputField
                 id="displayName"
                 name="displayName"
-                label="Display Name"
-                placeholder="Display Name"
+                label={t("Display name")}
+                placeholder={t("Display name")}
                 type="text"
                 required
                 autoComplete="off"
               />
             </FieldRow>
             <Caption>
-              By clicking "Join call now", you agree to our{" "}
-              <Link href={privacyPolicyUrl}>Terms and conditions</Link>
+              <Trans>
+                By clicking "Join call now", you agree to our{" "}
+                <Link href={privacyPolicyUrl}>Terms and conditions</Link>
+              </Trans>
             </Caption>
             {error && (
               <FieldRow>
-                <ErrorMessage>{error.message}</ErrorMessage>
+                <ErrorMessage error={error} />
               </FieldRow>
             )}
             <Button type="submit" size="lg" disabled={loading}>
-              {loading ? "Loading..." : "Join call now"}
+              {loading ? t("Loading…") : t("Join call now")}
             </Button>
             <div id={recaptchaId} />
           </Form>
         </main>
         <Body className={styles.footer}>
-          {"Not registered yet? "}
-          <Link
-            color="primary"
-            to={{ pathname: "/login", state: { from: location } }}
-          >
-            Create an account
-          </Link>
+          <Trans>
+            Not registered yet?{" "}
+            <Link
+              color="primary"
+              to={{ pathname: "/login", state: { from: location } }}
+            >
+              Create an account
+            </Link>
+          </Trans>
         </Body>
       </div>
     </>

src/room/RoomPage.tsx

@@ -14,25 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
 
+import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
 import { useClient } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
 import { RoomAuthView } from "./RoomAuthView";
 import { GroupCallLoader } from "./GroupCallLoader";
 import { GroupCallView } from "./GroupCallView";
-import { useRoomParams } from "./useRoomParams";
+import { useUrlParams } from "../UrlParams";
 import { MediaHandlerProvider } from "../settings/useMediaHandler";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
+import { translatedError } from "../TranslatedError";
 
 export const RoomPage: FC = () => {
+  const { t } = useTranslation();
   const { loading, isAuthenticated, error, client, isPasswordlessUser } =
     useClient();
 
-  const { roomAlias, roomId, viaServers, isEmbedded, isPtt, displayName } =
-    useRoomParams();
+  const {
+    roomAlias,
+    roomId,
+    viaServers,
+    isEmbedded,
+    preload,
+    hideHeader,
+    isPtt,
+    displayName,
+  } = useUrlParams();
   const roomIdOrAlias = roomId ?? roomAlias;
-  if (!roomIdOrAlias) throw new Error("No room specified");
+  if (!roomIdOrAlias) throw translatedError("No room specified", t);
 
   const { registerPasswordlessUser } = useRegisterPasswordlessUser();
   const [isRegistering, setIsRegistering] = useState(false);
@@ -53,6 +65,21 @@ export const RoomPage: FC = () => {
     registerPasswordlessUser,
   ]);
 
+  const groupCallView = useCallback(
+    (groupCall: GroupCall) => (
+      <GroupCallView
+        client={client}
+        roomIdOrAlias={roomIdOrAlias}
+        groupCall={groupCall}
+        isPasswordlessUser={isPasswordlessUser}
+        isEmbedded={isEmbedded}
+        preload={preload}
+        hideHeader={hideHeader}
+      />
+    ),
+    [client, roomIdOrAlias, isPasswordlessUser, isEmbedded, preload, hideHeader]
+  );
+
   if (loading || isRegistering) {
     return <LoadingView />;
   }
@@ -73,15 +100,7 @@ export const RoomPage: FC = () => {
         viaServers={viaServers}
         createPtt={isPtt}
       >
-        {(groupCall) => (
-          <GroupCallView
-            client={client}
-            roomIdOrAlias={roomIdOrAlias}
-            groupCall={groupCall}
-            isPasswordlessUser={isPasswordlessUser}
-            isEmbedded={isEmbedded}
-          />
-        )}
+        {groupCallView}
       </GroupCallLoader>
     </MediaHandlerProvider>
   );

src/room/VideoPreview.tsx

@@ -19,6 +19,7 @@ import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import { MatrixClient } from "matrix-js-sdk/src/client";
+import { useTranslation } from "react-i18next";
 
 import { MicButton, VideoButton } from "../button";
 import { useMediaStream } from "../video-grid/useMediaStream";
@@ -40,6 +41,7 @@ interface Props {
   audioOutput: string;
   stream: MediaStream;
 }
+
 export function VideoPreview({
   client,
   state,
@@ -51,6 +53,7 @@ export function VideoPreview({
   audioOutput,
   stream,
 }: Props) {
+  const { t } = useTranslation();
   const videoRef = useMediaStream(stream, audioOutput, true);
   const { displayName, avatarUrl } = useProfile(client);
   const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
@@ -64,12 +67,12 @@ export function VideoPreview({
       <video ref={videoRef} muted playsInline disablePictureInPicture />
       {state === GroupCallState.LocalCallFeedUninitialized && (
         <Body fontWeight="semiBold" className={styles.cameraPermissions}>
-          Camera/microphone permissions needed to join the call.
+          {t("Camera/microphone permissions needed to join the call.")}
         </Body>
       )}
       {state === GroupCallState.InitializingLocalCallFeed && (
         <Body fontWeight="semiBold" className={styles.cameraPermissions}>
-          Accept camera/microphone permissions to join the call.
+          {t("Accept camera/microphone permissions to join the call.")}
         </Body>
       )}
       {state === GroupCallState.LocalCallFeedInitialized && (

src/room/useGroupCall.ts

@@ -26,8 +26,12 @@ import {
 import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { useTranslation } from "react-i18next";
+import { IWidgetApiRequest } from "matrix-widget-api";
 
 import { usePageUnload } from "./usePageUnload";
+import { TranslatedError, translatedError } from "../TranslatedError";
+import { ElementWidgetActions, ScreenshareStartData, widget } from "../widget";
 
 export interface UseGroupCallReturnType {
   state: GroupCallState;
@@ -37,7 +41,7 @@ export interface UseGroupCallReturnType {
   userMediaFeeds: CallFeed[];
   microphoneMuted: boolean;
   localVideoMuted: boolean;
-  error: Error;
+  error: TranslatedError | null;
   initLocalCallFeed: () => void;
   enter: () => void;
   leave: () => void;
@@ -47,8 +51,7 @@ export interface UseGroupCallReturnType {
   requestingScreenshare: boolean;
   isScreensharing: boolean;
   screenshareFeeds: CallFeed[];
-  localScreenshareFeed: CallFeed;
-  localDesktopCapturerSourceId: string;
+  localDesktopCapturerSourceId: string; // XXX: This looks unused?
   participants: RoomMember[];
   hasLocalParticipant: boolean;
   unencryptedEventsFromUsers: Set<string>;
@@ -60,11 +63,10 @@ interface State {
   localCallFeed: CallFeed;
   activeSpeaker: string;
   userMediaFeeds: CallFeed[];
-  error: Error;
+  error: TranslatedError | null;
   microphoneMuted: boolean;
   localVideoMuted: boolean;
   screenshareFeeds: CallFeed[];
-  localScreenshareFeed: CallFeed;
   localDesktopCapturerSourceId: string;
   isScreensharing: boolean;
   requestingScreenshare: boolean;
@@ -85,7 +87,6 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
       localVideoMuted,
       isScreensharing,
       screenshareFeeds,
-      localScreenshareFeed,
       localDesktopCapturerSourceId,
       participants,
       hasLocalParticipant,
@@ -103,7 +104,6 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
     localVideoMuted: false,
     isScreensharing: false,
     screenshareFeeds: [],
-    localScreenshareFeed: null,
     localDesktopCapturerSourceId: null,
     requestingScreenshare: false,
     participants: [],
@@ -131,7 +131,6 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
         microphoneMuted: groupCall.isMicrophoneMuted(),
         localVideoMuted: groupCall.isLocalVideoMuted(),
         isScreensharing: groupCall.isScreensharing(),
-        localScreenshareFeed: groupCall.localScreenshareFeed,
         localDesktopCapturerSourceId: groupCall.localDesktopCapturerSourceId,
         screenshareFeeds: [...groupCall.screenshareFeeds],
         participants: [...groupCall.participants],
@@ -168,12 +167,11 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
 
     function onLocalScreenshareStateChanged(
       isScreensharing: boolean,
-      localScreenshareFeed: CallFeed,
+      _localScreenshareFeed: CallFeed,
       localDesktopCapturerSourceId: string
     ): void {
       updateState({
         isScreensharing,
-        localScreenshareFeed,
         localDesktopCapturerSourceId,
       });
     }
@@ -224,7 +222,6 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
       microphoneMuted: groupCall.isMicrophoneMuted(),
       localVideoMuted: groupCall.isLocalVideoMuted(),
       isScreensharing: groupCall.isScreensharing(),
-      localScreenshareFeed: groupCall.localScreenshareFeed,
       localDesktopCapturerSourceId: groupCall.localDesktopCapturerSourceId,
       screenshareFeeds: [...groupCall.screenshareFeeds],
       participants: [...groupCall.participants],
@@ -299,25 +296,96 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
     groupCall.setMicrophoneMuted(!groupCall.isMicrophoneMuted());
   }, [groupCall]);
 
-  const toggleScreensharing = useCallback(() => {
-    updateState({ requestingScreenshare: true });
+  const toggleScreensharing = useCallback(async () => {
+    if (!groupCall.isScreensharing()) {
+      // toggling on
+      updateState({ requestingScreenshare: true });
 
-    groupCall
-      .setScreensharingEnabled(!groupCall.isScreensharing(), { audio: true })
-      .then(() => {
+      try {
+        await groupCall.setScreensharingEnabled(true, {
+          audio: true,
+          throwOnFail: true,
+        });
         updateState({ requestingScreenshare: false });
-      });
+      } catch (e) {
+        // this will fail in Electron because getDisplayMedia just throws a permission
+        // error, so if we have a widget API, try requesting via that.
+        if (widget) {
+          const reply = await widget.api.transport.send(
+            ElementWidgetActions.ScreenshareRequest,
+            {}
+          );
+          if (!reply.pending) {
+            updateState({ requestingScreenshare: false });
+          }
+        }
+      }
+    } else {
+      // toggling off
+      groupCall.setScreensharingEnabled(false);
+    }
   }, [groupCall]);
 
+  const onScreenshareStart = useCallback(
+    async (ev: CustomEvent<IWidgetApiRequest>) => {
+      updateState({ requestingScreenshare: false });
+
+      const data = ev.detail.data as unknown as ScreenshareStartData;
+
+      await groupCall.setScreensharingEnabled(true, {
+        desktopCapturerSourceId: data.desktopCapturerSourceId as string,
+        audio: !data.desktopCapturerSourceId,
+      });
+      await widget.api.transport.reply(ev.detail, {});
+    },
+    [groupCall]
+  );
+
+  const onScreenshareStop = useCallback(
+    async (ev: CustomEvent<IWidgetApiRequest>) => {
+      updateState({ requestingScreenshare: false });
+      await groupCall.setScreensharingEnabled(false);
+      await widget.api.transport.reply(ev.detail, {});
+    },
+    [groupCall]
+  );
+
+  useEffect(() => {
+    if (widget) {
+      widget.lazyActions.on(
+        ElementWidgetActions.ScreenshareStart,
+        onScreenshareStart
+      );
+      widget.lazyActions.on(
+        ElementWidgetActions.ScreenshareStop,
+        onScreenshareStop
+      );
+
+      return () => {
+        widget.lazyActions.off(
+          ElementWidgetActions.ScreenshareStart,
+          onScreenshareStart
+        );
+        widget.lazyActions.off(
+          ElementWidgetActions.ScreenshareStop,
+          onScreenshareStop
+        );
+      };
+    }
+  }, [onScreenshareStart, onScreenshareStop]);
+
+  const { t } = useTranslation();
+
   useEffect(() => {
     if (window.RTCPeerConnection === undefined) {
-      const error = new Error(
-        "WebRTC is not supported or is being blocked in this browser."
+      const error = translatedError(
+        "WebRTC is not supported or is being blocked in this browser.",
+        t
       );
       console.error(error);
       updateState({ error });
     }
-  }, []);
+  }, [t]);
 
   return {
     state,
@@ -337,7 +405,6 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
     requestingScreenshare,
     isScreensharing,
     screenshareFeeds,
-    localScreenshareFeed,
     localDesktopCapturerSourceId,
     participants,
     hasLocalParticipant,

src/room/useJoinRule.ts

@@ -0,0 +1,26 @@
+/*
+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 } from "react";
+
+import type { Room } from "matrix-js-sdk/src/models/room";
+import { useRoomState } from "./useRoomState";
+
+export const useJoinRule = (room: Room) =>
+  useRoomState(
+    room,
+    useCallback((state) => state.getJoinRule(), [])
+  );

src/room/useLoadGroupCall.ts

@@ -22,11 +22,14 @@ import {
 } from "matrix-js-sdk/src/webrtc/groupCall";
 import { GroupCallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/groupCallEventHandler";
 import { logger } from "matrix-js-sdk/src/logger";
+import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
+import { SyncState } from "matrix-js-sdk/src/sync";
+import { useTranslation } from "react-i18next";
 
-import type { MatrixClient } from "matrix-js-sdk/src/client";
 import type { Room } from "matrix-js-sdk/src/models/room";
 import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
 import { isLocalRoomId, createRoom, roomNameFromRoomId } from "../matrix-utils";
+import { translatedError } from "../TranslatedError";
 
 export interface GroupCallLoadState {
   loading: boolean;
@@ -40,6 +43,7 @@ export const useLoadGroupCall = (
   viaServers: string[],
   createPtt: boolean
 ): GroupCallLoadState => {
+  const { t } = useTranslation();
   const [state, setState] = useState<GroupCallLoadState>({ loading: true });
 
   useEffect(() => {
@@ -80,7 +84,7 @@ export const useLoadGroupCall = (
       const room = await fetchOrCreateRoom();
       logger.debug(`Fetched / joined room ${roomIdOrAlias}`);
       const groupCall = client.getGroupCallForRoom(room.roomId);
-      logger.debug("Got group call", groupCall);
+      logger.debug("Got group call", groupCall?.groupCallId);
 
       if (groupCall) return groupCall;
 
@@ -121,19 +125,38 @@ export const useLoadGroupCall = (
 
         const timeout = setTimeout(() => {
           client.off(GroupCallEventHandlerEvent.Incoming, onGroupCallIncoming);
-          reject(new Error("Fetching group call timed out."));
+          reject(translatedError("Fetching group call timed out.", t));
         }, 30000);
       });
     };
 
-    fetchOrCreateGroupCall()
+    const waitForClientSyncing = async () => {
+      if (client.getSyncState() !== SyncState.Syncing) {
+        logger.debug(
+          "useLoadGroupCall: waiting for client to start syncing..."
+        );
+        await new Promise<void>((resolve) => {
+          const onSync = () => {
+            if (client.getSyncState() === SyncState.Syncing) {
+              client.off(ClientEvent.Sync, onSync);
+              return resolve();
+            }
+          };
+          client.on(ClientEvent.Sync, onSync);
+        });
+        logger.debug("useLoadGroupCall: client is now syncing.");
+      }
+    };
+
+    waitForClientSyncing()
+      .then(fetchOrCreateGroupCall)
       .then((groupCall) =>
         setState((prevState) => ({ ...prevState, loading: false, groupCall }))
       )
       .catch((error) =>
         setState((prevState) => ({ ...prevState, loading: false, error }))
       );
-  }, [client, roomIdOrAlias, viaServers, createPtt]);
+  }, [client, roomIdOrAlias, viaServers, createPtt, t]);
 
   return state;
 };

src/room/usePageUnload.ts

@@ -34,7 +34,7 @@ function isIOS() {
 
 export function usePageUnload(callback: () => void) {
   useEffect(() => {
-    let pageVisibilityTimeout: number;
+    let pageVisibilityTimeout: ReturnType<typeof setTimeout>;
 
     function onBeforeUnload(event: PageTransitionEvent) {
       if (event.type === "visibilitychange") {

src/room/useRoomAvatar.ts

@@ -1,24 +1,26 @@
-import { useState, useEffect } from "react";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+/*
+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 } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
-import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
-import { EventType } from "matrix-js-sdk/src/@types/event";
 
-export const useRoomAvatar = (room: Room) => {
-  const [avatarUrl, setAvatarUrl] = useState(room.getMxcAvatarUrl());
+import { useRoomState } from "./useRoomState";
 
-  useEffect(() => {
-    const update = (ev: MatrixEvent) => {
-      if (ev.getType() === EventType.RoomAvatar) {
-        setAvatarUrl(room.getMxcAvatarUrl());
-      }
-    };
-
-    room.currentState.on(RoomStateEvent.Events, update);
-    return () => {
-      room.currentState.off(RoomStateEvent.Events, update);
-    };
-  }, [room]);
-
-  return avatarUrl;
-};
+export const useRoomAvatar = (room: Room) =>
+  useRoomState(
+    room,
+    useCallback(() => room.getMxcAvatarUrl(), [room])
+  );

src/room/useRoomState.ts

@@ -0,0 +1,39 @@
+/*
+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 { RoomState, RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
+import { useCallback, useMemo, useState } from "react";
+
+import type { Room } from "matrix-js-sdk/src/models/room";
+import { useTypedEventEmitter } from "../useEvents";
+
+/**
+ * A React hook for values computed from room state.
+ * @param room The room.
+ * @param f A mapping from the current room state to the computed value.
+ * @returns The computed value.
+ */
+export const useRoomState = <T>(room: Room, f: (state: RoomState) => T): T => {
+  const [numUpdates, setNumUpdates] = useState(0);
+  useTypedEventEmitter(
+    room,
+    RoomStateEvent.Update,
+    useCallback(() => setNumUpdates((n) => n + 1), [setNumUpdates])
+  );
+  // We want any change to the update counter to trigger an update here
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(() => f(room.currentState), [room, f, numUpdates]);
+};

src/settings/SettingsModal.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { Item } from "@react-stately/collections";
+import { useTranslation } from "react-i18next";
 
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
@@ -37,6 +38,7 @@ interface Props {
 }
 
 export const SettingsModal = (props: Props) => {
+  const { t } = useTranslation();
   const {
     audioInput,
     audioInputs,
@@ -56,7 +58,7 @@ export const SettingsModal = (props: Props) => {
 
   return (
     <Modal
-      title="Settings"
+      title={t("Settings")}
       isDismissable
       mobileFullScreen
       className={styles.settingsModal}
@@ -67,12 +69,12 @@ export const SettingsModal = (props: Props) => {
           title={
             <>
               <AudioIcon width={16} height={16} />
-              <span>Audio</span>
+              <span>{t("Audio")}</span>
             </>
           }
         >
           <SelectInput
-            label="Microphone"
+            label={t("Microphone")}
             selectedKey={audioInput}
             onSelectionChange={setAudioInput}
           >
@@ -80,13 +82,13 @@ export const SettingsModal = (props: Props) => {
               <Item key={deviceId}>
                 {!!label && label.trim().length > 0
                   ? label
-                  : `Microphone ${index + 1}`}
+                  : t("Microphone {{n}}", { n: index + 1 })}
               </Item>
             ))}
           </SelectInput>
           {audioOutputs.length > 0 && (
             <SelectInput
-              label="Speaker"
+              label={t("Speaker")}
               selectedKey={audioOutput}
               onSelectionChange={setAudioOutput}
             >
@@ -94,7 +96,7 @@ export const SettingsModal = (props: Props) => {
                 <Item key={deviceId}>
                   {!!label && label.trim().length > 0
                     ? label
-                    : `Speaker ${index + 1}`}
+                    : t("Speaker {{n}}", { n: index + 1 })}
                 </Item>
               ))}
             </SelectInput>
@@ -102,10 +104,12 @@ export const SettingsModal = (props: Props) => {
           <FieldRow>
             <InputField
               id="spatialAudio"
-              label="Spatial audio"
+              label={t("Spatial audio")}
               type="checkbox"
               checked={spatialAudio}
-              description="This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)"
+              description={t(
+                "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)"
+              )}
               onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                 setSpatialAudio(event.target.checked)
               }
@@ -116,12 +120,12 @@ export const SettingsModal = (props: Props) => {
           title={
             <>
               <VideoIcon width={16} height={16} />
-              <span>Video</span>
+              <span>{t("Video")}</span>
             </>
           }
         >
           <SelectInput
-            label="Camera"
+            label={t("Camera")}
             selectedKey={videoInput}
             onSelectionChange={setVideoInput}
           >
@@ -129,7 +133,7 @@ export const SettingsModal = (props: Props) => {
               <Item key={deviceId}>
                 {!!label && label.trim().length > 0
                   ? label
-                  : `Camera ${index + 1}`}
+                  : t("Camera {{n}}", { n: index + 1 })}
               </Item>
             ))}
           </SelectInput>
@@ -138,20 +142,22 @@ export const SettingsModal = (props: Props) => {
           title={
             <>
               <DeveloperIcon width={16} height={16} />
-              <span>Developer</span>
+              <span>{t("Developer")}</span>
             </>
           }
         >
           <FieldRow>
             <Body className={styles.fieldRowText}>
-              Version: {import.meta.env.VITE_APP_VERSION || "dev"}
+              {t("Version: {{version}}", {
+                version: import.meta.env.VITE_APP_VERSION || "dev",
+              })}
             </Body>
           </FieldRow>
           <FieldRow>
             <InputField
               id="showInspector"
               name="inspector"
-              label="Show Call Inspector"
+              label={t("Show call inspector")}
               type="checkbox"
               checked={showInspector}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -160,7 +166,9 @@ export const SettingsModal = (props: Props) => {
             />
           </FieldRow>
           <FieldRow>
-            <Button onPress={downloadDebugLog}>Download Debug Logs</Button>
+            <Button onPress={downloadDebugLog}>
+              {t("Download debug logs")}
+            </Button>
           </FieldRow>
         </TabItem>
       </TabContainer>

src/settings/useMediaHandler.tsx

@@ -160,7 +160,7 @@ export function MediaHandlerProvider({ client, children }: Props): JSX.Element {
 
         if (
           // @ts-ignore
-          mediaHandler.videoInput !== videoInput ||
+          (mediaHandler.videoInput && mediaHandler.videoInput !== videoInput) ||
           // @ts-ignore
           mediaHandler.audioInput !== audioInput
         ) {

src/tabs/Tabs.tsx

@@ -38,7 +38,7 @@ export function TabContainer<T extends object>(
     <div className={classNames(styles.tabContainer, props.className)}>
       <ul {...tabListProps} ref={ref} className={styles.tabList}>
         {[...state.collection].map((item) => (
-          <Tab item={item} state={state} />
+          <Tab item={item} state={state} key={item.key} />
         ))}
       </ul>
       <TabPanel key={state.selectedItem?.key} state={state} />

src/typography/Typography.module.css

@@ -24,6 +24,11 @@
   color: var(--links);
 }
 
+.link:hover {
+  text-decoration: underline;
+  opacity: initial;
+}
+
 .primary {
   color: var(--accent);
 }

src/useEvents.ts

@@ -16,6 +16,12 @@ limitations under the License.
 
 import { useEffect } from "react";
 
+import type {
+  Listener,
+  ListenerMap,
+  TypedEventEmitter,
+} from "matrix-js-sdk/src/models/typed-event-emitter";
+
 // Shortcut for registering a listener on an EventTarget
 export const useEventTarget = <T extends Event>(
   target: EventTarget,
@@ -31,4 +37,20 @@ export const useEventTarget = <T extends Event>(
   }, [target, eventType, listener, options]);
 };
 
-// TODO: Have a similar hook for EventEmitters
+// Shortcut for registering a listener on a TypedEventEmitter
+export const useTypedEventEmitter = <
+  Events extends string,
+  Arguments extends ListenerMap<Events>,
+  T extends Events
+>(
+  emitter: TypedEventEmitter<Events, Arguments>,
+  eventType: T,
+  listener: Listener<Events, Arguments, T>
+) => {
+  useEffect(() => {
+    emitter.on(eventType, listener);
+    return () => {
+      emitter.off(eventType, listener);
+    };
+  }, [emitter, eventType, listener]);
+};

src/usePageTitle.ts

@@ -18,8 +18,7 @@ import { useEffect } from "react";
 
 export function usePageTitle(title: string): void {
   useEffect(() => {
-    const productName =
-      import.meta.env.VITE_PRODUCT_NAME || "Matrix Video Chat";
+    const productName = import.meta.env.VITE_PRODUCT_NAME || "Element Call";
     document.title = title ? `${productName} | ${title}` : productName;
   }, [title]);
 }

src/usePrefersReducedMotion.ts

@@ -0,0 +1,42 @@
+/*
+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, useRef, useState } from "react";
+
+import { useEventTarget } from "./useEvents";
+
+/**
+ * @returns Whether the user has requested reduced motion.
+ */
+export const usePrefersReducedMotion = () => {
+  const mediaQuery = useRef<MediaQueryList>();
+  if (mediaQuery.current === undefined)
+    mediaQuery.current = matchMedia("(prefers-reduced-motion)");
+
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(
+    mediaQuery.current.matches
+  );
+  useEventTarget(
+    mediaQuery.current!,
+    "change",
+    useCallback(
+      () => setPrefersReducedMotion(mediaQuery.current!.matches),
+      [setPrefersReducedMotion]
+    )
+  );
+
+  return prefersReducedMotion;
+};

src/video-grid/AudioContainer.tsx

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect, useRef } from "react";
+import React, { FC, useEffect, useRef } from "react";
 
-import { Participant } from "../room/InCallView";
+import { TileDescriptor } from "../room/InCallView";
 import { useCallFeed } from "./useCallFeed";
 import { useMediaStreamTrackCount } from "./useMediaStream";
 
@@ -24,24 +24,27 @@ import { useMediaStreamTrackCount } from "./useMediaStream";
 // only way to a hook on an array
 
 interface AudioForParticipantProps {
-  item: Participant;
+  item: TileDescriptor;
   audioContext: AudioContext;
   audioDestination: AudioNode;
 }
 
-export function AudioForParticipant({
+export const AudioForParticipant: FC<AudioForParticipantProps> = ({
   item,
   audioContext,
   audioDestination,
-}: AudioForParticipantProps): JSX.Element {
-  const { stream, localVolume, audioMuted } = useCallFeed(item.callFeed);
+}) => {
+  const { stream, localVolume } = useCallFeed(item.callFeed);
   const [audioTrackCount] = useMediaStreamTrackCount(stream);
 
   const gainNodeRef = useRef<GainNode>();
   const sourceRef = useRef<MediaStreamAudioSourceNode>();
 
   useEffect(() => {
-    if (!item.isLocal && audioContext && !audioMuted && audioTrackCount > 0) {
+    // We don't compare the audioMuted flag of useCallFeed here, since unmuting
+    // depends on to-device messages which may lag behind the audio actually
+    // starting to flow over the network
+    if (!item.isLocal && audioContext && audioTrackCount > 0) {
       if (!gainNodeRef.current) {
         gainNodeRef.current = new GainNode(audioContext, {
           gain: localVolume,
@@ -68,23 +71,19 @@ export function AudioForParticipant({
     audioDestination,
     stream,
     localVolume,
-    audioMuted,
     audioTrackCount,
   ]);
 
   return null;
-}
+};
 
 interface AudioContainerProps {
-  items: Participant[];
+  items: TileDescriptor[];
   audioContext: AudioContext;
   audioDestination: AudioNode;
 }
 
-export function AudioContainer({
-  items,
-  ...rest
-}: AudioContainerProps): JSX.Element {
+export const AudioContainer: FC<AudioContainerProps> = ({ items, ...rest }) => {
   return (
     <>
       {items
@@ -94,4 +93,4 @@ export function AudioContainer({
         ))}
     </>
   );
-}
+};

src/video-grid/VideoGrid.stories.tsx

@@ -16,11 +16,12 @@ limitations under the License.
 
 import React, { useState } from "react";
 import { useMemo } from "react";
+import { RoomMember } from "matrix-js-sdk";
 
 import { VideoGrid, useVideoGridLayout } from "./VideoGrid";
 import { VideoTile } from "./VideoTile";
 import { Button } from "../button";
-import { Participant } from "../room/InCallView";
+import { TileDescriptor } from "../room/InCallView";
 
 export default {
   title: "VideoGrid",
@@ -33,10 +34,11 @@ export const ParticipantsTest = () => {
   const { layout, setLayout } = useVideoGridLayout(false);
   const [participantCount, setParticipantCount] = useState(1);
 
-  const items: Participant[] = useMemo(
+  const items: TileDescriptor[] = useMemo(
     () =>
       new Array(participantCount).fill(undefined).map((_, i) => ({
         id: (i + 1).toString(),
+        member: new RoomMember("!fake:room.id", `@user${i}:fake.dummy`),
         focused: false,
         presenter: false,
       })),
@@ -77,6 +79,7 @@ export const ParticipantsTest = () => {
               key={item.id}
               name={`User ${item.id}`}
               disableSpeakingIndicator={items.length < 3}
+              hasFeed={true}
               {...rest}
             />
           )}

src/video-grid/VideoGrid.tsx

@@ -23,7 +23,7 @@ import { ReactDOMAttributes } from "@use-gesture/react/dist/declarations/src/typ
 
 import styles from "./VideoGrid.module.css";
 import { Layout } from "../room/GridLayoutMenu";
-import { Participant } from "../room/InCallView";
+import { TileDescriptor } from "../room/InCallView";
 
 interface TilePosition {
   x: number;
@@ -36,7 +36,7 @@ interface TilePosition {
 interface Tile {
   key: Key;
   order: number;
-  item: Participant;
+  item: TileDescriptor;
   remove: boolean;
   focused: boolean;
   presenter: boolean;
@@ -111,7 +111,8 @@ const getPipGap = (gridAspectRatio: number): number =>
 
 function getTilePositions(
   tileCount: number,
-  presenterTileCount: number,
+  focusedTileCount: number,
+  hasPresenter: boolean,
   gridWidth: number,
   gridHeight: number,
   pipXRatio: number,
@@ -119,7 +120,7 @@ function getTilePositions(
   layout: Layout
 ): TilePosition[] {
   if (layout === "freedom") {
-    if (tileCount === 2 && presenterTileCount === 0) {
+    if (tileCount === 2 && !hasPresenter && focusedTileCount === 0) {
       return getOneOnOneLayoutTilePositions(
         gridWidth,
         gridHeight,
@@ -130,7 +131,7 @@ function getTilePositions(
 
     return getFreedomLayoutTilePositions(
       tileCount,
-      presenterTileCount,
+      focusedTileCount,
       gridWidth,
       gridHeight
     );
@@ -247,7 +248,7 @@ function getSpotlightLayoutTilePositions(
 
 function getFreedomLayoutTilePositions(
   tileCount: number,
-  presenterTileCount: number,
+  focusedTileCount: number,
   gridWidth: number,
   gridHeight: number
 ): TilePosition[] {
@@ -261,7 +262,7 @@ function getFreedomLayoutTilePositions(
 
   const { layoutDirection, itemGridRatio } = getGridLayout(
     tileCount,
-    presenterTileCount,
+    focusedTileCount,
     gridWidth,
     gridHeight
   );
@@ -277,7 +278,7 @@ function getFreedomLayoutTilePositions(
     itemGridHeight = gridHeight;
   }
 
-  const itemTileCount = tileCount - presenterTileCount;
+  const itemTileCount = tileCount - focusedTileCount;
 
   const {
     columnCount: itemColumnCount,
@@ -295,65 +296,55 @@ function getFreedomLayoutTilePositions(
   );
   const itemGridBounds = getSubGridBoundingBox(itemGridPositions);
 
-  let presenterGridWidth;
-  let presenterGridHeight;
+  let focusedGridWidth: number;
+  let focusedGridHeight: number;
 
-  if (presenterTileCount === 0) {
-    presenterGridWidth = 0;
-    presenterGridHeight = 0;
+  if (focusedTileCount === 0) {
+    focusedGridWidth = 0;
+    focusedGridHeight = 0;
   } else if (layoutDirection === "vertical") {
-    presenterGridWidth = gridWidth;
-    presenterGridHeight =
+    focusedGridWidth = gridWidth;
+    focusedGridHeight =
       gridHeight - (itemGridBounds.height + (itemTileCount ? GAP * 2 : 0));
   } else {
-    presenterGridWidth =
+    focusedGridWidth =
       gridWidth - (itemGridBounds.width + (itemTileCount ? GAP * 2 : 0));
-    presenterGridHeight = gridHeight;
+    focusedGridHeight = gridHeight;
   }
 
   const {
-    columnCount: presenterColumnCount,
-    rowCount: presenterRowCount,
-    tileAspectRatio: presenterTileAspectRatio,
-  } = getSubGridLayout(
-    presenterTileCount,
-    presenterGridWidth,
-    presenterGridHeight
+    columnCount: focusedColumnCount,
+    rowCount: focusedRowCount,
+    tileAspectRatio: focusedTileAspectRatio,
+  } = getSubGridLayout(focusedTileCount, focusedGridWidth, focusedGridHeight);
+
+  const focusedGridPositions = getSubGridPositions(
+    focusedTileCount,
+    focusedColumnCount,
+    focusedRowCount,
+    focusedTileAspectRatio,
+    focusedGridWidth,
+    focusedGridHeight
   );
 
-  const presenterGridPositions = getSubGridPositions(
-    presenterTileCount,
-    presenterColumnCount,
-    presenterRowCount,
-    presenterTileAspectRatio,
-    presenterGridWidth,
-    presenterGridHeight
-  );
+  const tilePositions = [...focusedGridPositions, ...itemGridPositions];
 
-  const tilePositions = [...presenterGridPositions, ...itemGridPositions];
-
-  centerTiles(
-    presenterGridPositions,
-    presenterGridWidth,
-    presenterGridHeight,
-    0,
-    0
-  );
+  centerTiles(focusedGridPositions, focusedGridWidth, focusedGridHeight, 0, 0);
 
   if (layoutDirection === "vertical") {
     centerTiles(
       itemGridPositions,
       gridWidth,
-      gridHeight - presenterGridHeight,
+      gridHeight - focusedGridHeight,
       0,
-      presenterGridHeight
+      focusedGridHeight
     );
   } else {
     centerTiles(
       itemGridPositions,
-      gridWidth - presenterGridWidth,
+      gridWidth - focusedGridWidth,
       gridHeight,
-      presenterGridWidth,
+      focusedGridWidth,
       0
     );
   }
@@ -418,14 +409,14 @@ function isMobileBreakpoint(gridWidth: number, gridHeight: number): boolean {
 
 function getGridLayout(
   tileCount: number,
-  presenterTileCount: number,
+  focusedTileCount: number,
   gridWidth: number,
   gridHeight: number
 ): { itemGridRatio: number; layoutDirection: LayoutDirection } {
   let layoutDirection: LayoutDirection = "horizontal";
   let itemGridRatio = 1;
 
-  if (presenterTileCount === 0) {
+  if (focusedTileCount === 0) {
     return { itemGridRatio, layoutDirection };
   }
 
@@ -660,30 +651,35 @@ function getSubGridPositions(
   return newTilePositions;
 }
 
+// Sets the 'order' property on tiles based on the layout param and
+// other properties of the tiles, eg. 'focused' and 'presenter'
 function reorderTiles(tiles: Tile[], layout: Layout) {
-  if (layout === "freedom" && tiles.length === 2) {
+  // We use a special layout for 1:1 to always put the local tile first.
+  // We only do this if there are two tiles (obviously) and exactly one
+  // of them is local: during startup we can have tiles from other users
+  // but not our own, due to the order they're added, so without this we
+  // can assign multiple remote tiles order '1' and this persists through
+  // subsequent reorders because we preserve the order of the tiles.
+  if (
+    layout === "freedom" &&
+    tiles.length === 2 &&
+    tiles.filter((t) => t.item.isLocal).length === 1 &&
+    !tiles.some((t) => t.presenter || t.focused)
+  ) {
     // 1:1 layout
     tiles.forEach((tile) => (tile.order = tile.item.isLocal ? 0 : 1));
   } else {
     const focusedTiles: Tile[] = [];
-    const presenterTiles: Tile[] = [];
     const otherTiles: Tile[] = [];
 
     const orderedTiles: Tile[] = new Array(tiles.length);
     tiles.forEach((tile) => (orderedTiles[tile.order] = tile));
 
     orderedTiles.forEach((tile) =>
-      (tile.focused
-        ? focusedTiles
-        : tile.presenter
-        ? presenterTiles
-        : otherTiles
-      ).push(tile)
+      (tile.focused ? focusedTiles : otherTiles).push(tile)
     );
 
-    [...focusedTiles, ...presenterTiles, ...otherTiles].forEach(
-      (tile, i) => (tile.order = i)
-    );
+    [...focusedTiles, ...otherTiles].forEach((tile, i) => (tile.order = i));
   }
 }
 
@@ -704,12 +700,12 @@ interface ChildrenProperties extends ReactDOMAttributes {
   };
   width: number;
   height: number;
-  item: Participant;
+  item: TileDescriptor;
   [index: string]: unknown;
 }
 
 interface VideoGridProps {
-  items: Participant[];
+  items: TileDescriptor[];
   layout: Layout;
   disableAnimations?: boolean;
   children: (props: ChildrenProperties) => React.ReactNode;
@@ -757,11 +753,8 @@ export function VideoGrid({
         }
 
         let focused: boolean;
-        let presenter = false;
-
         if (layout === "spotlight") {
           focused = item.focused;
-          presenter = item.presenter;
         } else {
           focused = layout === lastLayoutRef.current ? tile.focused : false;
         }
@@ -772,7 +765,7 @@ export function VideoGrid({
           item,
           remove,
           focused,
-          presenter,
+          presenter: item.presenter,
         });
       }
 
@@ -793,7 +786,7 @@ export function VideoGrid({
           item,
           remove: false,
           focused: layout === "spotlight" && item.focused,
-          presenter: layout === "spotlight" && item.presenter,
+          presenter: item.presenter,
         };
 
         if (existingTile) {
@@ -819,7 +812,7 @@ export function VideoGrid({
               .map((tile) => ({ ...tile })); // clone before reordering
             reorderTiles(newTiles, layout);
 
-            const presenterTileCount = newTiles.reduce(
+            const focusedTileCount = newTiles.reduce(
               (count, tile) => count + (tile.focused ? 1 : 0),
               0
             );
@@ -829,7 +822,8 @@ export function VideoGrid({
               tiles: newTiles,
               tilePositions: getTilePositions(
                 newTiles.length,
-                presenterTileCount,
+                focusedTileCount,
+                newTiles.some((t) => t.presenter),
                 gridBounds.width,
                 gridBounds.height,
                 pipXRatio,
@@ -841,7 +835,7 @@ export function VideoGrid({
         }, 250);
       }
 
-      const presenterTileCount = newTiles.reduce(
+      const focusedTileCount = newTiles.reduce(
         (count, tile) => count + (tile.focused ? 1 : 0),
         0
       );
@@ -853,7 +847,8 @@ export function VideoGrid({
         tiles: newTiles,
         tilePositions: getTilePositions(
           newTiles.length,
-          presenterTileCount,
+          focusedTileCount,
+          newTiles.some((t) => t.presenter),
           gridBounds.width,
           gridBounds.height,
           pipXRatio,
@@ -904,12 +899,12 @@ export function VideoGrid({
         return {
           x:
             tilePosition.x +
-            (layout === "spotlight" && tileIndex !== 0 && isMobile
+            (layout === "spotlight" && tile.order !== 0 && isMobile
               ? scrollPosition
               : 0),
           y:
             tilePosition.y +
-            (layout === "spotlight" && tileIndex !== 0 && !isMobile
+            (layout === "spotlight" && tile.order !== 0 && !isMobile
               ? scrollPosition
               : 0),
           width: tilePosition.width,
@@ -957,7 +952,7 @@ export function VideoGrid({
       const item = tile.item;
 
       setTileState(({ tiles, ...state }) => {
-        let presenterTileCount = 0;
+        let focusedTileCount = 0;
         const newTiles = tiles.map((tile) => {
           const newTile = { ...tile }; // clone before reordering
 
@@ -965,7 +960,7 @@ export function VideoGrid({
             newTile.focused = !tile.focused;
           }
           if (newTile.focused) {
-            presenterTileCount++;
+            focusedTileCount++;
           }
 
           return newTile;
@@ -978,7 +973,8 @@ export function VideoGrid({
           tiles: newTiles,
           tilePositions: getTilePositions(
             newTiles.length,
-            presenterTileCount,
+            focusedTileCount,
+            newTiles.some((t) => t.presenter),
             gridBounds.width,
             gridBounds.height,
             pipXRatio,
@@ -1010,7 +1006,7 @@ export function VideoGrid({
 
       let newTiles = tiles;
 
-      if (tiles.length === 2) {
+      if (tiles.length === 2 && !tiles.some((t) => t.presenter || t.focused)) {
         // We're in 1:1 mode, so only the local tile should be draggable
         if (!dragTile.item.isLocal) return;
 

src/video-grid/VideoTile.module.css

@@ -40,9 +40,11 @@
   box-shadow: inset 0 0 0 4px var(--accent) !important;
 }
 
-.videoTile.fullscreen {
+.videoTile.maximised {
   position: relative;
   border-radius: 0;
+  height: 100%;
+  width: 100%;
 }
 
 .videoTile.screenshare > video {

src/video-grid/VideoTile.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React, { forwardRef } from "react";
 import { animated } from "@react-spring/web";
 import classNames from "classnames";
+import { useTranslation } from "react-i18next";
 
 import styles from "./VideoTile.module.css";
 import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
@@ -25,6 +26,7 @@ import { AudioButton, FullscreenButton } from "../button/Button";
 
 interface Props {
   name: string;
+  hasFeed: Boolean;
   speaking?: boolean;
   audioMuted?: boolean;
   videoMuted?: boolean;
@@ -33,7 +35,8 @@ interface Props {
   mediaRef?: React.RefObject<MediaElement>;
   onOptionsPress?: () => void;
   localVolume?: number;
-  isFullscreen?: boolean;
+  maximised?: boolean;
+  fullscreen?: boolean;
   onFullscreen?: () => void;
   className?: string;
   showOptions?: boolean;
@@ -45,6 +48,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
   (
     {
       name,
+      hasFeed,
       speaking,
       audioMuted,
       videoMuted,
@@ -53,7 +57,8 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
       mediaRef,
       onOptionsPress,
       localVolume,
-      isFullscreen,
+      maximised,
+      fullscreen,
       onFullscreen,
       className,
       showOptions,
@@ -64,6 +69,33 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
     },
     ref
   ) => {
+    const { t } = useTranslation();
+
+    const toolbarButtons: JSX.Element[] = [];
+    if (hasFeed && !isLocal) {
+      toolbarButtons.push(
+        <AudioButton
+          key="localVolume"
+          className={styles.button}
+          volume={localVolume}
+          onPress={onOptionsPress}
+        />
+      );
+
+      if (screenshare) {
+        toolbarButtons.push(
+          <FullscreenButton
+            key="fullscreen"
+            className={styles.button}
+            fullscreen={fullscreen}
+            onPress={onFullscreen}
+          />
+        );
+      }
+    }
+
+    const caption = hasFeed ? name : t("{{name}} (Connecting...)", { name });
+
     return (
       <animated.div
         className={classNames(styles.videoTile, className, {
@@ -71,28 +103,13 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
           [styles.speaking]: speaking,
           [styles.muted]: audioMuted,
           [styles.screenshare]: screenshare,
-          [styles.fullscreen]: isFullscreen,
+          [styles.maximised]: maximised,
         })}
         ref={ref}
         {...rest}
       >
-        {(!isLocal || screenshare) && (
-          <div className={classNames(styles.toolbar)}>
-            {!isLocal && (
-              <AudioButton
-                className={styles.button}
-                volume={localVolume}
-                onPress={onOptionsPress}
-              />
-            )}
-            {screenshare && (
-              <FullscreenButton
-                className={styles.button}
-                fullscreen={isFullscreen}
-                onPress={onFullscreen}
-              />
-            )}
-          </div>
+        {toolbarButtons.length > 0 && !maximised && (
+          <div className={classNames(styles.toolbar)}>{toolbarButtons}</div>
         )}
         {videoMuted && (
           <>
@@ -100,17 +117,18 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
             {avatar}
           </>
         )}
-        {screenshare ? (
-          <div className={styles.presenterLabel}>
-            <span>{`${name} is presenting`}</span>
-          </div>
-        ) : (
-          <div className={classNames(styles.infoBubble, styles.memberName)}>
-            {audioMuted && !videoMuted && <MicMutedIcon />}
-            {videoMuted && <VideoMutedIcon />}
-            <span title={name}>{name}</span>
-          </div>
-        )}
+        {!maximised &&
+          (screenshare ? (
+            <div className={styles.presenterLabel}>
+              <span>{t("{{name}} is presenting", { name })}</span>
+            </div>
+          ) : (
+            <div className={classNames(styles.infoBubble, styles.memberName)}>
+              {audioMuted && !videoMuted && <MicMutedIcon />}
+              {videoMuted && <VideoMutedIcon />}
+              <span title={caption}>{caption}</span>
+            </div>
+          ))}
         <video ref={mediaRef} playsInline disablePictureInPicture />
       </animated.div>
     );

src/video-grid/VideoTileContainer.tsx

@@ -25,10 +25,10 @@ import { useRoomMemberName } from "./useRoomMemberName";
 import { VideoTile } from "./VideoTile";
 import { VideoTileSettingsModal } from "./VideoTileSettingsModal";
 import { useModalTriggerState } from "../Modal";
-import { Participant } from "../room/InCallView";
+import { TileDescriptor } from "../room/InCallView";
 
 interface Props {
-  item: Participant;
+  item: TileDescriptor;
   width?: number;
   height?: number;
   getAvatar: (
@@ -39,9 +39,11 @@ interface Props {
   audioContext: AudioContext;
   audioDestination: AudioNode;
   disableSpeakingIndicator: boolean;
-  isFullscreen: boolean;
-  onFullscreen: (item: Participant) => void;
+  maximised: boolean;
+  fullscreen: boolean;
+  onFullscreen: (item: TileDescriptor) => void;
 }
+
 export function VideoTileContainer({
   item,
   width,
@@ -50,7 +52,8 @@ export function VideoTileContainer({
   audioContext,
   audioDestination,
   disableSpeakingIndicator,
-  isFullscreen,
+  maximised,
+  fullscreen,
   onFullscreen,
   ...rest
 }: Props) {
@@ -62,11 +65,10 @@ export function VideoTileContainer({
     speaking,
     stream,
     purpose,
-    member,
   } = useCallFeed(item.callFeed);
-  const { rawDisplayName } = useRoomMemberName(member);
+  const { rawDisplayName } = useRoomMemberName(item.member);
   const [tileRef, mediaRef] = useSpatialMediaStream(
-    stream,
+    stream ?? null,
     audioContext,
     audioDestination,
     isLocal,
@@ -96,16 +98,18 @@ export function VideoTileContainer({
         videoMuted={videoMuted}
         screenshare={purpose === SDPStreamMetadataPurpose.Screenshare}
         name={rawDisplayName}
+        hasFeed={Boolean(item.callFeed)}
         ref={tileRef}
         mediaRef={mediaRef}
-        avatar={getAvatar && getAvatar(member, width, height)}
+        avatar={getAvatar && getAvatar(item.member, width, height)}
         onOptionsPress={onOptionsPress}
         localVolume={localVolume}
-        isFullscreen={isFullscreen}
+        maximised={maximised}
+        fullscreen={fullscreen}
         onFullscreen={onFullscreenCallback}
         {...rest}
       />
-      {videoTileSettingsModalState.isOpen && (
+      {videoTileSettingsModalState.isOpen && !maximised && item.callFeed && (
         <VideoTileSettingsModal
           {...videoTileSettingsModalProps}
           feed={item.callFeed}

src/video-grid/VideoTileSettingsModal.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React, { ChangeEvent, useState } from "react";
 import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+import { useTranslation } from "react-i18next";
 
 import { FieldRow } from "../input/Input";
 import { Modal } from "../Modal";
@@ -61,10 +62,12 @@ interface Props {
 }
 
 export const VideoTileSettingsModal = ({ feed, ...rest }: Props) => {
+  const { t } = useTranslation();
+
   return (
     <Modal
       className={styles.videoTileSettingsModal}
-      title="Local volume"
+      title={t("Local volume")}
       isDismissable
       mobileFullScreen
       {...rest}

src/video-grid/useAudioOutputDevice.ts

@@ -18,7 +18,7 @@ import { RefObject, useEffect } from "react";
 
 export function useAudioOutputDevice(
   mediaRef: RefObject<MediaElement>,
-  audioOutputDevice: string
+  audioOutputDevice: string | undefined
 ): void {
   useEffect(() => {
     if (

src/video-grid/useCallFeed.ts

@@ -16,23 +16,23 @@ limitations under the License.
 
 import { useState, useEffect } from "react";
 import { CallFeed, CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed";
-import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
 
 interface CallFeedState {
-  member: RoomMember;
+  callFeed: CallFeed | undefined;
   isLocal: boolean;
   speaking: boolean;
   videoMuted: boolean;
   audioMuted: boolean;
   localVolume: number;
-  disposed: boolean;
-  stream: MediaStream;
-  purpose: SDPStreamMetadataPurpose;
+  disposed: boolean | undefined;
+  stream: MediaStream | undefined;
+  purpose: SDPStreamMetadataPurpose | undefined;
 }
-function getCallFeedState(callFeed: CallFeed): CallFeedState {
+
+function getCallFeedState(callFeed: CallFeed | undefined): CallFeedState {
   return {
-    member: callFeed ? callFeed.getMember() : null,
+    callFeed,
     isLocal: callFeed ? callFeed.isLocal() : false,
     speaking: callFeed ? callFeed.isSpeaking() : false,
     videoMuted: callFeed ? callFeed.isVideoMuted() : true,
@@ -44,7 +44,7 @@ function getCallFeedState(callFeed: CallFeed): CallFeedState {
   };
 }
 
-export function useCallFeed(callFeed: CallFeed): CallFeedState {
+export function useCallFeed(callFeed: CallFeed | undefined): CallFeedState {
   const [state, setState] = useState<CallFeedState>(() =>
     getCallFeedState(callFeed)
   );

src/video-grid/useFullscreen.tsx

@@ -17,27 +17,27 @@ limitations under the License.
 
 import { useCallback, useEffect, useState } from "react";
 
-import { Participant } from "../room/InCallView";
+import { TileDescriptor } from "../room/InCallView";
 import { useEventTarget } from "../useEvents";
 import { useCallFeed } from "./useCallFeed";
 
 export function useFullscreen(ref: React.RefObject<HTMLElement>): {
-  toggleFullscreen: (participant: Participant) => void;
-  fullscreenParticipant: Participant | null;
+  toggleFullscreen: (participant: TileDescriptor) => void;
+  fullscreenParticipant: TileDescriptor | null;
 } {
   const [fullscreenParticipant, setFullscreenParticipant] =
-    useState<Participant | null>(null);
+    useState<TileDescriptor | null>(null);
   const { disposed } = useCallFeed(fullscreenParticipant?.callFeed);
 
   const toggleFullscreen = useCallback(
-    (participant: Participant) => {
+    (tileDes: TileDescriptor) => {
       if (fullscreenParticipant) {
         document.exitFullscreen();
         setFullscreenParticipant(null);
       } else {
         try {
           ref.current.requestFullscreen();
-          setFullscreenParticipant(participant);
+          setFullscreenParticipant(tileDes);
         } catch (error) {
           console.warn("Failed to fullscreen:", error);
         }

src/video-grid/useMediaStream.ts

@@ -33,29 +33,39 @@ declare global {
 }
 
 export const useMediaStreamTrackCount = (
-  stream: MediaStream
+  stream: MediaStream | null
 ): [number, number] => {
+  const latestAudioTrackCount = stream ? stream.getAudioTracks().length : 0;
+  const latestVideoTrackCount = stream ? stream.getVideoTracks().length : 0;
+
   const [audioTrackCount, setAudioTrackCount] = useState(
-    stream.getAudioTracks().length
+    stream ? stream.getAudioTracks().length : 0
   );
   const [videoTrackCount, setVideoTrackCount] = useState(
-    stream.getVideoTracks().length
+    stream ? stream.getVideoTracks().length : 0
   );
 
   const tracksChanged = useCallback(() => {
-    setAudioTrackCount(stream.getAudioTracks().length);
-    setVideoTrackCount(stream.getVideoTracks().length);
+    setAudioTrackCount(stream ? stream.getAudioTracks().length : 0);
+    setVideoTrackCount(stream ? stream.getVideoTracks().length : 0);
   }, [stream]);
 
   useEventTarget(stream, "addtrack", tracksChanged);
   useEventTarget(stream, "removetrack", tracksChanged);
 
+  if (
+    latestAudioTrackCount !== audioTrackCount ||
+    latestVideoTrackCount !== videoTrackCount
+  ) {
+    tracksChanged();
+  }
+
   return [audioTrackCount, videoTrackCount];
 };
 
 export const useMediaStream = (
-  stream: MediaStream,
-  audioOutputDevice: string,
+  stream: MediaStream | null,
+  audioOutputDevice: string | null,
   mute = false,
   localVolume?: number
 ): RefObject<MediaElement> => {
@@ -76,7 +86,9 @@ export const useMediaStream = (
       if (stream) {
         mediaEl.muted = mute;
         mediaEl.srcObject = stream;
-        mediaEl.play();
+        mediaEl.play().catch((e) => {
+          if (e.name !== "AbortError") throw e;
+        });
 
         // Unmuting the tab in Safari causes all video elements to be individually
         // unmuted, so we need to reset the mute state here to prevent audio loops
@@ -146,7 +158,7 @@ const createLoopback = async (stream: MediaStream): Promise<MediaStream> => {
   await loopbackConn.setRemoteDescription(offer);
   const answer = await loopbackConn.createAnswer();
   // Rewrite SDP to be stereo and (variable) max bitrate
-  const parsedSdp = parseSdp(answer.sdp);
+  const parsedSdp = parseSdp(answer.sdp!);
   parsedSdp.media.forEach((m) =>
     m.fmtp.forEach(
       (f) => (f.config += `;stereo=1;cbr=0;maxaveragebitrate=510000;`)
@@ -194,11 +206,11 @@ export const useAudioContext = (): [
     }
   }, []);
 
-  return [context.current, destination.current, audioRef];
+  return [context.current!, destination.current!, audioRef];
 };
 
 export const useSpatialMediaStream = (
-  stream: MediaStream,
+  stream: MediaStream | null,
   audioContext: AudioContext,
   audioDestination: AudioNode,
   mute = false,
@@ -207,7 +219,7 @@ export const useSpatialMediaStream = (
   const tileRef = useRef<HTMLDivElement>();
   const [spatialAudio] = useSpatialAudio();
   // We always handle audio separately form the video element
-  const mediaRef = useMediaStream(stream, undefined, true, undefined);
+  const mediaRef = useMediaStream(stream, null, true);
   const [audioTrackCount] = useMediaStreamTrackCount(stream);
 
   const gainNodeRef = useRef<GainNode>();
@@ -228,7 +240,7 @@ export const useSpatialMediaStream = (
         });
       }
       if (!sourceRef.current) {
-        sourceRef.current = audioContext.createMediaStreamSource(stream);
+        sourceRef.current = audioContext.createMediaStreamSource(stream!);
       }
 
       const tile = tileRef.current;
@@ -240,12 +252,12 @@ export const useSpatialMediaStream = (
         const bounds = tile.getBoundingClientRect();
         const windowSize = Math.max(window.innerWidth, window.innerHeight);
         // Position the source relative to its placement in the window
-        pannerNodeRef.current.positionX.value =
+        pannerNodeRef.current!.positionX.value =
           (bounds.x + bounds.width / 2) / windowSize - 0.5;
-        pannerNodeRef.current.positionY.value =
+        pannerNodeRef.current!.positionY.value =
           (bounds.y + bounds.height / 2) / windowSize - 0.5;
         // Put the source in front of the listener
-        pannerNodeRef.current.positionZ.value = -2;
+        pannerNodeRef.current!.positionZ.value = -2;
       };
 
       gainNode.gain.value = localVolume;