Lint the test files

Merge pull request #1476 from vector-im/renovate/eslint-config-prettier-8.x-lockfile
Update dependency eslint-config-prettier to v8.10.0
2026-08-20 20:49:20 +00:00 · 2023-09-18 17:58:49 +01:00 · 2023-09-18 12:08:29 -04:00 · 2023-09-18 12:07:17 -04:00 · 2023-09-18 16:04:40 +00:00 · 2023-09-18 16:04:22 +00:00
90 changed files with 3090 additions and 3541 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -24,7 +24,7 @@ module.exports = {
  },
  overrides: [
    {
-      files: ["src/**/*.{ts,tsx}"],
+      files: ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}"],
      extends: [
        "plugin:matrix-org/typescript",
        "plugin:matrix-org/react",
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -26,7 +26,7 @@ jobs:
        uses: actions/checkout@v2

      - name: Log in to container registry
-        uses: docker/login-action@cf8514a65188af1d4f94f8c28a7a4153af1088ce
+        uses: docker/login-action@b4bedf8053341df3b5a9f9e0f2cf4e79e27360c6
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
@@ -54,7 +54,7 @@ jobs:
          tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist

      - name: Upload
-        uses: actions/upload-artifact@65d862660abb392b8c4a3d1195a2108db131dd05
+        uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32
        env:
          GITHUB_TOKEN: ${{ github.token }}
        with:
@@ -62,7 +62,7 @@ jobs:

      - name: Extract metadata (tags, labels) for Docker
        id: meta
-        uses: docker/metadata-action@0f8c876bafbf5dbce05c36682ec68e9a0274a48a
+        uses: docker/metadata-action@879dcbb708d40f8b8679d4f7941b938a086e23a7
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
          tags: |
@@ -72,10 +72,10 @@ jobs:
            type=raw,value=latest-ci_${{steps.current-time.outputs.unix_time}},enable={{is_default_branch}}

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@885d1462b80bc1c1c7f0b00334ad271f09369c55
+        uses: docker/setup-buildx-action@dedd61cf5d839122591f5027c89bf3ad27691d18

      - name: Build and push Docker image
-        uses: docker/build-push-action@9311bf5263ae5b36f3ec67aff768790c6e2344ad
+        uses: docker/build-push-action@4c1b68d83ad20cc1a09620ca477d5bbbb5fa14d0
        with:
          context: .
          platforms: linux/amd64,linux/arm64
--- a/config/nginx.conf
+++ b/config/nginx.conf
@@ -21,5 +21,9 @@ server {
        expires 1w;
        add_header Cache-Control "public, no-transform";
    }
+
+    location /apple-app-site-association {
+        default_type application/json;
+    }
 }

--- a/package.json
+++ b/package.json
@@ -29,8 +29,9 @@
    "@opentelemetry/instrumentation-document-load": "^0.33.0",
    "@opentelemetry/instrumentation-user-interaction": "^0.33.0",
    "@opentelemetry/sdk-trace-web": "^1.9.1",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-visually-hidden": "^1.0.3",
    "@react-aria/button": "^3.3.4",
-    "@react-aria/dialog": "^3.1.4",
    "@react-aria/focus": "^3.5.0",
    "@react-aria/menu": "^3.3.0",
    "@react-aria/overlays": "^3.7.3",
@@ -40,7 +41,6 @@
    "@react-aria/utils": "^3.10.0",
    "@react-spring/web": "^9.4.4",
    "@react-stately/collections": "^3.3.4",
-    "@react-stately/overlays": "^3.1.3",
    "@react-stately/select": "^3.1.3",
    "@react-stately/tooltip": "^3.0.5",
    "@react-stately/tree": "^3.2.0",
@@ -52,14 +52,13 @@
    "@vitejs/plugin-basic-ssl": "^1.0.1",
    "@vitejs/plugin-react": "^4.0.1",
    "classnames": "^2.3.1",
-    "color-hash": "^2.0.1",
    "events": "^3.3.0",
    "i18next": "^21.10.0",
    "i18next-browser-languagedetector": "^6.1.8",
    "i18next-http-backend": "^1.4.4",
    "livekit-client": "^1.12.3",
    "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#b698217445318f453e0b1086364a33113eaa85d9",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#6836720e1e1c2cb01d49d6e5fcfc01afc14834ca",
    "matrix-widget-api": "^1.3.1",
    "mermaid": "^9.0.0",
    "normalize.css": "^8.0.1",
@@ -77,11 +76,13 @@
    "sdp-transform": "^2.14.1",
    "tinyqueue": "^2.0.3",
    "unique-names-generator": "^4.6.0",
-    "uuid": "9"
+    "uuid": "9",
+    "vaul": "^0.6.1"
  },
  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@react-spring/rafz": "^9.7.3",
+    "@react-types/dialog": "^3.5.5",
    "@sentry/vite-plugin": "^0.3.0",
    "@storybook/react": "^6.5.0-alpha.5",
    "@testing-library/jest-dom": "^5.16.5",
--- a/public/.well-known/assetlinks.json
+++ b/public/.well-known/assetlinks.json
@@ -0,0 +1,12 @@
+[
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "io.element.android.x.debug",
+      "sha256_cert_fingerprints": [
+        "B0:B0:51:DC:56:5C:81:2F:E1:7F:6F:3E:94:5B:4D:79:04:71:23:AB:0D:A6:12:86:76:9E:B2:94:91:97:13:0E"
+      ]
+    }
+  }
+]
--- a/public/apple-app-site-association
+++ b/public/apple-app-site-association
@@ -0,0 +1,15 @@
+{
+  "applinks": {
+    "apps": [],
+    "details": [
+      {
+        "appIDs": [
+          "7J4U792NQT.io.element.elementx",
+          "7J4U792NQT.io.element.elementx.nightly",
+          "7J4U792NQT.io.element.elementx.pr"
+        ],
+        "paths": ["*"]
+      }
+    ]
+  }
+}
--- a/public/locales/bg/app.json
+++ b/public/locales/bg/app.json
@@ -8,7 +8,6 @@
  "Call link copied": "Връзка към разговора бе копирана",
  "Call type menu": "Меню \"тип на разговора\"",
  "Camera": "Камера",
-  "Change layout": "Промени изгледа",
  "Close": "Затвори",
  "Confirm password": "Потвърди паролата",
  "Copied!": "Копирано!",
@@ -16,27 +15,18 @@
  "Create account": "Създай акаунт",
  "Debug log": "Debug логове",
  "Debug log request": "Заявка за debug логове",
-  "Details": "Детайли",
  "Developer": "Разработчик",
  "Display name": "Име/псевдоним",
  "Download debug logs": "Изтеглете debug логове",
  "Exit full screen": "Излез от цял екран",
-  "Fetching group call timed out.": "Изтече времето за взимане на груповия разговор.",
-  "Freedom": "Свобода",
  "Full screen": "Цял екран",
  "Go": "Напред",
-  "Grid layout menu": "Меню \"решетков изглед\"",
  "Home": "Начало",
  "Include debug logs": "Включи debug логове",
-  "Incompatible versions": "Несъвместими версии",
-  "Incompatible versions!": "Несъвместими версии!",
  "Inspector": "Инспектор",
-  "Invite": "Покани",
-  "Invite people": "Покани хора",
  "Join call": "Влез в разговора",
  "Join call now": "Влез в разговора сега",
  "Join existing call?": "Присъединяване към съществуващ разговор?",
-  "Leave": "Напусни",
  "Loading…": "Зареждане…",
  "Local volume": "Локална сила на звука",
  "Logging in…": "Влизане…",
@@ -44,11 +34,9 @@
  "Login to your account": "Влезте в акаунта си",
  "Microphone": "Микрофон",
  "More": "Още",
-  "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": "Паролите не съвпадат",
  "Profile": "Профил",
@@ -68,13 +56,9 @@
  "Sign out": "Излез",
  "Speaker": "Говорител",
  "Spotlight": "Прожектор",
-  "Stop sharing screen": "Спри споделянето на екрана",
  "Submit feedback": "Изпрати обратна връзка",
  "Take me Home": "Отиди в Начало",
  "This call already exists, would you like to join?": "Този разговор вече съществува, искате ли да се присъедините?",
-  "Turn off camera": "Изключи камерата",
-  "Turn on camera": "Включи камерата",
-  "Unmute microphone": "Включи микрофона",
  "User menu": "Потребителско меню",
  "Username": "Потребителско име",
  "Version: {{version}}": "Версия: {{version}}",
@@ -84,8 +68,6 @@
  "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": "Да, присъедини се",
-  "Your recent calls": "Скорошните ви разговори",
-  "{{names}}, {{name}}": "{{names}}, {{name}}"
+  "Your recent calls": "Скорошните ви разговори"
 }
--- a/public/locales/cs/app.json
+++ b/public/locales/cs/app.json
@@ -3,7 +3,6 @@
  "Copied!": "Zkopírováno!",
  "Confirm password": "Potvrdit heslo",
  "Close": "Zavřít",
-  "Change layout": "Změnit rozložení",
  "Camera": "Kamera",
  "Call link copied": "Odkaz na hovor zkopírován",
  "Avatar": "Avatar",
@@ -11,7 +10,6 @@
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Vytvořit účet</0> Or <2>Jako host</2>",
  "Your recent calls": "Vaše nedávné hovory",
  "Yes, join call": "Ano, připojit se",
-  "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…",
  "Video call name": "Jméno videohovoru",
  "Video call": "Videohovor",
@@ -19,13 +17,9 @@
  "Version: {{version}}": "Verze: {{version}}",
  "Username": "Uživatelské jméno",
  "User menu": "Uživatelské menu",
-  "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?",
  "Take me Home": "Domovská obrazovka",
  "Submit feedback": "Dát feedback",
-  "Stop sharing screen": "Zastavit sdílení obrazovek",
  "Speaker": "Reproduktor",
  "Sign out": "Odhlásit se",
  "Sign in": "Přihlásit se",
@@ -45,7 +39,6 @@
  "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": "Mikrofon",
  "Login to your account": "Přihlásit se ke svému účtu",
@@ -53,36 +46,25 @@
  "Logging in…": "Přihlašování se…",
  "Local volume": "Lokální hlasitost",
  "Loading…": "Načítání…",
-  "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",
  "Walkie-talkie call name": "Jméno vysílačkového hovoru",
  "Walkie-talkie call": "Vysílačkový hovor",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "Spotlight": "Soustředěný mód",
  "Recaptcha not loaded": "Recaptcha se nenačetla",
  "Recaptcha dismissed": "Recaptcha byla zamítnuta",
-  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Ostatní uživatelé se pokoušejí připojit k tomuto hovoru s nekompatibilních verzí. Tito uživatelé by se měli ujistit, že stránku načetli znovu:<1>{userLis}</1>",
  "Not registered yet? <2>Create an account</2>": "Nejste registrovaní? <2>Vytvořit účet</2>",
  "Join existing call?": "Připojit se k existujícimu hovoru?",
  "Include debug logs": "Zahrnout ladící záznamy",
  "Home": "Domov",
-  "Grid layout menu": "Menu rozložení",
  "Go": "Pokračovat",
  "Full screen": "Zvětšit na celou obrazovku",
-  "Freedom": "Volný",
-  "Fetching group call timed out.": "Vypršel časový limit načítání skupinového hovoru.",
  "Exit full screen": "Ukončit režim celé obrazovky",
  "Element Call Home": "Domov Element Call",
  "Download debug logs": "Stáhnout ladící záznamy",
  "Display name": "Zobrazované jméno",
  "Developer": "Vývojář",
-  "Details": "Detaily",
  "Debug log request": "Žádost o protokoly ladění",
  "Debug log": "Protokoly ladění",
  "Create account": "Vytvořit účet",
--- a/public/locales/de/app.json
+++ b/public/locales/de/app.json
@@ -8,7 +8,6 @@
  "Call link copied": "Anruflink kopiert",
  "Call type menu": "Anruftyp Menü",
  "Camera": "Kamera",
-  "Change layout": "Layout ändern",
  "Close": "Schließen",
  "Confirm password": "Passwort bestätigen",
  "Copied!": "Kopiert!",
@@ -16,26 +15,18 @@
  "Create account": "Konto erstellen",
  "Debug log": "Debug-Protokoll",
  "Debug log request": "Debug-Log Anfrage",
-  "Details": "Details",
  "Developer": "Entwickler",
  "Display name": "Anzeigename",
  "Download debug logs": "Debug-Protokolle herunterladen",
  "Exit full screen": "Vollbildmodus verlassen",
-  "Freedom": "Freiraum",
  "Full screen": "Vollbild",
  "Go": "Los geht’s",
-  "Grid layout menu": "Grid-Layout-Menü",
  "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…": "Lade …",
  "Local volume": "Lokale Lautstärke",
  "Logging in…": "Anmelden …",
@@ -43,11 +34,9 @@
  "Login to your account": "Melde dich mit deinem Konto an",
  "Microphone": "Mikrofon",
  "More": "Mehr",
-  "Mute microphone": "Mikrofon stummschalten",
  "No": "Nein",
-  "Not now, return to home screen": "Nicht jetzt, zurück zum Startbildschirm",
+  "Not now, return to home screen": "Nicht jetzt, zurück zur Startseite",
  "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",
  "Profile": "Profil",
@@ -56,7 +45,7 @@
  "Register": "Registrieren",
  "Registering…": "Registrierung …",
  "Remove": "Entfernen",
-  "Return to home screen": "Zurück zum Startbildschirm",
+  "Return to home screen": "Zurück zur Startseite",
  "Select an option": "Wähle eine Option",
  "Send debug logs": "Debug-Logs senden",
  "Sending…": "Senden …",
@@ -67,13 +56,9 @@
  "Sign out": "Abmelden",
  "Speaker": "Wiedergabegerät",
  "Spotlight": "Rampenlicht",
-  "Stop sharing screen": "Beenden der Bildschirmfreigabe",
  "Submit feedback": "Rückmeldung geben",
  "Take me Home": "Zurück zur Startseite",
  "This call already exists, would you like to join?": "Dieser Aufruf existiert bereits, möchtest Du teilnehmen?",
-  "Turn off camera": "Kamera ausschalten",
-  "Turn on camera": "Kamera einschalten",
-  "Unmute microphone": "Mikrofon aktivieren",
  "User menu": "Benutzermenü",
  "Username": "Benutzername",
  "Version: {{version}}": "Version: {{version}}",
@@ -82,14 +67,11 @@
  "Video call name": "Name des Videoanrufs",
  "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",
  "Your recent calls": "Deine letzten Anrufe",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
-  "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>",
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Anruf beitreten</0><1>Oder</1><2>Link kopieren und später beitreten</2>",
  "Copy": "Kopieren",
  "Element Call Home": "Element Call-Startseite",
  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Übermittelte Problemberichte helfen uns, Fehler zu beheben.</0>",
@@ -117,11 +99,25 @@
  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Diese Seite wird durch reCAPTCHA geschützt und es gelten Googles <2>Datenschutzerklärung</2> und <6>Nutzungsbedingungen</6>. <9></9>Mit einem Klick auf „Registrieren“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call ist temporär nicht Ende-zu-Ende-verschlüsselt, während wir die Skalierbarkeit testen.",
  "Connectivity to the server has been lost.": "Die Verbindung zum Server wurde getrennt.",
-  "Enable end-to-end encryption (password protected calls)": "Ende-zu-Ende-Verschlüsselung aktivieren (Passwort geschützte Anrufe)",
-  "Password (if none, E2EE is disabled)": "Passwort (falls leer, wird E2EE deaktiviert)",
+  "Enable end-to-end encryption (password protected calls)": "Ende-zu-Ende-Verschlüsselung aktivieren (Passwortgeschützte Anrufe)",
  "End-to-end encryption isn't supported on your browser.": "Ende-zu-Ende-Verschlüsselung wird in deinem Browser nicht unterstützt.",
  "Thanks!": "Danke!",
  "You were disconnected from the call": "Deine Verbindung wurde getrennt",
  "Reconnect": "Erneut verbinden",
-  "Retry sending logs": "Protokolle erneut senden"
+  "Retry sending logs": "Protokolle erneut senden",
+  "Encrypted": "Verschlüsselt",
+  "End call": "Anruf beenden",
+  "Grid": "Raster",
+  "Not encrypted": "Nicht verschlüsselt",
+  "Microphone off": "Mikrofon aus",
+  "Microphone on": "Mikrofon an",
+  "{{count, number}}|one": "{{count, number}}",
+  "{{count, number}}|other": "{{count, number}}",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
+  "Share": "Teilen",
+  "Share this call": "Diesen Anruf teilen",
+  "Video off": "Video aus",
+  "Video on": "Video an",
+  "Sharing screen": "Bildschirm wird geteilt",
+  "You": "Du"
 }
--- a/public/locales/el/app.json
+++ b/public/locales/el/app.json
@@ -2,7 +2,6 @@
  "Version: {{version}}": "Έκδοση: {{version}}",
  "User menu": "Μενού χρήστη",
  "Submit feedback": "Υποβάλετε σχόλια",
-  "Stop sharing screen": "Διακοπή κοινής χρήσης οθόνης",
  "Sign in": "Σύνδεση",
  "Show call inspector": "Εμφάνιση του επιθεωρητή κλήσης",
  "Share screen": "Κοινή χρήση οθόνης",
@@ -13,11 +12,7 @@
  "Not registered yet? <2>Create an account</2>": "Δεν έχετε εγγραφεί ακόμα; <2>Δημιουργήστε λογαριασμό</2>",
  "Login to your account": "Συνδεθείτε στον λογαριασμό σας",
  "Logging in…": "Σύνδεση…",
-  "Invite people": "Προσκαλέστε άτομα",
-  "Invite": "Πρόσκληση",
  "Inspector": "Επιθεωρητής",
-  "Incompatible versions!": "Μη συμβατές εκδόσεις!",
-  "Incompatible versions": "Μη συμβατές εκδόσεις",
  "Display name": "Εμφανιζόμενο όνομα",
  "Developer Settings": "Ρυθμίσεις προγραμματιστή",
  "Debug log request": "Αίτημα αρχείου καταγραφής",
@@ -26,10 +21,8 @@
  "<0>Oops, something's gone wrong.</0>": "<0>Ωχ, κάτι πήγε στραβά.</0>",
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Δημιουργήστε λογαριασμό</0> Ή <2>Συμμετέχετε ως επισκέπτης</2>",
  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Έχετε ήδη λογαριασμό;</0><1><0>Συνδεθείτε</0> Ή <2>Συμμετέχετε ως επισκέπτης</2></1>",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "Your recent calls": "Οι πρόσφατες κλήσεις σας",
  "Yes, join call": "Ναι, συμμετοχή στην κλήση",
-  "WebRTC is not supported or is being blocked in this browser.": "Το WebRTC δεν υποστηρίζεται ή έχει αποκλειστεί σε αυτό το πρόγραμμα περιήγησης.",
  "Walkie-talkie call name": "Όνομα κλήσης walkie-talkie",
  "Walkie-talkie call": "Κλήση walkie-talkie",
  "Waiting for other participants…": "Αναμονή για άλλους συμμετέχοντες…",
@@ -37,8 +30,6 @@
  "Video call": "Βίντεο κλήση",
  "Video": "Βίντεο",
  "Username": "Όνομα χρήστη",
-  "Turn on camera": "Ενεργοποιήστε την κάμερα",
-  "Turn off camera": "Απενεργοποιήστε την κάμερα",
  "This call already exists, would you like to join?": "Αυτή η κλήση υπάρχει ήδη, θα θέλατε να συμμετάσχετε;",
  "Speaker": "Ηχείο",
  "Sign out": "Αποσύνδεση",
@@ -50,26 +41,22 @@
  "Password": "Κωδικός",
  "Not now, return to home screen": "Όχι τώρα, επιστροφή στην αρχική οθόνη",
  "No": "Όχι",
-  "Mute microphone": "Σίγαση μικροφώνου",
  "More": "Περισσότερα",
  "Microphone": "Μικρόφωνο",
  "Login": "Σύνδεση",
  "Loading…": "Φόρτωση…",
-  "Leave": "Αποχώρηση",
  "Join existing call?": "Συμμετοχή στην υπάρχουσα κλήση;",
  "Join call now": "Συμμετοχή στην κλήση τώρα",
  "Join call": "Συμμετοχή στην κλήση",
  "Go": "Μετάβαση",
  "Full screen": "Πλήρη οθόνη",
  "Exit full screen": "Έξοδος από πλήρη οθόνη",
-  "Details": "Λεπτομέρειες",
  "Create account": "Δημιουργία λογαριασμού",
  "Copy and share this call link": "Αντιγράψτε και μοιραστείτε αυτόν τον σύνδεσμο κλήσης",
  "Copy": "Αντιγραφή",
  "Copied!": "Αντιγράφηκε!",
  "Confirm password": "Επιβεβαίωση κωδικού",
  "Close": "Κλείσιμο",
-  "Change layout": "Αλλαγή διάταξης",
  "Camera": "Κάμερα",
  "Audio": "Ήχος",
  "Send debug logs": "Αποστολή αρχείων καταγραφής",
@@ -79,7 +66,6 @@
  "Local volume": "Τοπική ένταση",
  "Home": "Αρχική",
  "Show connection stats": "Εμφάνιση στατιστικών σύνδεσης",
-  "Unmute microphone": "Κατάργηση σίγασης μικροφώνου",
  "Take me Home": "Μετάβαση στην Αρχική",
  "{{displayName}} is presenting": "{{displayName}} παρουσιάζει",
  "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": "<0></0><1></1>Μπορείτε να ανακαλέσετε τη συγκατάθεσή σας αποεπιλέγοντας αυτό το πλαίσιο. Εάν βρίσκεστε σε κλήση, η ρύθμιση αυτή θα τεθεί σε ισχύ στο τέλος της.",
@@ -88,9 +74,7 @@
  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Γιατί να μην ολοκληρώσετε με τη δημιουργία ενός κωδικού πρόσβασης για τη διατήρηση του λογαριασμού σας;</0><1>Θα μπορείτε να διατηρήσετε το όνομά σας και να ορίσετε ένα avatar για χρήση σε μελλοντικές κλήσεις.</1>",
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ένας άλλος χρήστης σε αυτή την κλήση έχει ένα πρόβλημα. Για την καλύτερη διάγνωση αυτών των προβλημάτων θα θέλαμε να συλλέξουμε ένα αρχείο καταγραφής σφαλμάτων.",
  "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "Συμμετέχοντας σε αυτή τη δοκιμαστική έκδοση, συναινείτε στη συλλογή ανώνυμων δεδομένων, τα οποία χρησιμοποιούμε για τη βελτίωση του προϊόντος. Μπορείτε να βρείτε περισσότερες πληροφορίες σχετικά με το ποια δεδομένα καταγράφουμε στην <2>Πολιτική απορρήτου</2> και στην <5>Πολιτική cookies</5>.",
-  "Grid layout menu": "Μενού διάταξης πλέγματος",
  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Εάν αντιμετωπίζετε προβλήματα ή απλά θέλετε να μας δώσετε κάποια σχόλια, παρακαλούμε στείλτε μας μια σύντομη περιγραφή παρακάτω.",
-  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Κάποιοι άλλοι χρήστες προσπαθούν να συμμετάσχουν σε αυτή την κλήση από ασύμβατες εκδόσεις. Αυτοί οι χρήστες θα πρέπει να βεβαιωθούν ότι έχουν κάνει ανανέωση (refresh) την καρτέλα του περιηγητή τους:<1>{userLis}</1>",
  "Expose developer settings in the settings window.": "Εμφάνιση ρυθμίσεων προγραμματιστή στο παράθυρο ρυθμίσεων.",
  "Feedback": "Ανατροφοδότηση",
  "Submitting…": "Υποβολή…",
@@ -108,8 +92,6 @@
  "Sending debug logs…": "Αποστολή αρχείων καταγραφής…",
  "Submit": "Υποβολή",
  "Your feedback": "Τα σχόλιά σας",
-  "Fetching group call timed out.": "Η ομαδική κλήση έληξε από τέλος χρόνου.",
-  "Freedom": "Ελευθερία",
  "Spotlight": "Spotlight",
  "Element Call Home": "Element Κεντρική Οθόνη Κλήσεων"
 }
--- a/public/locales/en-GB/app.json
+++ b/public/locales/en-GB/app.json
@@ -1,7 +1,7 @@
 {
  "{{count, number}}|one": "{{count, number}}",
  "{{count, number}}|other": "{{count, number}}",
-  "{{count}} stars|one": "{{count}} star",
+  "{{count}} stars|one": "{{count}} stars",
  "{{count}} stars|other": "{{count}} stars",
  "{{displayName}} is presenting": "{{displayName}} is presenting",
  "{{displayName}}, your call has ended.": "{{displayName}}, your call has ended.",
@@ -22,11 +22,11 @@
  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
  "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.",
  "Call link copied": "Call link copied",
-  "Call type menu": "Call type menu",
  "Camera": "Camera",
  "Close": "Close",
  "Confirm password": "Confirm password",
  "Connectivity to the server has been lost.": "Connectivity to the server has been lost.",
+  "Continue in browser": "Continue in browser",
  "Copied!": "Copied!",
  "Copy": "Copy",
  "Copy and share this call link": "Copy and share this call link",
@@ -46,7 +46,6 @@
  "Exit full screen": "Exit full screen",
  "Expose developer settings in the settings window.": "Expose developer settings in the settings window.",
  "Feedback": "Feedback",
-  "Fetching group call timed out.": "Fetching group call timed out.",
  "Full screen": "Full screen",
  "Go": "Go",
  "Grid": "Grid",
@@ -54,7 +53,6 @@
  "How did it go?": "How did it go?",
  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.",
  "Include debug logs": "Include debug logs",
-  "Incompatible versions": "Incompatible versions",
  "Inspector": "Inspector",
  "Join call": "Join call",
  "Join call now": "Join call now",
@@ -68,14 +66,17 @@
  "Microphone off": "Microphone off",
  "Microphone on": "Microphone on",
  "More": "More",
+  "Mute microphone": "Mute microphone",
+  "Name of call": "Name of call",
  "No": "No",
  "Not encrypted": "Not encrypted",
  "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>",
+  "Open in the app": "Open in the app",
  "Password": "Password",
  "Passwords must match": "Passwords must match",
  "Profile": "Profile",
+  "Ready to join?": "Ready to join?",
  "Recaptcha dismissed": "Recaptcha dismissed",
  "Recaptcha not loaded": "Recaptcha not loaded",
  "Reconnect": "Reconnect",
@@ -85,6 +86,7 @@
  "Retry sending logs": "Retry sending logs",
  "Return to home screen": "Return to home screen",
  "Select an option": "Select an option",
+  "Select app": "Select app",
  "Send debug logs": "Send debug logs",
  "Sending debug logs…": "Sending debug logs…",
  "Sending…": "Sending…",
@@ -99,6 +101,9 @@
  "Sign out": "Sign out",
  "Speaker": "Speaker",
  "Spotlight": "Spotlight",
+  "Start new call": "Start new call",
+  "Start video": "Start video",
+  "Stop video": "Stop video",
  "Submit": "Submit",
  "Submit feedback": "Submit feedback",
  "Submitting…": "Submitting…",
@@ -107,20 +112,14 @@
  "Thanks!": "Thanks!",
  "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>End User Licensing Agreement (EULA)</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>End User Licensing Agreement (EULA)</12>",
+  "Unmute microphone": "Unmute microphone",
  "User menu": "User menu",
  "Username": "Username",
  "Version: {{version}}": "Version: {{version}}",
  "Video": "Video",
-  "Video call": "Video call",
-  "Video call name": "Video call name",
-  "Video off": "Video off",
-  "Video on": "Video on",
  "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": "You",
  "You were disconnected from the call": "You were disconnected from the call",
-  "Your feedback": "Your feedback",
-  "Your recent calls": "Your recent calls"
+  "Your feedback": "Your feedback"
 }
--- a/public/locales/es/app.json
+++ b/public/locales/es/app.json
@@ -1,7 +1,6 @@
 {
  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>¿Por qué no mantienes tu cuenta estableciendo una contraseña?</0><1>Podrás mantener tu nombre y establecer un avatar para usarlo en futuras llamadas</1>",
  "Your recent calls": "Tus llamadas recientes",
-  "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>",
@@ -16,12 +15,8 @@
  "Version: {{version}}": "Versión: {{version}}",
  "Username": "Nombre de usuario",
  "User menu": "Menú de usuario",
-  "Unmute microphone": "Desilenciar el micrófono",
-  "Turn on camera": "Encender la cámara",
-  "Turn off camera": "Apagar la cámara",
  "Take me Home": "Volver al inicio",
  "Submit feedback": "Enviar comentarios",
-  "Stop sharing screen": "Dejar de compartir pantalla",
  "Spotlight": "Foco",
  "Speaker": "Altavoz",
  "Sign out": "Cerrar sesión",
@@ -41,37 +36,26 @@
  "Profile": "Perfil",
  "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": "Más",
  "Microphone": "Micrófono",
  "Login": "Iniciar sesión",
  "Logging in…": "Iniciando sesión…",
  "Local volume": "Volumen local",
  "Loading…": "Cargando…",
-  "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",
-  "Grid layout menu": "Menú de distribución de cuadrícula",
  "Go": "Comenzar",
  "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",
  "Download debug logs": "Descargar registros de depuración",
  "Display name": "Nombre a mostrar",
  "Developer": "Desarrollador",
-  "Details": "Detalles",
  "Debug log request": "Petición de registros de depuración",
  "Debug log": "Registro de depuración",
  "Create account": "Crear cuenta",
@@ -79,12 +63,10 @@
  "Copied!": "¡Copiado!",
  "Confirm password": "Confirmar contraseña",
  "Close": "Cerrar",
-  "Change layout": "Cambiar distribució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",
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Crear una cuenta</0> o <2>Acceder como invitado</2>",
--- a/public/locales/et/app.json
+++ b/public/locales/et/app.json
@@ -3,24 +3,15 @@
  "<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>",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
-  "Invite people": "Kutsu inimesi",
-  "Invite": "Kutsu",
  "Inspector": "Inspektor",
-  "Incompatible versions!": "Ühildumatud versioonid!",
-  "Incompatible versions": "Ühildumatud versioonid",
  "Include debug logs": "Lisa veatuvastuslogid",
  "Home": "Avavaatesse",
-  "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",
  "Download debug logs": "Lae alla veatuvastuslogid",
  "Display name": "Kuvatav nimi",
  "Developer": "Arendaja",
-  "Details": "Täpsemalt",
  "Debug log request": "Veaotsingulogi päring",
  "Debug log": "Veaotsingulogi",
  "Create account": "Loo konto",
@@ -28,7 +19,6 @@
  "Copied!": "Kopeeritud!",
  "Confirm password": "Kinnita salasõna",
  "Close": "Sulge",
-  "Change layout": "Muuda paigutust",
  "Camera": "Kaamera",
  "Call type menu": "Kõnetüübi valik",
  "Call link copied": "Kõne link on kopeeritud",
@@ -40,7 +30,6 @@
  "Not registered yet? <2>Create an account</2>": "Sa pole veel registreerunud? <2>Loo kasutajakonto</2>",
  "Not now, return to home screen": "Mitte praegu, mine tagasi avalehele",
  "No": "Ei",
-  "Mute microphone": "Summuta mikrofon",
  "Your recent calls": "Hiljutised kõned",
  "More": "Rohkem",
  "Microphone": "Mikrofon",
@@ -49,15 +38,11 @@
  "Logging in…": "Sisselogimine …",
  "Local volume": "Kohalik helitugevus",
  "Loading…": "Laadimine …",
-  "Leave": "Lahku",
  "Join existing call?": "Liitu juba käimasoleva kõnega?",
  "Join call now": "Liitu kõnega kohe",
  "Join call": "Kõnega liitumine",
-  "Turn on camera": "Lülita kaamera sisse",
-  "Turn off camera": "Lülita kaamera välja",
  "Take me Home": "Mine avalehele",
  "Submit feedback": "Jaga tagasisidet",
-  "Stop sharing screen": "Lõpeta ekraani jagamine",
  "Spotlight": "Rambivalgus",
  "Speaker": "Kõlar",
  "Sign out": "Logi välja",
@@ -76,7 +61,6 @@
  "Recaptcha not loaded": "Robotilõks pole laetud",
  "Recaptcha dismissed": "Robotilõks on vahele jäetud",
  "Profile": "Profiil",
-  "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…",
  "Video call name": "Videokõne nimi",
  "Video call": "Videokõne",
@@ -84,12 +68,10 @@
  "Version: {{version}}": "Versioon: {{version}}",
  "Username": "Kasutajanimi",
  "This call already exists, would you like to join?": "See kõne on juba olemas, kas soovid liituda?",
-  "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.",
  "Element Call Home": "Element Call Home",
  "Copy": "Kopeeri",
  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Kui saadad meile vealogid, siis on lihtsam vea põhjust otsida.</0>",
@@ -123,5 +105,18 @@
  "Thanks!": "Tänud!",
  "End-to-end encryption isn't supported on your browser.": "Sinu brauser ei toeta läbivat krüptimist.",
  "Enable end-to-end encryption (password protected calls)": "Võta kasutusele läbiv krüptimine (salasõnaga kaitstud kõned)",
-  "Password (if none, E2EE is disabled)": "Salasõna (tühja väärtuse puhul läbivat krüptimist ei kasutata)"
+  "Encrypted": "Krüptitud",
+  "End call": "Lõpeta kõne",
+  "Grid": "Ruudustik",
+  "Microphone off": "Mikrofon ei tööta",
+  "Microphone on": "Mikrofon töötab",
+  "Not encrypted": "Krüptimata",
+  "Share": "Jaga",
+  "Share this call": "Jaga seda kõnet",
+  "Sharing screen": "Ekraanivaade on jagamisel",
+  "Video on": "Video on kasutusel",
+  "{{count, number}}|one": "{{count, number}}",
+  "{{count, number}}|other": "{{count, number}}",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
+  "Video off": "Video ei ole kasutusel"
 }
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -3,8 +3,6 @@
  "Video call": "تماس تصویری",
  "Video": "ویدیو",
  "Username": "نام کاربری",
-  "Turn on camera": "روشن کردن دوربین",
-  "Turn off camera": "خاموش کردن دوربین",
  "Take me Home": "مرا به خانه ببر",
  "Speaker": "بلندگو",
  "Sign out": "خروج",
@@ -13,27 +11,21 @@
  "Profile": "پروفایل",
  "Password": "رمز عبور",
  "No": "خیر",
-  "Mute microphone": "بی‌صدا کردن میکروفون",
  "More": "بیشتر",
  "Microphone": "میکروفون",
  "Login to your account": "به حساب کاربری خود وارد شوید",
  "Login": "ورود",
  "Loading…": "بارگزاری…",
-  "Leave": "خروج",
  "Join existing call?": "پیوست به تماس؟",
  "Join call now": "الان به تماس بپیوند",
  "Join call": "پیوستن به تماس",
-  "Invite people": "دعوت از افراد",
-  "Invite": "دعوت",
  "Home": "خانه",
  "Go": "رفتن",
  "Full screen": "تمام صحفه",
-  "Freedom": "آزادی",
  "Exit full screen": "خروج از حالت تمام صفحه",
  "Download debug logs": "دانلود لاگ عیب‌یابی",
  "Display name": "نام نمایشی",
  "Developer": "توسعه دهنده",
-  "Details": "جزئیات",
  "Debug log request": "درخواست لاگ عیب‌یابی",
  "Debug log": "لاگ عیب‌یابی",
  "Create account": "ساخت حساب کاربری",
@@ -41,21 +33,17 @@
  "Copied!": "کپی شد!",
  "Confirm password": "تایید رمزعبور",
  "Close": "بستن",
-  "Change layout": "تغییر طرح",
  "Camera": "دوربین",
  "Call type menu": "منوی نوع تماس",
  "Call link copied": "لینک تماس کپی شد",
  "Avatar": "آواتار",
  "Audio": "صدا",
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "کاربر دیگری در این تماس مشکلی دارد. برای تشخیص بهتر مشکل، بهتر است ما لاگ عیب‌یابی را جمع‌آوری کنیم.",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>چرا یک رمز عبور برای حساب کاربری خود تنظیم نمی‌کنید؟</0><1>شما می‌توانید نام خود را حفظ کنید و یک آواتار برای تماس‌های آینده بسازید</1>",
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>ساخت حساب کاربری</0> Or <2>دسترسی به عنوان میهمان</2>",
  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>از قبل حساب کاربری دارید؟</0><1><0>ورود</0> Or <2>به عنوان یک میهمان وارد شوید</2></1>",
  "Local volume": "حجم داخلی",
  "Inspector": "بازرس",
-  "Incompatible versions!": "نسخه‌های ناسازگار!",
-  "Incompatible versions": "نسخه‌های ناسازگار",
  "Spotlight": "نور افکن",
  "Show call inspector": "نمایش بازرس تماس",
  "Share screen": "اشتراک گذاری صفحه نمایش",
@@ -70,25 +58,19 @@
  "Recaptcha not loaded": "کپچا بارگیری نشد",
  "Recaptcha dismissed": "ریکپچا رد شد",
  "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": "الان نه، به صفحه اصلی برگردید",
  "Logging in…": "ورود…",
  "Include debug logs": "شامل لاگ‌های عیب‌یابی",
-  "Grid layout menu": "منوی طرح‌بندی شبکه‌ای",
-  "Fetching group call timed out.": "زمان اتصال به مکالمه گروهی تمام شد.",
  "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…": "در انتظار برای دیگر شرکت‌کنندگان…",
  "Video call name": "نامِ تماسِ تصویری",
  "Version: {{version}}": "نسخه: {{نسخه}}",
  "User menu": "فهرست کاربر",
-  "Unmute microphone": "ناخموشی میکروفون",
  "This call already exists, would you like to join?": "این تماس از قبل وجود دارد، می‌خواهید بپیوندید؟",
  "Submit feedback": "بازخورد ارائه دهید",
-  "Stop sharing screen": "توقف اشتراک‌گذاری صفحه نمایش",
  "Element Call Home": "خانهٔ تماس المنت",
  "Copy": "رونوشت",
  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>اکنون به تماس پیوسته</0><1>یا</1><2>پیوند تماس را رونوشت کرده و بعداً بپیوندید</2>"
--- a/public/locales/fr/app.json
+++ b/public/locales/fr/app.json
@@ -7,7 +7,6 @@
  "Call link copied": "Lien de l’appel copié",
  "Call type menu": "Menu de type d’appel",
  "Camera": "Caméra",
-  "Change layout": "Changer la disposition",
  "Close": "Fermer",
  "Confirm password": "Confirmer le mot de passe",
  "Copied!": "Copié !",
@@ -15,25 +14,18 @@
  "Create account": "Créer un compte",
  "Debug log": "Journal de débogage",
  "Debug log request": "Demande d’un journal de débogage",
-  "Details": "Informations",
  "Developer": "Développeur",
  "Display name": "Nom d’affichage",
  "Download debug logs": "Télécharger les journaux de débogage",
  "Exit full screen": "Quitter le plein écran",
-  "Freedom": "Libre",
  "Full screen": "Plein écran",
  "Go": "Commencer",
-  "Grid layout menu": "Menu en grille",
  "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…": "Chargement…",
  "Local volume": "Volume local",
  "Logging in…": "Connexion…",
@@ -41,11 +33,9 @@
  "Login to your account": "Connectez vous à votre compte",
  "Microphone": "Microphone",
  "More": "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",
  "Profile": "Profil",
@@ -64,15 +54,11 @@
  "Sign in": "Connexion",
  "Sign out": "Déconnexion",
  "Spotlight": "Premier plan",
-  "Stop sharing screen": "Arrêter le partage d’écran",
  "Submit feedback": "Envoyer des retours",
  "Take me Home": "Retouner à l’accueil",
  "This call already exists, would you like to join?": "Cet appel existe déjà, voulez-vous le rejoindre ?",
-  "Fetching group call timed out.": "Échec de connexion à l’appel de groupe dans le temps imparti.",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "Your recent calls": "Appels récents",
  "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…",
@@ -82,11 +68,7 @@
  "Version: {{version}}": "Version : {{version}}",
  "Username": "Nom d’utilisateur",
  "User menu": "Menu utilisateur",
-  "Unmute microphone": "Allumer le micro",
-  "Turn on camera": "Allumer la caméra",
-  "Turn off camera": "Couper la caméra",
  "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>",
@@ -122,6 +104,20 @@
  "You were disconnected from the call": "Vous avez été déconnecté de l’appel",
  "Connectivity to the server has been lost.": "La connexion avec le serveur a été perdue.",
  "End-to-end encryption isn't supported on your browser.": "Le chiffrement de bout-en-bout n’est pas pris en charge par votre navigateur.",
-  "Password (if none, E2EE is disabled)": "Mot de passe (si aucun, le chiffrement E2EE est désactivé)",
-  "Enable end-to-end encryption (password protected calls)": "Activer le chiffrement de bout-en-bout (appels protégés par mot de passe)"
+  "Enable end-to-end encryption (password protected calls)": "Activer le chiffrement de bout-en-bout (appels protégés par mot de passe)",
+  "{{count, number}}|other": "{{count, number}}",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
+  "Encrypted": "Chiffré",
+  "End call": "Terminer l’appel",
+  "Grid": "Grille",
+  "Microphone off": "Microphone éteint",
+  "Microphone on": "Microphone allumé",
+  "Share": "Partager",
+  "Share this call": "Partager cet appel",
+  "Sharing screen": "L’écran est partagé",
+  "Video off": "Vidéo éteinte",
+  "Video on": "Vidéo allumée",
+  "{{count, number}}|one": "{{count, number}}",
+  "Not encrypted": "Non chiffré",
+  "You": "Vous"
 }
--- a/public/locales/id/app.json
+++ b/public/locales/id/app.json
@@ -8,7 +8,6 @@
  "Call link copied": "Tautan panggilan disalin",
  "Call type menu": "Menu jenis panggilan",
  "Camera": "Kamera",
-  "Change layout": "Ubah tata letak",
  "Close": "Tutup",
  "Confirm password": "Konfirmasi kata sandi",
  "Copied!": "Disalin!",
@@ -16,27 +15,18 @@
  "Create account": "Buat akun",
  "Debug log": "Catatan pengawakutuan",
  "Debug log request": "Permintaan catatan pengawakutuan",
-  "Details": "Detail",
  "Developer": "Pengembang",
  "Display name": "Nama tampilan",
  "Download debug logs": "Unduh catatan pengawakutuan",
  "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",
  "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…": "Memuat…",
  "Local volume": "Volume lokal",
  "Logging in…": "Memasuki…",
@@ -44,11 +34,9 @@
  "Login to your account": "Masuk ke akun Anda",
  "Microphone": "Mikrofon",
  "More": "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",
  "Profile": "Profil",
@@ -68,13 +56,9 @@
  "Sign out": "Keluar",
  "Speaker": "Pembicara",
  "Spotlight": "Sorotan",
-  "Stop sharing screen": "Berhenti membagikan layar",
  "Submit feedback": "Kirim masukan",
  "Take me Home": "Bawa saya ke Beranda",
  "This call already exists, would you like to join?": "Panggilan ini sudah ada, apakah Anda ingin bergabung?",
-  "Turn off camera": "Matikan kamera",
-  "Turn on camera": "Nyalakan kamera",
-  "Unmute microphone": "Suarakan mikrofon",
  "User menu": "Menu pengguna",
  "Username": "Nama pengguna",
  "Version: {{version}}": "Versi: {{version}}",
@@ -84,10 +68,8 @@
  "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",
  "Your recent calls": "Panggilan Anda terkini",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "Sending debug logs…": "Mengirimkan catatan pengawakutuan…",
  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Bergabung ke panggilan sekarang</0><1>Atau</1><2>Salin tautan dan bergabung nanti</2>",
  "Element Call Home": "Beranda Element Call",
@@ -119,9 +101,22 @@
  "Connectivity to the server has been lost.": "Koneksi ke server telah hilang.",
  "Enable end-to-end encryption (password protected calls)": "Aktifkan enkripsi ujung ke ujung (panggilan terlindungi oleh kata sandi)",
  "End-to-end encryption isn't supported on your browser.": "Enkripsi ujung ke ujung tidak didukung di peramban Anda.",
-  "Password (if none, E2EE is disabled)": "Kata sandi (jika tidak ada, enkripsi akan dinonaktifkan)",
  "Retry sending logs": "Kirim ulang catatan",
  "You were disconnected from the call": "Anda terputus dari panggilan",
  "Reconnect": "Hubungkan ulang",
-  "Thanks!": "Terima kasih!"
+  "Thanks!": "Terima kasih!",
+  "{{count, number}}|other": "{{count, number}}",
+  "Encrypted": "Terenkripsi",
+  "End call": "Akhiri panggilan",
+  "Grid": "Kisi",
+  "Microphone off": "Mikrofon dimatikan",
+  "Microphone on": "Mikrofon dinyalakan",
+  "Not encrypted": "Tidak terenkripsi",
+  "Share": "Bagikan",
+  "Share this call": "Bagikan panggilan ini",
+  "Sharing screen": "Berbagi layar",
+  "Video off": "Video dinonaktifkan",
+  "Video on": "Video diaktifkan",
+  "{{count, number}}|one": "{{count, number}}",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}"
 }
--- a/public/locales/it/app.json
+++ b/public/locales/it/app.json
@@ -0,0 +1,123 @@
+{
+  "{{count, number}}|one": "{{count, number}}",
+  "{{count, number}}|other": "{{count, number}}",
+  "{{count}} stars|one": "{{count}} stelle",
+  "{{count}} stars|other": "{{count}} stelle",
+  "{{displayName}} is presenting": "{{displayName}} sta presentando",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
+  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Hai già un profilo?</0><1><0>Accedi</0> o <2>Accedi come ospite</2></1>",
+  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Crea un profilo</0> o <2>Accedi come ospite</2>",
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Entra nella chiamata</0><1>o</1><2>Copia il collegamento ed entra dopo</2>",
+  "<0>Oops, something's gone wrong.</0>": "<0>Ops, qualcosa è andato storto.</0>",
+  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>L'invio di registri di debug ci aiuterà ad individuare il problema.</0>",
+  "<0>Thanks for your feedback!</0>": "<0>Grazie per la tua opinione!</0>",
+  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Vorremmo sapere la tua opinione in modo da migliorare l'esperienza.</0>",
+  "Audio": "Audio",
+  "Avatar": "Avatar",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Cliccando \"Vai\", accetti il nostro <2>accordo di licenza con l'utente finale (EULA)</2>",
+  "Call link copied": "Collegamento alla chiamata copiato",
+  "Call type menu": "Menu del tipo di chiamata",
+  "Camera": "Fotocamera",
+  "Close": "Chiudi",
+  "Confirm password": "Conferma password",
+  "Connectivity to the server has been lost.": "La connessione al server è stata persa.",
+  "Copied!": "Copiato!",
+  "Copy": "Copia",
+  "Copy and share this call link": "Copia e condividi questo collegamento alla chiamata",
+  "Create account": "Crea profilo",
+  "Debug log": "Registro di debug",
+  "Debug log request": "Richiesta registro di debug",
+  "Developer": "Sviluppatore",
+  "Developer Settings": "Impostazioni per sviluppatori",
+  "Display name": "Nome da mostrare",
+  "Download debug logs": "Scarica registri di debug",
+  "Element Call Home": "Inizio di Element Call",
+  "Enable end-to-end encryption (password protected calls)": "Attiva crittografia end-to-end (chiamate protette da password)",
+  "Encrypted": "Cifrata",
+  "End call": "Termina chiamata",
+  "Exit full screen": "Esci da schermo intero",
+  "Expose developer settings in the settings window.": "Mostra le impostazioni per sviluppatori nella finestra delle impostazioni.",
+  "Feedback": "Feedback",
+  "Full screen": "Schermo intero",
+  "Go": "Vai",
+  "Grid": "Griglia",
+  "Home": "Pagina iniziale",
+  "How did it go?": "Com'è andata?",
+  "Include debug logs": "Includi registri di debug",
+  "Join call": "Entra in chiamata",
+  "Join call now": "Entra in chiamata ora",
+  "Loading…": "Caricamento…",
+  "Local volume": "Volume locale",
+  "Logging in…": "Accesso…",
+  "Login": "Accedi",
+  "Login to your account": "Accedi al tuo profilo",
+  "Microphone": "Microfono",
+  "Microphone off": "Microfono spento",
+  "Microphone on": "Microfono acceso",
+  "More": "Altro",
+  "No": "No",
+  "Not encrypted": "Non cifrata",
+  "Inspector": "Ispettore",
+  "Join existing call?": "Entrare in una chiamata esistente?",
+  "Not registered yet? <2>Create an account</2>": "Non hai ancora un profilo? <2>Creane uno</2>",
+  "Password": "Password",
+  "Passwords must match": "Le password devono coincidere",
+  "Profile": "Profilo",
+  "Recaptcha dismissed": "Recaptcha annullato",
+  "Recaptcha not loaded": "Recaptcha non caricato",
+  "Reconnect": "Riconnetti",
+  "Register": "Registra",
+  "Registering…": "Registrazione…",
+  "Remove": "Rimuovi",
+  "Retry sending logs": "Riprova l'invio dei registri",
+  "Return to home screen": "Torna alla schermata di iniziale",
+  "Select an option": "Seleziona un'opzione",
+  "Send debug logs": "Invia registri di debug",
+  "Sending debug logs…": "Invio dei registri di debug…",
+  "Sending…": "Invio…",
+  "Settings": "Impostazioni",
+  "Share": "Condividi",
+  "Share screen": "Condividi schermo",
+  "Share this call": "Condividi questa chiamata",
+  "Sharing screen": "Condivisione schermo",
+  "Show connection stats": "Mostra statistiche connessione",
+  "Sign in": "Accedi",
+  "Sign out": "Disconnetti",
+  "Speaker": "Altoparlante",
+  "Submit": "Invia",
+  "Submit feedback": "Invia commento",
+  "Take me Home": "Portami all'inizio",
+  "Show call inspector": "Mostra ispettore della chiamata",
+  "Spotlight": "In primo piano",
+  "Thanks, we received your feedback!": "Grazie, abbiamo ricevuto il tuo commento!",
+  "Thanks!": "Grazie!",
+  "This call already exists, would you like to join?": "Questa chiamata esiste già, vuoi entrare?",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Questo sito è protetto da ReCAPTCHA e si applicano l'<2>informativa sulla privacy</2> e i <6>termini di servizio</6> di Google.<9></9>Cliccando \"Registra\", accetti il nostro <12>accordo di licenza con l'utente finale (EULA)</12>",
+  "User menu": "Menu utente",
+  "Username": "Nome utente",
+  "Version: {{version}}": "Versione: {{version}}",
+  "Video": "Video",
+  "Video call": "Videochiamata",
+  "Video call name": "Nome della videochiamata",
+  "Video off": "Video spento",
+  "Video on": "Video acceso",
+  "Waiting for other participants…": "In attesa di altri partecipanti…",
+  "Walkie-talkie call": "Chiamata walkie-talkie",
+  "Walkie-talkie call name": "Nome della chiamata walkie-talkie",
+  "Yes, join call": "Sì, entra in chiamata",
+  "You were disconnected from the call": "Sei stato disconnesso dalla chiamata",
+  "Your feedback": "Il tuo commento",
+  "Your recent calls": "Le tue chiamate recenti",
+  "{{displayName}}, your call has ended.": "{{displayName}}, la chiamata è terminata.",
+  "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": "<0></0><1></1>Puoi revocare il consenso deselezionando questa casella. Se attualmente sei in una chiamata, avrà effetto al termine di essa.",
+  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Ti va di terminare impostando una password per mantenere il profilo?</0><1>Potrai mantenere il tuo nome e impostare un avatar da usare in chiamate future</1>",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call temporaneamente non è cifrato end-to-end mentre proviamo la scalabilità.",
+  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Se stai riscontrando problemi o semplicemente vuoi dare un'opinione, inviaci una breve descrizione qua sotto.",
+  "Not now, return to home screen": "Non ora, torna alla schermata principale",
+  "Submitting…": "Invio…",
+  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Un altro utente in questa chiamata sta avendo problemi. Per diagnosticare meglio questi problemi, vorremmo raccogliere un registro di debug.",
+  "End-to-end encryption isn't supported on your browser.": "La crittografia end-to-end non è supportata nel tuo browser.",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Cliccando \"Entra in chiamata ora\", accetti il nostro <2>accordo di licenza con l'utente finale (EULA)</2>",
+  "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "Partecipando a questa beta, acconsenti alla raccolta di dati anonimi che usiamo per migliorare il prodotto. Puoi trovare più informazioni su quali dati monitoriamo nella nostra <2>informativa sulla privacy</2> e nell'<5>informativa sui cookie</5>.",
+  "You": "Tu"
+}
--- a/public/locales/ja/app.json
+++ b/public/locales/ja/app.json
@@ -9,45 +9,32 @@
  "Audio": "音声",
  "Confirm password": "パスワードを確認",
  "Close": "閉じる",
-  "Change layout": "レイアウトを変更",
  "Copied!": "コピーしました！",
  "Copy and share this call link": "通話リンクをコピーし共有",
  "Copy": "コピー",
  "Debug log": "デバッグログ",
  "Create account": "アカウントを作成",
  "Go": "続行",
-  "Fetching group call timed out.": "グループ通話の取得がタイムアウトしました。",
  "Element Call Home": "Element Call ホーム",
  "Download debug logs": "デバッグログをダウンロード",
  "Display name": "表示名",
  "Developer": "開発者",
-  "Details": "詳細",
  "Full screen": "全画面表示",
  "Exit full screen": "全画面表示を終了",
  "Include debug logs": "デバッグログを含める",
  "Home": "ホーム",
-  "Incompatible versions!": "互換性のないバージョンです！",
-  "Incompatible versions": "互換性のないバージョン",
  "Join existing call?": "既存の通話に参加しますか？",
  "Join call now": "今すぐ通話に参加",
  "Join call": "通話に参加",
-  "Invite": "招待",
-  "Invite people": "連絡先を招待",
  "Not registered yet? <2>Create an account</2>": "アカウントがありませんか？ <2>アカウントを作成</2>",
-  "Mute microphone": "マイクをミュート",
  "Microphone": "マイク",
  "Login": "ログイン",
  "Logging in…": "ログインしています…",
  "Loading…": "読み込んでいます…",
-  "Leave": "退出",
  "Version: {{version}}": "バージョン：{{version}}",
  "Username": "ユーザー名",
  "User menu": "ユーザーメニュー",
-  "Unmute microphone": "マイクのミュートを解除",
-  "Turn on camera": "カメラをつける",
-  "Turn off camera": "カメラを切る",
  "Submit feedback": "フィードバックを送信",
-  "Stop sharing screen": "画面共有を停止",
  "Spotlight": "スポットライト",
  "Send debug logs": "デバッグログを送信",
  "Sign out": "サインアウト",
@@ -73,12 +60,9 @@
  "Select an option": "オプションを選択",
  "Debug log request": "デバッグログを要求",
  "Your recent calls": "最近の通話",
-  "WebRTC is not supported or is being blocked in this browser.": "お使いのブラウザでWebRTCがサポートされていないか、またはブロックされています。",
  "Login to your account": "アカウントにログイン",
-  "Freedom": "自由",
  "Remove": "削除",
  "No": "いいえ",
  "This call already exists, would you like to join?": "この通話は既に存在します。参加しますか？",
-  "Take me Home": "ホームに戻る",
-  "{{names}}, {{name}}": "{{names}}、{{name}}"
+  "Take me Home": "ホームに戻る"
 }
--- a/public/locales/ko/app.json
+++ b/public/locales/ko/app.json
@@ -1,5 +1,4 @@
 {
  "<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>": "",
-  "{{names}}, {{name}}": "{{names}}님, {{name}}님"
+  "<0>Create an account</0> Or <2>Access as a guest</2>": ""
 }
--- a/public/locales/lv/app.json
+++ b/public/locales/lv/app.json
@@ -1,7 +1,6 @@
 {
  "{{count}} stars|one": "{{count}} zvaigzne",
  "{{count}} stars|other": "{{count}} zvaigznes",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Jau ir konts?</0><1><0>Pieteikties</0> vai <2>Piekļūt kā viesim</2></1>",
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Izveidot kontu</0> vai <2>Piekļūt kā viesim</2>",
  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Pievienoties zvanam tagad</0><1>vai</1><2>ievietot zvana saiti starpliktuvē un pievienoties vēlāk</2>",
@@ -15,7 +14,6 @@
  "Call link copied": "Zvana saite ievietota starpliktuvē",
  "Call type menu": "Zvana veida izvēlne",
  "Camera": "Kamera",
-  "Change layout": "Mainīt izkārtojumu",
  "Close": "Aizvērt",
  "Confirm password": "Apstiprināt paroli",
  "Connectivity to the server has been lost.": "Ir zaudēts savienojums ar serveri.",
@@ -25,7 +23,6 @@
  "Create account": "Izveidot kontu",
  "Debug log": "Atkļūdošanas žurnāls",
  "Debug log request": "Atkļūdošanas žurnāla pieprasījums",
-  "Details": "Izvērsums",
  "Developer": "Izstrādātājs",
  "Developer Settings": "Izstrādātāja iestatījumi",
  "Display name": "Attēlojamais vārds",
@@ -34,11 +31,8 @@
  "Exit full screen": "Iziet no pilnekrāna",
  "Expose developer settings in the settings window.": "Izstādīt izstrādātāja iestatījumus iestatījumu logā.",
  "Feedback": "Atsauksmes",
-  "Fetching group call timed out.": "Grupas zvana iegūšanā iestājās noildze.",
-  "Freedom": "Brīvība",
  "Full screen": "Pilnekrāns",
  "Go": "Aiziet",
-  "Grid layout menu": "Režģa izkārtojuma izvēlne",
  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikšķināšana uz \"Pievienoties zvanam tagad\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
  "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "Piedalīšanās šajā beta apliecina piekrišanu anonīmu datu ievākšanai, ko mēs izmantojam, lai uzlabotu izstrādājumu. Vairāk informācijas par datiem, ko mēs ievācam, var atrast mūsu <2>privātuma nosacījumos</2> un <5>sīkdatņu nosacījumos</5>.",
  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call īslaicīgi nav pilnīgi šifrēts, kamēr mēs pārbaudām mērogojamību.",
@@ -57,15 +51,10 @@
  "Your recent calls": "Nesenie zvani",
  "How did it go?": "Kā Tev veicās?",
  "Include debug logs": "Iekļaut atkļūdošanas žurnāla ierakstus",
-  "Incompatible versions": "Nesaderīgas versijas",
-  "Incompatible versions!": "Nesaderīgas versijas.",
  "Inspector": "Inspektors",
-  "Invite": "Uzaicināt",
-  "Invite people": "Uzaicināt cilvēkus",
  "Join call": "Pievienoties zvanam",
  "Join call now": "Pievienoties zvanam tagad",
  "Join existing call?": "Pievienoties esošam zvanam?",
-  "Leave": "Pamest",
  "Loading…": "Lādējas…",
  "Local volume": "Vietējais skaļums",
  "Logging in…": "Piesakās…",
@@ -73,11 +62,9 @@
  "Login to your account": "Pieteikties kontā",
  "Microphone": "Mikrofons",
  "More": "Vairāk",
-  "Mute microphone": "Apklusināt mikrofonu",
  "No": "Nē",
  "Not now, return to home screen": "Ne tagad, atgriezties sākuma ekrānā",
  "Password": "Parole",
-  "Password (if none, E2EE is disabled)": "Parole (ja nav, pilnīga šifrēšana ir atspējota)",
  "Passwords must match": "Parolēm ir jāsakrīt",
  "Profile": "Profils",
  "Recaptcha dismissed": "ReCaptcha atmesta",
@@ -100,7 +87,6 @@
  "Sign out": "Atteikties",
  "Speaker": "Runātājs",
  "Spotlight": "Starmešu gaisma",
-  "Stop sharing screen": "Pārtraukt ekrāna kopīgošanu",
  "Submit": "Iesniegt",
  "Submit feedback": "Iesniegt atsauksmi",
  "Submitting…": "Iesniedz…",
@@ -109,9 +95,6 @@
  "Thanks!": "Paldies!",
  "This call already exists, would you like to join?": "Šis zvans jau pastāv. Vai vēlies pievienoties?",
  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Šo vietni aizsargā ReCAPTCHA, un ir attiecināmi Google <2>privātuma nosacījumi</2> un <6>pakalpojuma noteikumi</6>.<9></9>Klikšķināšana uz \"Reģistrēties\" sniedz piekrišanu mūsu <12>galalietotāja licencēšanas nolīgumam (GLLN)</12>",
-  "Turn off camera": "Izslēgt kameru",
-  "Turn on camera": "Ieslēgt kameru",
-  "Unmute microphone": "Atsaukt mikrofona apklusināšanu",
  "User menu": "Lietotāja izvēlne",
  "Username": "Lietotājvārds",
  "Video": "Video",
@@ -120,8 +103,6 @@
  "You were disconnected from the call": "Tu tiki atvienots no zvana",
  "Version: {{version}}": "Versija: {{version}}",
  "Walkie-talkie call name": "Rācijas zvana nosaukums",
-  "WebRTC is not supported or is being blocked in this browser.": "Šajā pārlūkā nav nodrošināts WebRTC vai tiek liegta tā izmantošana.",
  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Ja tiek piedzīvoti sarežģījumi vai vienkārši ir vēlme sniegt kādu atsauksmi, lūgums zemāk nosūtīt mums īsu aprakstu.",
-  "Not registered yet? <2>Create an account</2>": "Vēl neesi reģistrējies? <2>Izveidot kontu</2>",
-  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Citi lietotāji mēģina pievienoties šim zvanam no nesaderīgām versijām. Šiem lietotājiem vajadzētu nodrošināt, ka viņi ir atsvaidzinājuši savus pārlūkus: <1>{userLis}</1>"
+  "Not registered yet? <2>Create an account</2>": "Vēl neesi reģistrējies? <2>Izveidot kontu</2>"
 }
--- a/public/locales/pl/app.json
+++ b/public/locales/pl/app.json
@@ -3,7 +3,6 @@
  "Go": "Przejdź",
  "Your recent calls": "Twoje ostatnie połączenia",
  "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…",
@@ -13,13 +12,9 @@
  "Version: {{version}}": "Wersja: {{version}}",
  "Username": "Nazwa użytkownika",
  "User menu": "Menu użytkownika",
-  "Unmute microphone": "Wyłącz wyciszenie mikrofonu",
-  "Turn on camera": "Włącz kamerę",
-  "Turn off camera": "Wyłącz kamerę",
  "This call already exists, would you like to join?": "Te połączenie już istnieje, czy chcesz do niego dołączyć?",
  "Take me Home": "Zabierz mnie do strony głównej",
  "Submit feedback": "Prześlij opinię",
-  "Stop sharing screen": "Zatrzymaj udostępnianie ekranu",
  "Spotlight": "Centrum uwagi",
  "Speaker": "Głośnik",
  "Sign out": "Wyloguj się",
@@ -40,37 +35,26 @@
  "Profile": "Profil",
  "Passwords must match": "Hasła muszą pasować",
  "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": "Mikrofon",
  "Login to your account": "Zaloguj się do swojego konta",
  "Logging in…": "Logowanie…",
  "Local volume": "Głośność lokalna",
  "Loading…": "Ładowanie…",
-  "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",
-  "Grid layout menu": "Menu układu siatki",
  "Full screen": "Pełny ekran",
-  "Freedom": "Wolność",
-  "Fetching group call timed out.": "Przekroczono limit czasu na uzyskanie połączenia grupowego.",
  "Exit full screen": "Opuść pełny ekran",
  "Download debug logs": "Pobierz dzienniki debugowania",
  "Display name": "Nazwa wyświetlana",
  "Developer": "Programista",
-  "Details": "Szczegóły",
  "Debug log request": "Prośba o dzienniki debugowania",
  "Debug log": "Dzienniki debugowania",
  "Create account": "Utwórz konto",
@@ -78,7 +62,6 @@
  "Copied!": "Skopiowano!",
  "Confirm password": "Potwierdź hasło",
  "Close": "Zamknij",
-  "Change layout": "Zmień układ",
  "Camera": "Kamera",
  "Call type menu": "Menu typu połączenia",
  "Call link copied": "Skopiowano link do połączenia",
@@ -88,7 +71,6 @@
  "<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>Create an account</0> Or <2>Access as a guest</2>": "<0>Utwórz konto</0> lub <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> lub <2>Dołącz jako gość</2></1>",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "Copy": "Kopiuj",
  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Wysłanie dzienników debuggowania pomoże nam ustalić przyczynę problemu.</0>",
  "<0>Oops, something's gone wrong.</0>": "<0>Ojej, coś poszło nie tak.</0>",
@@ -105,7 +87,7 @@
  "Submit": "Wyślij",
  "Your feedback": "Twoje opinie",
  "{{count}} stars|other": "{{count}} gwiazdki",
-  "{{count}} stars|one": "{{count}} gwiazdka",
+  "{{count}} stars|one": "{{count}} gwiazdki",
  "{{displayName}}, your call has ended.": "{{displayName}}, Twoje połączenie zostało zakończone.",
  "<0>Thanks for your feedback!</0>": "<0>Dziękujemy za Twoją opinię!</0>",
  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Z przyjemnością wysłuchamy Twojej opinii, aby poprawić Twoje doświadczenia.</0>",
@@ -117,11 +99,24 @@
  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Ta witryna jest chroniona przez ReCAPTCHA, więc obowiązują <2>Polityka prywatności</2> i <6>Warunki usług</6> Google. Klikając \"Zarejestruj\", zgadzasz się na naszą <12>Umowę licencyjną (EULA)</12>",
  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikając \"Dołącz teraz do rozmowy\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
  "End-to-end encryption isn't supported on your browser.": "Szyfrowanie end-to-end nie jest wspierane przez Twoją przeglądarkę.",
-  "Password (if none, E2EE is disabled)": "Hasło (brak oznacza, że E2EE jest włączone)",
  "Retry sending logs": "Wyślij logi ponownie",
  "Thanks!": "Dziękujemy!",
  "You were disconnected from the call": "Rozłączono Cię z połączenia",
  "Connectivity to the server has been lost.": "Utracono połączenie z serwerem.",
  "Reconnect": "Połącz ponownie",
-  "Enable end-to-end encryption (password protected calls)": "Włącz szyfrowanie end-to-end (połączenia chronione hasłem)"
+  "Enable end-to-end encryption (password protected calls)": "Włącz szyfrowanie end-to-end (połączenia chronione hasłem)",
+  "{{count, number}}|other": "{{count, number}}",
+  "Encrypted": "Szyfrowane",
+  "End call": "Zakończ połączenie",
+  "Grid": "Siatka",
+  "Microphone off": "Mikrofon wyłączony",
+  "Microphone on": "Mikrofon włączony",
+  "Not encrypted": "Nie szyfrowane",
+  "Share": "Udostępnij",
+  "Share this call": "Udostępnij to połączenie",
+  "Sharing screen": "Udostępnianie ekranu",
+  "Video off": "Wideo wyłączone",
+  "{{count, number}}|one": "{{count, number}}",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
+  "Video on": "Wideo włączone"
 }
--- a/public/locales/ru/app.json
+++ b/public/locales/ru/app.json
@@ -2,20 +2,16 @@
  "Register": "Зарегистрироваться",
  "Registering…": "Регистрация…",
  "Logging in…": "Вход…",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "Waiting for other participants…": "Ожидание других участников…",
  "This call already exists, would you like to join?": "Этот звонок уже существует, хотите присоединиться?",
  "Submit feedback": "Отправить отзыв",
  "Sending debug logs…": "Отправка журнала отладки…",
  "Select an option": "Выберите вариант",
-  "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": "Меню \"Расположение сеткой\"",
  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Почему бы не задать пароль, тем самым сохранив аккаунт?</0><1>Так вы можете оставить своё имя и задать аватар для будущих звонков.</1>",
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Создать аккаунт</0> или <2>Зайти как гость</2>",
  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Уже есть аккаунт?</0><1><0>Войти с ним</0> или <2>Зайти как гость</2></1>",
  "Your recent calls": "Ваши недавние звонки",
  "Yes, join call": "Да, присоединиться",
-  "WebRTC is not supported or is being blocked in this browser.": "WebRTC не поддерживается или заблокирован в этом браузере.",
  "Walkie-talkie call name": "Название звонка-рации",
  "Walkie-talkie call": "Звонок-рация",
  "Video call name": "Название видео-звонка",
@@ -24,11 +20,7 @@
  "Version: {{version}}": "Версия: {{version}}",
  "Username": "Имя пользователя",
  "User menu": "Меню пользователя",
-  "Unmute microphone": "Включить микрофон",
-  "Turn on camera": "Включить камеру",
-  "Turn off camera": "Отключить камеру",
  "Take me Home": "Перейти в Начало",
-  "Stop sharing screen": "Остановить показ экрана",
  "Spotlight": "Внимание",
  "Speaker": "Динамик",
  "Sign out": "Выйти",
@@ -55,36 +47,26 @@
  "Not registered yet? <2>Create an account</2>": "Ещё не зарегистрированы? <2>Создайте аккаунт</2>",
  "Not now, return to home screen": "Не сейчас, вернуться в Начало",
  "No": "Нет",
-  "Mute microphone": "Отключить микрофон",
  "More": "Больше",
  "Microphone": "Микрофон",
  "Login to your account": "Войдите в свой аккаунт",
  "Login": "Вход",
  "Loading…": "Загрузка…",
-  "Leave": "Покинуть",
  "Join existing call?": "Присоединиться к существующему звонку?",
  "Join call now": "Присоединиться сейчас",
  "Join call": "Присоединиться",
-  "Invite people": "Пригласить участников",
-  "Invite": "Пригласить",
  "Inspector": "Инспектор",
-  "Incompatible versions!": "Несовместимые версии!",
-  "Incompatible versions": "Несовместимые версии",
  "Home": "Начало",
  "Go": "Далее",
  "Full screen": "Полноэкранный режим",
-  "Freedom": "Свобода",
-  "Fetching group call timed out.": "Истекло время ожидания для группового звонка.",
  "Exit full screen": "Выйти из полноэкранного режима",
  "Display name": "Видимое имя",
  "Developer": "Разработчику",
-  "Details": "Подробности",
  "Create account": "Создать аккаунт",
  "Copy and share this call link": "Скопируйте и поделитесь этой ссылкой на звонок",
  "Copied!": "Скопировано!",
  "Confirm password": "Подтвердите пароль",
  "Close": "Закрыть",
-  "Change layout": "Изменить расположение",
  "Camera": "Камера",
  "Call link copied": "Ссылка на звонок скопирована",
  "Avatar": "Аватар",
--- a/public/locales/sk/app.json
+++ b/public/locales/sk/app.json
@@ -2,12 +2,10 @@
  "Spotlight": "Stredobod",
  "Local volume": "Lokálna hlasitosť",
  "Include debug logs": "Zahrnúť záznamy o ladení",
-  "Fetching group call timed out.": "Vypršal čas načítania skupinového volania.",
  "Element Call Home": "Domov Element Call",
  "Waiting for other participants…": "Čaká sa na ďalších účastníkov…",
  "Take me Home": "Zober ma domov",
  "Submit feedback": "Odoslať spätnú väzbu",
-  "Stop sharing screen": "Zastaviť zdieľanie obrazovky",
  "Show call inspector": "Zobraziť inšpektora hovorov",
  "Share screen": "Zdieľať obrazovku",
  "Sending…": "Odosielanie…",
@@ -23,36 +21,26 @@
  "Profile": "Profil",
  "Passwords must match": "Heslá sa musia zhodovať",
  "Password": "Heslo",
-  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Ostatní používatelia sa pokúšajú pripojiť k tomuto hovoru z nekompatibilných verzií. Títo používatelia by sa mali uistiť, že si obnovili svoje prehliadače:<1>{userLis}</1>",
  "Not registered yet? <2>Create an account</2>": "Ešte nie ste zaregistrovaný? <2>Vytvorte si účet</2>",
  "Not now, return to home screen": "Teraz nie, vrátiť sa na domovskú obrazovku",
  "No": "Nie",
-  "Mute microphone": "Stlmiť mikrofón",
  "More": "Viac",
  "Microphone": "Mikrofón",
  "Login to your account": "Prihláste sa do svojho konta",
  "Login": "Prihlásiť sa",
  "Logging in…": "Prihlasovanie…",
  "Loading…": "Načítanie…",
-  "Leave": "Opustiť",
  "Join existing call?": "Pripojiť sa k existujúcemu hovoru?",
  "Join call now": "Pripojiť sa k hovoru teraz",
  "Join call": "Pripojiť sa k hovoru",
-  "Invite people": "Pozvať ľudí",
-  "Invite": "Pozvať",
  "Inspector": "Inšpektor",
-  "Incompatible versions!": "Nekompatibilné verzie!",
-  "Incompatible versions": "Nekompatibilné verzie",
  "Home": "Domov",
-  "Grid layout menu": "Ponuka rozloženia mriežky",
  "Go": "Prejsť",
  "Full screen": "Zobrazenie na celú obrazovku",
-  "Freedom": "Sloboda",
  "Exit full screen": "Ukončiť zobrazenie na celú obrazovku",
  "Download debug logs": "Stiahnuť záznamy ladenia",
  "Your recent calls": "Vaše nedávne hovory",
  "Yes, join call": "Áno, pripojiť sa k hovoru",
-  "WebRTC is not supported or is being blocked in this browser.": "WebRTC nie je podporované alebo je v tomto prehliadači blokované.",
  "Walkie-talkie call name": "Názov vysielačkového hovoru",
  "Walkie-talkie call": "Vysielačkový hovor",
  "Video call name": "Názov video hovoru",
@@ -61,9 +49,6 @@
  "Version: {{version}}": "Verzia: {{version}}",
  "Username": "Meno používateľa",
  "User menu": "Používateľské menu",
-  "Unmute microphone": "Zrušiť stlmenie mikrofónu",
-  "Turn on camera": "Zapnúť kameru",
-  "Turn off camera": "Vypnúť kameru",
  "This call already exists, would you like to join?": "Tento hovor už existuje, chceli by ste sa k nemu pripojiť?",
  "Speaker": "Reproduktor",
  "Sign out": "Odhlásiť sa",
@@ -71,7 +56,6 @@
  "Settings": "Nastavenia",
  "Display name": "Zobrazované meno",
  "Developer": "Vývojár",
-  "Details": "Podrobnosti",
  "Debug log request": "Žiadosť o záznam ladenia",
  "Debug log": "Záznam o ladení",
  "Create account": "Vytvoriť účet",
@@ -80,7 +64,6 @@
  "Copied!": "Skopírované!",
  "Confirm password": "Potvrdiť heslo",
  "Close": "Zatvoriť",
-  "Change layout": "Zmeniť rozloženie",
  "Camera": "Kamera",
  "Call type menu": "Ponuka typu hovoru",
  "Call link copied": "Odkaz na hovor skopírovaný",
@@ -91,7 +74,6 @@
  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Pripojiť sa k hovoru teraz</0><1>alebo</1><2>Kopírovať odkaz na hovor a pripojiť sa neskôr</2>",
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Vytvoriť konto</0> Alebo <2>Prihlásiť sa ako hosť</2>",
  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Už máte konto?</0><1><0>Prihláste sa</0> Alebo <2>Prihlásiť sa ako hosť</2></1>",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Odoslanie záznamov ladenia nám pomôže nájsť problém.</0>",
  "<0>Oops, something's gone wrong.</0>": "<0>Hups, niečo sa pokazilo.</0>",
  "Expose developer settings in the settings window.": "Zobraziť nastavenia pre vývojárov v okne nastavení.",
@@ -123,5 +105,19 @@
  "You were disconnected from the call": "Boli ste odpojení z hovoru",
  "Enable end-to-end encryption (password protected calls)": "Povoliť end-to-end šifrovanie (hovory chránené heslom)",
  "End-to-end encryption isn't supported on your browser.": "End-to-end šifrovanie nie je vo vašom prehliadači podporované.",
-  "Password (if none, E2EE is disabled)": "Heslo (ak nie je, šifrovanie je vypnuté)"
+  "{{count, number}}|other": "{{count, number}}",
+  "Encrypted": "Šifrované",
+  "End call": "Ukončiť hovor",
+  "Microphone off": "Mikrofón vypnutý",
+  "Microphone on": "Mikrofón zapnutý",
+  "Grid": "Sieť",
+  "Not encrypted": "Nie je zašifrované",
+  "Share": "Zdieľať",
+  "Sharing screen": "Zdieľanie obrazovky",
+  "Video off": "Video vypnuté",
+  "Video on": "Video zapnuté",
+  "{{count, number}}|one": "{{count, number}}",
+  "Share this call": "Zdieľať tento hovor",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
+  "You": "Vy"
 }
--- a/public/locales/sv/app.json
+++ b/public/locales/sv/app.json
@@ -0,0 +1 @@
+{}
--- a/public/locales/tr/app.json
+++ b/public/locales/tr/app.json
@@ -6,7 +6,6 @@
  "Call link copied": "Arama bağlantısı kopyalandı",
  "Call type menu": "Arama tipi menüsü",
  "Camera": "Kamera",
-  "Change layout": "Yerleşimi değiştir",
  "Close": "Kapat",
  "Confirm password": "Parolayı tekrar edin",
  "Copied!": "Kopyalandı",
@@ -14,26 +13,18 @@
  "Create account": "Hesap aç",
  "Debug log": "Hata ayıklama kütüğü",
  "Debug log request": "Hata ayıklama kütük istemi",
-  "Details": "Ayrıntı",
  "Developer": "Geliştirici",
  "Display name": "Ekran adı",
  "Download debug logs": "Hata ayıklama kütüğünü indir",
  "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ü",
  "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…": "Yükleniyor…",
  "Local volume": "Yerel ses seviyesi",
  "Logging in…": "Giriliyor…",
@@ -41,11 +32,9 @@
  "Login to your account": "Hesabınıza girin",
  "Microphone": "Mikrofon",
  "More": "Daha",
-  "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ı",
  "Recaptcha dismissed": "reCAPTCHA atlandı",
@@ -62,11 +51,9 @@
  "Show call inspector": "Arama denetçisini göster",
  "Sign in": "Gir",
  "Sign out": "Çık",
-  "Stop sharing screen": "Ekran paylaşmayı terk et",
  "Submit feedback": "Geri bildirim ver",
  "Take me Home": "Ev ekranına gir",
  "This call already exists, would you like to join?": "Bu arama zaten var, katılmak ister misiniz?",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "<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>"
 }
--- a/public/locales/uk/app.json
+++ b/public/locales/uk/app.json
@@ -2,7 +2,6 @@
  "Loading…": "Завантаження…",
  "Your recent calls": "Ваші недавні виклики",
  "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…": "Очікування на інших учасників…",
@@ -12,13 +11,9 @@
  "Version: {{version}}": "Версія: {{version}}",
  "Username": "Ім'я користувача",
  "User menu": "Меню користувача",
-  "Unmute microphone": "Увімкнути мікрофон",
-  "Turn on camera": "Увімкнути камеру",
-  "Turn off camera": "Вимкнути камеру",
  "This call already exists, would you like to join?": "Цей виклик уже існує, бажаєте приєднатися?",
  "Take me Home": "Перейти до Домівки",
  "Submit feedback": "Надіслати відгук",
-  "Stop sharing screen": "Припинити показ екрана",
  "Spotlight": "У центрі уваги",
  "Speaker": "Динамік",
  "Sign out": "Вийти",
@@ -39,38 +34,27 @@
  "Profile": "Профіль",
  "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": "Докладніше",
  "Microphone": "Мікрофон",
  "Login to your account": "Увійдіть до свого облікового запису",
  "Login": "Увійти",
  "Logging in…": "Вхід…",
  "Local volume": "Локальна гучність",
-  "Leave": "Вийти",
  "Join existing call?": "Приєднатися до наявного виклику?",
  "Join call now": "Приєднатися до виклику зараз",
  "Join call": "Приєднатися до виклику",
-  "Invite people": "Запросити людей",
-  "Invite": "Запросити",
  "Inspector": "Інспектор",
-  "Incompatible versions!": "Несумісні версії!",
-  "Incompatible versions": "Несумісні версії",
  "Include debug logs": "Долучити журнали налагодження",
  "Home": "Домівка",
-  "Grid layout menu": "Меню у вигляді сітки",
  "Go": "Далі",
  "Full screen": "Повноекранний режим",
-  "Freedom": "Свобода",
-  "Fetching group call timed out.": "Вичерпано час очікування групового виклику.",
  "Exit full screen": "Вийти з повноекранного режиму",
  "Download debug logs": "Завантажити журнали налагодження",
  "Display name": "Псевдонім",
  "Developer": "Розробнику",
-  "Details": "Подробиці",
  "Debug log request": "Запит журналу налагодження",
  "Debug log": "Журнал налагодження",
  "Create account": "Створити обліковий запис",
@@ -78,7 +62,6 @@
  "Copied!": "Скопійовано!",
  "Confirm password": "Підтвердити пароль",
  "Close": "Закрити",
-  "Change layout": "Змінити макет",
  "Camera": "Камера",
  "Call type menu": "Меню типу виклику",
  "Call link copied": "Посилання на виклик скопійовано",
@@ -88,7 +71,6 @@
  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Чому б не завершити, налаштувавши пароль для збереження свого облікового запису?</0><1>Ви зможете зберегти своє ім'я та встановити аватарку для подальшого користування під час майбутніх викликів</1>",
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Створити обліковий запис</0> або <2>Отримати доступ як гість</2>",
  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Уже маєте обліковий запис?</0><1><0>Увійти</0> Or <2>Отримати доступ як гість</2></1>",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Приєднатися до виклику зараз</0><1>Or</1><2>Скопіювати посилання на виклик і приєднатися пізніше</2>",
  "Element Call Home": "Домівка Element Call",
  "Copy": "Копіювати",
@@ -105,7 +87,7 @@
  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Якщо у вас виникли проблеми або ви просто хочете залишити відгук, надішліть нам короткий опис нижче.",
  "Feedback": "Відгук",
  "<0>Thanks for your feedback!</0>": "<0>Дякуємо за ваш відгук!</0>",
-  "{{count}} stars|one": "{{count}} зірка",
+  "{{count}} stars|one": "{{count}} зірок",
  "{{count}} stars|other": "{{count}} зірок",
  "{{displayName}}, your call has ended.": "{{displayName}}, ваш виклик завершено.",
  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Ми будемо раді почути ваші відгуки, щоб поліпшити роботу застосунку.</0>",
@@ -123,5 +105,19 @@
  "Thanks!": "Дякуємо!",
  "Enable end-to-end encryption (password protected calls)": "Увімкнути наскрізне шифрування (захищені паролем виклики)",
  "End-to-end encryption isn't supported on your browser.": "Наскрізне шифрування не підтримується вашим переглядачем.",
-  "Password (if none, E2EE is disabled)": "Пароль (якщо немає, наскрізне шифрування вимкнено)"
+  "{{count, number}}|other": "{{count, number}}",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
+  "Encrypted": "Зашифровано",
+  "Microphone on": "Мікрофон увімкнено",
+  "Not encrypted": "Не зашифровано",
+  "Share": "Поділитися",
+  "Sharing screen": "Презентація екрана",
+  "Video off": "Відео вимкнено",
+  "Video on": "Відео ввімкнено",
+  "{{count, number}}|one": "{{count, number}}",
+  "End call": "Завершити виклик",
+  "Grid": "Сітка",
+  "Microphone off": "Мікрофон вимкнено",
+  "Share this call": "Поділитися цим викликом",
+  "You": "Ви"
 }
--- a/public/locales/vi/app.json
+++ b/public/locales/vi/app.json
@@ -1,7 +1,6 @@
 {
  "Login": "Đăng nhập",
  "Join call": "Tham gia cuộc gọi",
-  "Mute microphone": "Tắt micrô",
  "Password": "Mật khẩu",
  "Settings": "Cài đặt",
  "Sending…": "Đang gửi…",
@@ -14,21 +13,15 @@
  "Yes, join call": "Vâng, tham gia cuộc gọi",
  "Your feedback": "Phản hồi của bạn",
  "Your recent calls": "Cuộc gọi gần đây",
-  "WebRTC is not supported or is being blocked in this browser.": "WebRTC không được hỗ trợ hay bị chặn trong trình duyệt này.",
  "Waiting for other participants…": "Đang đợi những người khác…",
  "Version: {{version}}": "Phiên bản: {{version}}",
-  "Turn on camera": "Bật máy quay",
-  "Turn off camera": "Tắt máy quay",
  "Submit feedback": "Gửi phản hồi",
-  "Stop sharing screen": "Ngừng chia sẻ màn hình",
  "Speaker": "Loa",
  "Sign out": "Đăng xuất",
  "Share screen": "Chia sẻ màn hình",
  "No": "Không",
-  "Invite people": "Mời mọi người",
  "Join call now": "Tham gia cuộc gọi",
  "Create account": "Tạo tài khoản",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Tạo tài khoản</0> Hay <2>Tham gia dưới tên khác</2>",
  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Tham gia cuộc gọi</0><1>hay</1><2>Sao chép liên kết cuộc gọi và tham gia sau</2>",
  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Gửi nhật ký gỡ lỗi sẽ giúp chúng tôi theo dõi vấn đề.</0>",
@@ -39,23 +32,17 @@
  "Copied!": "Đã sao chép!",
  "Confirm password": "Xác nhận mật khẩu",
  "Close": "Đóng",
-  "Change layout": "Thay đổi bố cục",
  "Debug log": "Nhật ký gỡ lỗi",
  "Copy": "Sao chép",
  "Copy and share this call link": "Sao chép và chia sẻ liên kết cuộc gọi này",
  "Display name": "Tên hiển thị",
  "Developer Settings": "Cài đặt phát triển",
  "Developer": "Nhà phát triển",
-  "Details": "Chi tiết",
  "Download debug logs": "Tải xuống nhật ký gỡ lỗi",
  "Feedback": "Phản hồi",
  "Full screen": "Toàn màn hình",
-  "Incompatible versions!": "Phiên bản không tương thích!",
-  "Incompatible versions": "Phiên bản không tương thích",
  "Include debug logs": "Kèm theo nhật ký gỡ lỗi",
-  "Invite": "Mời",
  "Join existing call?": "Tham gia cuộc gọi?",
-  "Leave": "Rời",
  "Loading…": "Đang tải…",
  "Logging in…": "Đang đăng nhập…",
  "Login to your account": "Đăng nhập vào tài khoản của bạn",
@@ -72,7 +59,6 @@
  "Exit full screen": "Rời chế độ toàn màn hình",
  "Profile": "Hồ sơ",
  "Registering…": "Đang đăng ký…",
-  "Unmute microphone": "Bật micrô",
  "This call already exists, would you like to join?": "Cuộc gọi đã tồn tại, bạn có muốn tham gia không?",
  "Recaptcha not loaded": "Chưa tải được Recaptcha",
  "Debug log request": "Yêu cầu nhật ký gỡ lỗi",
--- a/public/locales/zh-Hans/app.json
+++ b/public/locales/zh-Hans/app.json
@@ -1,7 +1,6 @@
 {
  "Your recent calls": "最近通话",
  "Yes, join call": "是，加入通话",
-  "WebRTC is not supported or is being blocked in this browser.": "此浏览器不支持WebRTC或WebRTC被浏览器阻止。",
  "Walkie-talkie call name": "对讲机通话名称",
  "Walkie-talkie call": "对讲机通话",
  "Waiting for other participants…": "等待其他参与者……",
@@ -11,13 +10,9 @@
  "Version: {{version}}": "版本：{{version}}",
  "Username": "用户名",
  "User menu": "用户菜单",
-  "Unmute microphone": "取消麦克风静音",
-  "Turn on camera": "开启摄像头",
-  "Turn off camera": "关闭摄像头",
  "This call already exists, would you like to join?": "该通话已存在，你想加入吗？",
  "Take me Home": "返回主页",
  "Submit feedback": "提交反馈",
-  "Stop sharing screen": "停止屏幕共享",
  "Spotlight": "聚焦模式",
  "Speaker": "发言人",
  "Sign out": "注销登录",
@@ -28,7 +23,6 @@
  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>现在加入通话</0><1>或</1><2>复制通话链接并稍后加入</2>",
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>创建账户</0> 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>",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "Inspector": "检查器",
  "Show call inspector": "显示通话检查器",
  "Share screen": "屏幕共享",
@@ -46,11 +40,9 @@
  "Profile": "个人信息",
  "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": "更多",
  "Microphone": "麦克风",
  "Login to your account": "登录你的账户",
@@ -58,27 +50,18 @@
  "Logging in…": "登录中……",
  "Local volume": "本地音量",
  "Loading…": "加载中……",
-  "Leave": "离开",
  "Join existing call?": "加入现有的通话？",
  "Join call now": "现在加入通话",
  "Join call": "加入通话",
-  "Invite people": "邀请他人",
-  "Invite": "邀请",
-  "Incompatible versions!": "版本不兼容！",
-  "Incompatible versions": "不兼容版本",
  "Include debug logs": "包含调试日志",
  "Home": "主页",
-  "Grid layout menu": "网格布局菜单",
  "Go": "开始",
  "Full screen": "全屏",
-  "Freedom": "自由模式",
-  "Fetching group call timed out.": "获取群组通话超时。",
  "Exit full screen": "退出全屏",
  "Element Call Home": "Element Call 主页",
  "Download debug logs": "下载调试日志",
  "Display name": "显示名称",
  "Developer": "开发者",
-  "Details": "详情",
  "Debug log request": "调试日志请求",
  "Debug log": "调试日志",
  "Create account": "创建账户",
@@ -87,7 +70,6 @@
  "Copied!": "已复制！",
  "Confirm password": "确认密码",
  "Close": "关闭",
-  "Change layout": "更改布局",
  "Camera": "摄像头",
  "Call type menu": "通话类型菜单",
  "Call link copied": "链接已复制",
--- a/public/locales/zh-Hant/app.json
+++ b/public/locales/zh-Hant/app.json
@@ -2,14 +2,12 @@
  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>現在加入通話</0><1>或</1><2>複製通話連結，稍後再加入</2>",
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>建立帳號</0> 或<2>以訪客身份登入</2>",
  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>已經有帳號?</0><1><0>登入</0> 或<2>以訪客身份登入</2></1>",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "Expose developer settings in the settings window.": "在設定視窗中顯示開發者設定。",
  "Developer Settings": "開發者設定",
  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>送出除錯紀錄，可幫助我們修正問題。</0>",
  "<0>Oops, something's gone wrong.</0>": "<0>喔喔，有些地方怪怪的。</0>",
  "Your recent calls": "您最近的通話",
  "Yes, join call": "是，加入對話",
-  "WebRTC is not supported or is being blocked in this browser.": "此瀏覽器未支援 WebRTC 或 WebRTC 被瀏覽器封鎖。",
  "Walkie-talkie call name": "對講機式通話名稱",
  "Walkie-talkie call": "即時通話",
  "Waiting for other participants…": "等待其他參加者…",
@@ -19,13 +17,9 @@
  "Version: {{version}}": "版本： {{version}}",
  "Username": "使用者名稱",
  "User menu": "使用者選單",
-  "Unmute microphone": "取消麥克風靜音",
-  "Turn on camera": "開啟相機",
-  "Turn off camera": "關閉相機",
  "This call already exists, would you like to join?": "通話已經開始，請問您要加入嗎？",
  "Take me Home": "帶我回主畫面",
  "Submit feedback": "遞交回覆",
-  "Stop sharing screen": "停止分享螢幕畫面",
  "Spotlight": "聚焦",
  "Speaker": "發言者",
  "Sign out": "登出",
@@ -46,11 +40,9 @@
  "Profile": "個人檔案",
  "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": "更多",
  "Microphone": "麥克風",
  "Login to your account": "登入您的帳號",
@@ -58,28 +50,19 @@
  "Logging in…": "登入中…",
  "Local volume": "您的音量",
  "Loading…": "載入中…",
-  "Leave": "離開",
  "Join existing call?": "加入已開始的通話嗎？",
  "Join call now": "現在加入通話",
  "Join call": "加入通話",
-  "Invite people": "邀請夥伴",
-  "Invite": "邀請",
  "Inspector": "稽查員",
-  "Incompatible versions!": "不相容版本！",
-  "Incompatible versions": "不相容版本",
  "Include debug logs": "包含除錯紀錄",
  "Home": "首頁",
-  "Grid layout menu": "格框式清單",
  "Go": "前往",
  "Full screen": "全螢幕",
-  "Freedom": "自由",
-  "Fetching group call timed out.": "加入群組對話已逾時。",
  "Exit full screen": "退出全螢幕",
  "Element Call Home": "Element Call 首頁",
  "Download debug logs": "下載偵錯報告",
  "Display name": "顯示名稱",
  "Developer": "開發者",
-  "Details": "詳細說明",
  "Debug log request": "請求偵錯報告",
  "Debug log": "除錯紀錄",
  "Create account": "建立帳號",
@@ -88,7 +71,6 @@
  "Copied!": "已複製！",
  "Confirm password": "確認密碼",
  "Close": "關閉",
-  "Change layout": "變更排列",
  "Camera": "相機",
  "Call type menu": "通話類型選單",
  "Call link copied": "已複製通話連結",
@@ -123,5 +105,19 @@
  "You were disconnected from the call": "您已從通話斷線",
  "Enable end-to-end encryption (password protected calls)": "啟用端到端加密（密碼保護通話）",
  "End-to-end encryption isn't supported on your browser.": "您的瀏覽器不支援端到端加密。",
-  "Password (if none, E2EE is disabled)": "密碼（若無，就會停用端到端加密）"
+  "{{count, number}}|one": "{{count, number}}",
+  "{{count, number}}|other": "{{count, number}}",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
+  "Encrypted": "已加密",
+  "End call": "結束通話",
+  "Grid": "網格",
+  "Microphone off": "麥克風關閉",
+  "Microphone on": "麥克風開啟",
+  "Not encrypted": "未加密",
+  "Share": "分享",
+  "Share this call": "分享此通話",
+  "Sharing screen": "分享畫面",
+  "Video off": "視訊關閉",
+  "Video on": "視訊開啟",
+  "You": "您"
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,7 +15,12 @@ limitations under the License.
 */

 import { Suspense, useEffect, useState } from "react";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  useLocation,
+} from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { OverlayProvider } from "@react-aria/overlays";
 import { History } from "history";
@@ -25,7 +30,6 @@ import { LoginPage } from "./auth/LoginPage";
 import { RegisterPage } from "./auth/RegisterPage";
 import { RoomPage } from "./room/RoomPage";
 import { ClientProvider } from "./ClientContext";
-import { usePageFocusStyle } from "./usePageFocusStyle";
 import { SequenceDiagramViewerPage } from "./SequenceDiagramViewerPage";
 import { InspectorContextProvider } from "./room/GroupCallInspector";
 import { CrashView, LoadingView } from "./FullScreenView";
@@ -35,6 +39,26 @@ import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";

 const SentryRoute = Sentry.withSentryRouting(Route);

+interface BackgroundProviderProps {
+  children: JSX.Element;
+}
+
+const BackgroundProvider = ({ children }: BackgroundProviderProps) => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    let backgroundImage = "";
+    if (!["/login", "/register"].includes(pathname)) {
+      backgroundImage = "var(--background-gradient)";
+    }
+
+    document.getElementsByTagName("body")[0].style.backgroundImage =
+      backgroundImage;
+  }, [pathname]);
+
+  return <>{children}</>;
+};
+
 interface AppProps {
  history: History;
 }
@@ -48,48 +72,48 @@ export default function App({ history }: AppProps) {
    });
  });

-  usePageFocusStyle();
-
  const errorPage = <CrashView />;

  return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    <Router history={history}>
-      {loaded ? (
-        <Suspense fallback={null}>
-          <ClientProvider>
-            <MediaDevicesProvider>
-              <InspectorContextProvider>
-                <Sentry.ErrorBoundary fallback={errorPage}>
-                  <OverlayProvider>
-                    <DisconnectedBanner />
-                    <Switch>
-                      <SentryRoute exact path="/">
-                        <HomePage />
-                      </SentryRoute>
-                      <SentryRoute exact path="/login">
-                        <LoginPage />
-                      </SentryRoute>
-                      <SentryRoute exact path="/register">
-                        <RegisterPage />
-                      </SentryRoute>
-                      <SentryRoute path="/inspector">
-                        <SequenceDiagramViewerPage />
-                      </SentryRoute>
-                      <SentryRoute path="*">
-                        <RoomPage />
-                      </SentryRoute>
-                    </Switch>
-                  </OverlayProvider>
-                </Sentry.ErrorBoundary>
-              </InspectorContextProvider>
-            </MediaDevicesProvider>
-          </ClientProvider>
-        </Suspense>
-      ) : (
-        <LoadingView />
-      )}
+      <BackgroundProvider>
+        {loaded ? (
+          <Suspense fallback={null}>
+            <ClientProvider>
+              <MediaDevicesProvider>
+                <InspectorContextProvider>
+                  <Sentry.ErrorBoundary fallback={errorPage}>
+                    <OverlayProvider>
+                      <DisconnectedBanner />
+                      <Switch>
+                        <SentryRoute exact path="/">
+                          <HomePage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/login">
+                          <LoginPage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/register">
+                          <RegisterPage />
+                        </SentryRoute>
+                        <SentryRoute path="/inspector">
+                          <SequenceDiagramViewerPage />
+                        </SentryRoute>
+                        <SentryRoute path="*">
+                          <RoomPage />
+                        </SentryRoute>
+                      </Switch>
+                    </OverlayProvider>
+                  </Sentry.ErrorBoundary>
+                </InspectorContextProvider>
+              </MediaDevicesProvider>
+            </ClientProvider>
+          </Suspense>
+        ) : (
+          <LoadingView />
+        )}
+      </BackgroundProvider>
    </Router>
  );
 }
--- a/src/Glass.module.css
+++ b/src/Glass.module.css
@@ -0,0 +1,31 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.glass {
+  border-radius: 36px;
+  padding: 11px;
+  border: 1px solid var(--cpd-color-alpha-gray-400);
+  background: var(--cpd-color-alpha-gray-400);
+  backdrop-filter: blur(10px);
+}
+
+.glass > * {
+  border-radius: 24px;
+}
+
+.glass.frosted {
+  backdrop-filter: blur(20px);
+}
--- a/src/Glass.tsx
+++ b/src/Glass.tsx
@@ -0,0 +1,52 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  ComponentPropsWithoutRef,
+  ReactNode,
+  forwardRef,
+  Children,
+} from "react";
+import classNames from "classnames";
+
+import styles from "./Glass.module.css";
+
+interface Props extends ComponentPropsWithoutRef<"div"> {
+  children: ReactNode;
+  className?: string;
+  /**
+   * Increases the blur effect.
+   * @default false
+   */
+  frosted?: boolean;
+}
+
+/**
+ * Adds a border of glass around a child component.
+ */
+export const Glass = forwardRef<HTMLDivElement, Props>(
+  ({ frosted = false, children, className, ...rest }, ref) => (
+    <div
+      ref={ref}
+      className={classNames(className, styles.glass, {
+        [styles.frosted]: frosted,
+      })}
+      {...rest}
+    >
+      {Children.only(children)}
+    </div>
+  )
+);
--- a/src/IncompatibleVersionModal.tsx
+++ b/src/IncompatibleVersionModal.tsx
@@ -1,60 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { Room } from "matrix-js-sdk/src/models/room";
-import { FC, useMemo } from "react";
-import { Trans, useTranslation } from "react-i18next";
-
-import { Modal, ModalContent } from "./Modal";
-import { Body } from "./typography/Typography";
-
-interface Props {
-  userIds: Set<string>;
-  room: Room;
-  onClose: () => void;
-}
-
-export const IncompatibleVersionModal: FC<Props> = ({
-  userIds,
-  room,
-  onClose,
-  ...rest
-}) => {
-  const { t } = useTranslation();
-  const userLis = useMemo(
-    () => [...userIds].map((u) => <li>{room.getMember(u)?.name ?? u}</li>),
-    [userIds, room]
-  );
-
-  return (
-    <Modal
-      title={t("Incompatible versions")}
-      isDismissable
-      onClose={onClose}
-      {...rest}
-    >
-      <ModalContent>
-        <Body>
-          <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>
-  );
-};
--- a/src/Modal.module.css
+++ b/src/Modal.module.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,77 +14,204 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.modalOverlay {
+.overlay {
  position: fixed;
  z-index: 100;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: rgba(23, 25, 28, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  inset: 0;
+  background: rgba(3, 12, 27, 0.528);
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.dialogOverlay[data-state="open"] {
+  animation: fade-in 200ms;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.dialogOverlay[data-state="closed"] {
+  animation: fade-out 130ms;
 }

 .modal {
-  background: var(--cpd-color-bg-subtle-secondary);
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: 8px;
-  max-width: 90vw;
-  width: 600px;
+  position: fixed;
+  z-index: 101;
  display: flex;
  flex-direction: column;
 }

-.modalHeader {
-  display: flex;
-  justify-content: space-between;
-  padding: 34px 32px 0 32px;
+.dialog {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  inline-size: 520px;
+  max-inline-size: 90%;
+  max-block-size: 600px;
 }

-.modalHeader h3 {
-  font-weight: 600;
-  font-size: var(--font-size-title);
-  margin: 0;
+@keyframes zoom-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(80%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(100%);
+  }
 }

-.closeButton {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: transparent;
-  padding: 0;
-  border: none;
-  cursor: pointer;
+@keyframes zoom-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(100%);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(80%);
+  }
+}
+
+.dialog[data-state="open"] {
+  animation: zoom-in 200ms;
+}
+
+.dialog[data-state="closed"] {
+  animation: zoom-out 130ms;
+}
+
+@media (prefers-reduced-motion) {
+  .dialog[data-state="open"] {
+    animation-name: fade-in;
+  }
+
+  .dialog[data-state="closed"] {
+    animation-name: fade-out;
+  }
 }

 .content {
-  padding: 24px 32px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }

-.content p {
-  margin-top: 0;
+.dialog .content {
+  flex-grow: 1;
+  background: var(--cpd-color-bg-canvas-default);
 }

-@media (max-width: 799px) {
-  .modalHeader {
-    display: flex;
-    justify-content: space-between;
-    padding: 32px 20px 0 20px;
-  }
+.drawer .content {
+  overflow: auto;
+}

-  .modal.mobileFullScreen {
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    max-width: none;
-    max-height: none;
-    border-radius: 0;
+.drawer {
+  background: var(--cpd-color-bg-canvas-default);
+  inset-block-end: 0;
+  inset-inline: max(0px, calc((100% - 520px) / 2));
+  max-block-size: 90%;
+  border-start-start-radius: 20px;
+  border-start-end-radius: 20px;
+  /* Drawer handle comes in the Android style by default */
+  --handle-block-size: 4px;
+  --handle-inline-size: 32px;
+  --handle-inset-block-start: var(--cpd-space-4x);
+  --handle-inset-block-end: var(--cpd-space-4x);
+}
+
+body[data-platform="ios"] .drawer {
+  --handle-block-size: 5px;
+  --handle-inline-size: 36px;
+  --handle-inset-block-start: var(--cpd-space-1-5x);
+  --handle-inset-block-end: calc(var(--cpd-space-1x) / 4);
+}
+
+.close {
+  cursor: pointer;
+  color: var(--cpd-color-icon-secondary);
+  border-radius: var(--cpd-radius-pill-effect);
+  padding: var(--cpd-space-1x);
+  background: var(--cpd-color-bg-subtle-secondary);
+  border: none;
+}
+
+.close svg {
+  display: block;
+}
+
+@media (hover: hover) {
+  .close:hover {
+    background: var(--cpd-color-bg-subtle-primary);
+    color: var(--cpd-color-icon-primary);
  }
 }
+
+.close:active {
+  background: var(--cpd-color-bg-subtle-primary);
+  color: var(--cpd-color-icon-primary);
+}
+
+.header {
+  background: var(--cpd-color-bg-subtle-secondary);
+  display: grid;
+}
+
+.dialog .header {
+  padding-block-start: var(--cpd-space-4x);
+  grid-template-columns:
+    var(--cpd-space-10x) 1fr minmax(var(--cpd-space-6x), auto)
+    var(--cpd-space-4x);
+  grid-template-rows: auto minmax(var(--cpd-space-4x), auto);
+  /* TODO: Support tabs */
+  grid-template-areas: ". title close ." "tabs tabs tabs tabs";
+  align-items: center;
+}
+
+.dialog .header h2 {
+  grid-area: title;
+  margin: 0;
+}
+
+.drawer .header {
+  grid-template-areas: "tabs";
+  position: relative;
+}
+
+.close {
+  grid-area: close;
+}
+
+.dialog .body {
+  padding-inline: var(--cpd-space-10x);
+  padding-block: var(--cpd-space-10x) var(--cpd-space-12x);
+  overflow: auto;
+}
+
+.drawer .body {
+  padding-inline: var(--cpd-space-4x);
+  padding-block: var(--cpd-space-9x) var(--cpd-space-10x);
+}
+
+.handle {
+  content: "";
+  position: absolute;
+  block-size: var(--handle-block-size);
+  inset-inline: calc((100% - var(--handle-inline-size)) / 2);
+  inset-block-start: var(--handle-inset-block-start);
+  background: var(--cpd-color-icon-secondary);
+  border-radius: var(--cpd-radius-pill-effect);
+}
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2023 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,123 +14,128 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-/* eslint-disable jsx-a11y/no-autofocus */
-
-import { useRef, useMemo, ReactNode } from "react";
-import {
-  useOverlay,
-  usePreventScroll,
-  useModal,
-  OverlayContainer,
-  OverlayProps,
-} from "@react-aria/overlays";
-import {
-  OverlayTriggerState,
-  useOverlayTriggerState,
-} from "@react-stately/overlays";
-import { useDialog } from "@react-aria/dialog";
-import { FocusScope } from "@react-aria/focus";
-import { useButton } from "@react-aria/button";
-import classNames from "classnames";
+import { ReactNode, useCallback } from "react";
 import { AriaDialogProps } from "@react-types/dialog";
 import { useTranslation } from "react-i18next";
+import {
+  Root as DialogRoot,
+  Portal as DialogPortal,
+  Overlay as DialogOverlay,
+  Content as DialogContent,
+  Title as DialogTitle,
+  Close as DialogClose,
+} from "@radix-ui/react-dialog";
+import { Drawer } from "vaul";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { ReactComponent as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
+import classNames from "classnames";
+import { Heading } from "@vector-im/compound-web";

-import { ReactComponent as CloseIcon } from "./icons/Close.svg";
 import styles from "./Modal.module.css";
+import { useMediaQuery } from "./useMediaQuery";
+import { Glass } from "./Glass";

-export interface ModalProps extends OverlayProps, AriaDialogProps {
+// TODO: Support tabs
+export interface ModalProps extends AriaDialogProps {
  title: string;
  children: ReactNode;
  className?: string;
-  mobileFullScreen?: boolean;
-  onClose: () => void;
+  /**
+   * The controlled open state of the modal.
+   */
+  // An option to leave the open state uncontrolled is intentionally not
+  // provided, since modals are always opened due to external triggers, and it
+  // is the author's belief that controlled components lead to more obvious code.
+  open: boolean;
+  /**
+   * Callback for when the user dismisses the modal. If undefined, the modal
+   * will be non-dismissable.
+   */
+  onDismiss?: () => void;
 }

+/**
+ * A modal, taking the form of a drawer / bottom sheet on touchscreen devices,
+ * and a dialog box on desktop.
+ */
 export function Modal({
  title,
  children,
  className,
-  mobileFullScreen,
-  onClose,
+  open,
+  onDismiss,
  ...rest
 }: ModalProps) {
  const { t } = useTranslation();
-  const modalRef = useRef(null);
-  const { overlayProps, underlayProps } = useOverlay(
-    { ...rest, onClose },
-    modalRef
-  );
-  usePreventScroll();
-  const { modalProps } = useModal();
-  const { dialogProps, titleProps } = useDialog(rest, modalRef);
-  const closeButtonRef = useRef(null);
-  const { buttonProps: closeButtonProps } = useButton(
-    {
-      onPress: () => onClose(),
+  const touchscreen = useMediaQuery("(hover: none)");
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) onDismiss?.();
    },
-    closeButtonRef
+    [onDismiss]
  );

-  return (
-    <OverlayContainer>
-      <div className={styles.modalOverlay} {...underlayProps}>
-        <FocusScope contain restoreFocus autoFocus>
-          <div
-            {...overlayProps}
-            {...dialogProps}
-            {...modalProps}
-            ref={modalRef}
-            className={classNames(
-              styles.modal,
-              { [styles.mobileFullScreen]: mobileFullScreen },
-              className
-            )}
+  if (touchscreen) {
+    return (
+      <Drawer.Root
+        open={open}
+        onOpenChange={onOpenChange}
+        dismissible={onDismiss !== undefined}
+      >
+        <Drawer.Portal>
+          <Drawer.Overlay className={styles.overlay} />
+          <Drawer.Content
+            className={classNames(className, styles.modal, styles.drawer)}
+            {...rest}
          >
-            <div className={styles.modalHeader}>
-              <h3 {...titleProps}>{title}</h3>
-              <button
-                {...closeButtonProps}
-                ref={closeButtonRef}
-                className={styles.closeButton}
-                data-testid="modal_close"
-                title={t("Close")}
-              >
-                <CloseIcon />
-              </button>
+            <div className={styles.content}>
+              <div className={styles.header}>
+                <div className={styles.handle} />
+                <VisuallyHidden asChild>
+                  <Drawer.Title>{title}</Drawer.Title>
+                </VisuallyHidden>
+              </div>
+              <div className={styles.body}>{children}</div>
            </div>
-            {children}
-          </div>
-        </FocusScope>
-      </div>
-    </OverlayContainer>
-  );
-}
-
-interface ModalContentProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export function ModalContent({
-  children,
-  className,
-  ...rest
-}: ModalContentProps) {
-  return (
-    <div className={classNames(styles.content, className)} {...rest}>
-      {children}
-    </div>
-  );
-}
-
-export function useModalTriggerState(): {
-  modalState: OverlayTriggerState;
-  modalProps: { isOpen: boolean; onClose: () => void };
-} {
-  const modalState = useOverlayTriggerState({});
-  const modalProps = useMemo(
-    () => ({ isOpen: modalState.isOpen, onClose: modalState.close }),
-    [modalState]
-  );
-  return { modalState, modalProps };
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    );
+  } else {
+    return (
+      <DialogRoot open={open} onOpenChange={onOpenChange}>
+        <DialogPortal>
+          <DialogOverlay
+            className={classNames(styles.overlay, styles.dialogOverlay)}
+          />
+          <DialogContent asChild {...rest}>
+            <Glass
+              frosted
+              className={classNames(className, styles.modal, styles.dialog)}
+            >
+              <div className={styles.content}>
+                <div className={styles.header}>
+                  <DialogTitle asChild>
+                    <Heading as="h2" weight="semibold" size="md">
+                      {title}
+                    </Heading>
+                  </DialogTitle>
+                  {onDismiss !== undefined && (
+                    <DialogClose
+                      className={styles.close}
+                      data-testid="modal_close"
+                      aria-label={t("Close")}
+                    >
+                      <CloseIcon width={20} height={20} />
+                    </DialogClose>
+                  )}
+                </div>
+                <div className={styles.body}>{children}</div>
+              </div>
+            </Glass>
+          </DialogContent>
+        </DialogPortal>
+      </DialogRoot>
+    );
+  }
 }
--- a/src/Platform.ts
+++ b/src/Platform.ts
@@ -0,0 +1,38 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+ * The platform on which the application is running.
+ */
+// The granularity of this value is kind of arbitrary: it distinguishes exactly
+// the platforms that the app needs to know about in order to correctly
+// implement the designs and work around platform-specific browser weirdness.
+// Feel free to increase or decrease that granularity in the future as project
+// requirements change.
+export let platform: "android" | "ios" | "desktop";
+
+if (/android/i.test(navigator.userAgent)) {
+  platform = "android";
+  // We include 'Mac' here and double-check for touch support because iPads on
+  // iOS 13 pretend to be a MacOS desktop
+} else if (
+  /iPad|iPhone|iPod|Mac/.test(navigator.userAgent) &&
+  "ontouchend" in document
+) {
+  platform = "ios";
+} else {
+  platform = "desktop";
+}
--- a/src/UrlParams.ts
+++ b/src/UrlParams.ts
@@ -43,10 +43,6 @@ interface UrlParams {
   * 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.
   */
@@ -94,6 +90,22 @@ interface UrlParams {
  password: string | null;
 }

+export function editFragmentQuery(
+  hash: string,
+  edit: (params: URLSearchParams) => URLSearchParams
+): string {
+  const fragmentQueryStart = hash.indexOf("?");
+  const fragmentParams = edit(
+    new URLSearchParams(
+      fragmentQueryStart === -1 ? "" : hash.substring(fragmentQueryStart)
+    )
+  );
+  return `${hash.substring(
+    0,
+    fragmentQueryStart
+  )}?${fragmentParams.toString()}`;
+}
+
 /**
 * Gets the app parameters for the current URL.
 * @param ignoreRoomAlias If true, does not try to parse a room alias from the URL
@@ -179,7 +191,6 @@ export const getUrlParams = (
    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"),
--- a/src/UserMenuContainer.tsx
+++ b/src/UserMenuContainer.tsx
@@ -19,7 +19,6 @@ import { useHistory, useLocation } from "react-router-dom";

 import { useClientLegacy } from "./ClientContext";
 import { useProfile } from "./profile/useProfile";
-import { useModalTriggerState } from "./Modal";
 import { SettingsModal } from "./settings/SettingsModal";
 import { UserMenu } from "./UserMenu";

@@ -32,7 +31,11 @@ export function UserMenuContainer({ preventNavigation = false }: Props) {
  const history = useHistory();
  const { client, logout, authenticated, passwordlessUser } = useClientLegacy();
  const { displayName, avatarUrl } = useProfile(client);
-  const { modalState, modalProps } = useModalTriggerState();
+  const [settingsModalOpen, setSettingsModalOpen] = useState(false);
+  const onDismissSettingsModal = useCallback(
+    () => setSettingsModalOpen(false),
+    [setSettingsModalOpen]
+  );

  const [defaultSettingsTab, setDefaultSettingsTab] = useState<string>();

@@ -41,11 +44,11 @@ export function UserMenuContainer({ preventNavigation = false }: Props) {
      switch (value) {
        case "user":
          setDefaultSettingsTab("profile");
-          modalState.open();
+          setSettingsModalOpen(true);
          break;
        case "settings":
          setDefaultSettingsTab("audio");
-          modalState.open();
+          setSettingsModalOpen(true);
          break;
        case "logout":
          logout?.();
@@ -55,7 +58,7 @@ export function UserMenuContainer({ preventNavigation = false }: Props) {
          break;
      }
    },
-    [history, location, logout, modalState]
+    [history, location, logout, setSettingsModalOpen]
  );

  const userName = client?.getUserIdLocalpart() ?? "";
@@ -70,11 +73,12 @@ export function UserMenuContainer({ preventNavigation = false }: Props) {
        userId={client?.getUserId() ?? ""}
        displayName={displayName || (userName ? userName.replace("@", "") : "")}
      />
-      {modalState.isOpen && client && (
+      {client && (
        <SettingsModal
          client={client}
          defaultTab={defaultSettingsTab}
-          {...modalProps}
+          open={settingsModalOpen}
+          onDismiss={onDismissSettingsModal}
        />
      )}
    </>
--- a/src/button/Button.module.css
+++ b/src/button/Button.module.css
@@ -50,14 +50,14 @@ limitations under the License.
  background-color: var(--cpd-color-text-action-accent);
 }

-.button:focus,
-.toolbarButton:focus,
-.toolbarButtonSecondary:focus,
-.iconButton:focus,
-.iconCopyButton:focus,
-.secondary:focus,
-.secondaryHangup:focus,
-.copyButton:focus {
+.button:focus-visible,
+.toolbarButton:focus-visible,
+.toolbarButtonSecondary:focus-visible,
+.iconButton:focus-visible,
+.iconCopyButton:focus-visible,
+.secondary:focus-visible,
+.secondaryHangup:focus-visible,
+.copyButton:focus-visible {
  outline: auto;
 }

@@ -74,7 +74,7 @@ limitations under the License.
  background-color: var(--cpd-color-bg-canvas-default);
  color: var(--cpd-color-icon-primary);
  border: 1px solid var(--cpd-color-gray-400);
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  box-shadow: var(--subtle-drop-shadow);
 }

 .toolbarButton.on,
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -145,11 +145,11 @@ export function MicButton({
 }) {
  const { t } = useTranslation();
  const Icon = muted ? MicOffSolidIcon : MicOnSolidIcon;
-  const label = muted ? t("Microphone off") : t("Microphone on");
+  const label = muted ? t("Unmute microphone") : t("Mute microphone");

  return (
    <Tooltip label={label}>
-      <Button variant="toolbar" {...rest} on={!muted}>
+      <Button variant="toolbar" {...rest} on={muted}>
        <Icon aria-label={label} />
      </Button>
    </Tooltip>
@@ -166,11 +166,11 @@ export function VideoButton({
 }) {
  const { t } = useTranslation();
  const Icon = muted ? VideoCallOffIcon : VideoCallIcon;
-  const label = muted ? t("Video off") : t("Video on");
+  const label = muted ? t("Start video") : t("Stop video");

  return (
    <Tooltip label={label}>
-      <Button variant="toolbar" {...rest} on={!muted}>
+      <Button variant="toolbar" {...rest} on={muted}>
        <Icon aria-label={label} />
      </Button>
    </Tooltip>
--- a/src/graphics/backgroundGradient.svg
+++ b/src/graphics/backgroundGradient.svg
@@ -0,0 +1,16 @@
+<svg width="1440" height="800" viewBox="0 0 1440 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_4162_80259)">
+<path d="M-37.0486 666.028C267.76 138.867 944.304 -46.1945 1477.05 260.929" stroke="url(#paint0_linear_4162_80259)" stroke-width="192" stroke-linecap="round"/>
+</g>
+<defs>
+<filter id="filter0_f_4162_80259" x="-333.118" y="-183.694" width="2106.24" height="1145.68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_4162_80259"/>
+</filter>
+<linearGradient id="paint0_linear_4162_80259" x1="1255.31" y1="320.254" x2="184.899" y2="607.497" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00C59E"/>
+<stop offset="0.75" stop-color="#0044A5"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/graphics/loggedOutGradient.svg
+++ b/src/graphics/loggedOutGradient.svg
@@ -0,0 +1,48 @@
+<svg width="1440" height="500" viewBox="0 0 1440 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_4162_80135)">
+<circle cx="720" cy="1620" r="1500" fill="url(#paint0_linear_4162_80135)"/>
+<circle cx="720" cy="1620" r="1498.92" stroke="white" stroke-opacity="0.5" stroke-width="2.16028" style="mix-blend-mode:overlay"/>
+</g>
+<g filter="url(#filter1_f_4162_80135)">
+<circle cx="720" cy="1550.86" r="1272.86" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_f_4162_80135" x="-900" y="0" width="3240" height="3240" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_4162_80135"/>
+</filter>
+<filter id="filter1_f_4162_80135" x="-672.863" y="158" width="2785.73" height="2785.73" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_4162_80135"/>
+</filter>
+<linearGradient id="paint0_linear_4162_80135" x1="549.5" y1="120" x2="549.5" y2="505.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#062993"/>
+<stop offset="0.040404" stop-color="#02389D"/>
+<stop offset="0.0808081" stop-color="#0045A6"/>
+<stop offset="0.121212" stop-color="#0051AD"/>
+<stop offset="0.161616" stop-color="#005DB4"/>
+<stop offset="0.20202" stop-color="#0069BA"/>
+<stop offset="0.242424" stop-color="#0075BB"/>
+<stop offset="0.282828" stop-color="#0081BB"/>
+<stop offset="0.323232" stop-color="#008CB9"/>
+<stop offset="0.363636" stop-color="#0098B7"/>
+<stop offset="0.40404" stop-color="#00A3B3"/>
+<stop offset="0.444444" stop-color="#00AEAD"/>
+<stop offset="0.484848" stop-color="#00B8A4"/>
+<stop offset="0.525253" stop-color="#00C2A0"/>
+<stop offset="0.565657" stop-color="#00CC99"/>
+<stop offset="0.606061" stop-color="#3AD396"/>
+<stop offset="0.646465" stop-color="#5DD898"/>
+<stop offset="0.686869" stop-color="#79DD99"/>
+<stop offset="0.727273" stop-color="#92E29B"/>
+<stop offset="0.767677" stop-color="#A8E69F"/>
+<stop offset="0.808081" stop-color="#BBEAA5"/>
+<stop offset="0.848485" stop-color="#CDEEAE"/>
+<stop offset="0.888889" stop-color="#DCF2B9"/>
+<stop offset="0.929293" stop-color="#EAF6C7"/>
+<stop offset="0.969697" stop-color="#F5FBD5"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/home/CallTypeDropdown.tsx
+++ b/src/home/CallTypeDropdown.tsx
@@ -1,85 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FC } from "react";
-import { Item } from "@react-stately/collections";
-import { useTranslation } from "react-i18next";
-
-import { Headline } from "../typography/Typography";
-import { Button } from "../button";
-import { PopoverMenuTrigger } from "../popover/PopoverMenu";
-import { ReactComponent as VideoIcon } from "../icons/Video.svg";
-import { ReactComponent as MicIcon } from "../icons/Mic.svg";
-import { ReactComponent as CheckIcon } from "../icons/Check.svg";
-import styles from "./CallTypeDropdown.module.css";
-import commonStyles from "./common.module.css";
-import menuStyles from "../Menu.module.css";
-import { Menu } from "../Menu";
-
-export enum CallType {
-  Video = "video",
-  Radio = "radio",
-}
-
-interface Props {
-  callType: CallType;
-  setCallType: (value: CallType) => void;
-}
-
-export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
-  const { t } = useTranslation();
-
-  const onAction = (key: React.Key) => {
-    setCallType(key.toString() as CallType);
-  };
-
-  const onClose = () => {};
-
-  return (
-    <PopoverMenuTrigger placement="bottom">
-      <Button variant="dropdown" className={commonStyles.headline}>
-        <Headline className={styles.label}>
-          {callType === CallType.Video
-            ? t("Video call")
-            : t("Walkie-talkie call")}
-        </Headline>
-      </Button>
-      {(props: JSX.IntrinsicAttributes) => (
-        <Menu
-          {...props}
-          label={t("Call type menu")}
-          onAction={onAction}
-          onClose={onClose}
-        >
-          <Item key={CallType.Video} textValue={t("Video call")}>
-            <VideoIcon />
-            <span>{t("Video call")}</span>
-            {callType === CallType.Video && (
-              <CheckIcon className={menuStyles.checkIcon} />
-            )}
-          </Item>
-          <Item key={CallType.Radio} textValue={t("Walkie-talkie call")}>
-            <MicIcon />
-            <span>{t("Walkie-talkie call")}</span>
-            {callType === CallType.Radio && (
-              <CheckIcon className={menuStyles.checkIcon} />
-            )}
-          </Item>
-        </Menu>
-      )}
-    </PopoverMenuTrigger>
-  );
-};
--- a/src/home/HomePage.tsx
+++ b/src/home/HomePage.tsx
@@ -34,10 +34,7 @@ export function HomePage() {
    return <ErrorView error={clientState.error} />;
  } else {
    return clientState.authenticated ? (
-      <RegisteredView
-        isPasswordlessUser={clientState.authenticated.isPasswordlessUser}
-        client={clientState.authenticated.client}
-      />
+      <RegisteredView client={clientState.authenticated.client} />
    ) : (
      <UnauthenticatedView />
    );
--- a/src/home/JoinExistingCallModal.tsx
+++ b/src/home/JoinExistingCallModal.tsx
@@ -17,36 +17,29 @@ limitations under the License.
 import { PressEvent } from "@react-types/shared";
 import { useTranslation } from "react-i18next";

-import { Modal, ModalContent } from "../Modal";
+import { Modal } from "../Modal";
 import { Button } from "../button";
 import { FieldRow } from "../input/Input";
 import styles from "./JoinExistingCallModal.module.css";

 interface Props {
+  open: boolean;
+  onDismiss: () => void;
  onJoin: (e: PressEvent) => void;
-  onClose: () => void;
-  // TODO: add used parameters for <Modal>
-  [index: string]: unknown;
 }
-export function JoinExistingCallModal({ onJoin, onClose, ...rest }: Props) {
+
+export function JoinExistingCallModal({ onJoin, open, onDismiss }: Props) {
  const { t } = useTranslation();

  return (
-    <Modal
-      title={t("Join existing call?")}
-      isDismissable
-      {...rest}
-      onClose={onClose}
-    >
-      <ModalContent>
-        <p>{t("This call already exists, would you like to join?")}</p>
-        <FieldRow rightAlign className={styles.buttons}>
-          <Button onPress={onClose}>{t("No")}</Button>
-          <Button onPress={onJoin} data-testid="home_joinExistingRoom">
-            {t("Yes, join call")}
-          </Button>
-        </FieldRow>
-      </ModalContent>
+    <Modal title={t("Join existing call?")} open={open} onDismiss={onDismiss}>
+      <p>{t("This call already exists, would you like to join?")}</p>
+      <FieldRow rightAlign className={styles.buttons}>
+        <Button onPress={onDismiss}>{t("No")}</Button>
+        <Button onPress={onJoin} data-testid="home_joinExistingRoom">
+          {t("Yes, join call")}
+        </Button>
+      </FieldRow>
    </Modal>
  );
 }
--- a/src/home/RegisteredView.tsx
+++ b/src/home/RegisteredView.tsx
@@ -19,6 +19,7 @@ import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useTranslation } from "react-i18next";
+import { Heading } from "@vector-im/compound-web";

 import {
  createRoom,
@@ -33,11 +34,9 @@ import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import { CallList } from "./CallList";
 import { UserMenuContainer } from "../UserMenuContainer";
-import { useModalTriggerState } from "../Modal";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
-import { Caption, Title } from "../typography/Typography";
+import { Caption } from "../typography/Typography";
 import { Form } from "../form/Form";
-import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
 import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { E2EEBanner } from "../E2EEBanner";
@@ -46,17 +45,20 @@ import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";

 interface Props {
  client: MatrixClient;
-  isPasswordlessUser: boolean;
 }

-export function RegisteredView({ client, isPasswordlessUser }: Props) {
-  const [callType, setCallType] = useState(CallType.Video);
+export function RegisteredView({ client }: Props) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error>();
  const [optInAnalytics] = useOptInAnalytics();
  const history = useHistory();
  const { t } = useTranslation();
-  const { modalState, modalProps } = useModalTriggerState();
+  const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] =
+    useState(false);
+  const onDismissJoinExistingCallModal = useCallback(
+    () => setJoinExistingCallModalOpen(false),
+    [setJoinExistingCallModalOpen]
+  );
  const [e2eeEnabled] = useEnableE2EE();

  const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
@@ -68,14 +70,13 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
        typeof roomNameData === "string"
          ? sanitiseRoomNameInput(roomNameData)
          : "";
-      const ptt = callType === CallType.Radio;

      async function submit() {
        setError(undefined);
        setLoading(true);

        const roomId = (
-          await createRoom(client, roomName, ptt, e2eeEnabled ?? false)
+          await createRoom(client, roomName, e2eeEnabled ?? false)
        )[1];

        if (e2eeEnabled) {
@@ -93,7 +94,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
          setExistingAlias(roomAliasLocalpartFromRoomName(roomName));
          setLoading(false);
          setError(undefined);
-          modalState.open();
+          setJoinExistingCallModalOpen(true);
        } else {
          console.error(error);
          setLoading(false);
@@ -101,7 +102,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
        }
      });
    },
-    [client, history, modalState, callType, e2eeEnabled]
+    [client, history, setJoinExistingCallModalOpen, e2eeEnabled]
  );

  const recentRooms = useGroupCallRooms(client);
@@ -111,11 +112,6 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
    history.push(`/${existingAlias}`);
  }, [history, existingAlias]);

-  const callNameLabel =
-    callType === CallType.Video
-      ? t("Video call name")
-      : t("Walkie-talkie call name");
-
  return (
    <>
      <Header>
@@ -129,14 +125,16 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
      <div className={commonStyles.container}>
        <main className={commonStyles.main}>
          <HeaderLogo className={commonStyles.logo} />
-          <CallTypeDropdown callType={callType} setCallType={setCallType} />
+          <Heading size="lg" weight="semibold">
+            {t("Start new call")}
+          </Heading>
          <Form className={styles.form} onSubmit={onSubmit}>
            <FieldRow className={styles.fieldRow}>
              <InputField
                id="callName"
                name="callName"
-                label={callNameLabel}
-                placeholder={callNameLabel}
+                label={t("Name of call")}
+                placeholder={t("Name of call")}
                type="text"
                required
                autoComplete="off"
@@ -166,18 +164,15 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
            )}
          </Form>
          {recentRooms.length > 0 && (
-            <>
-              <Title className={styles.recentCallsTitle}>
-                {t("Your recent calls")}
-              </Title>
-              <CallList rooms={recentRooms} client={client} />
-            </>
+            <CallList rooms={recentRooms} client={client} />
          )}
        </main>
      </div>
-      {modalState.isOpen && (
-        <JoinExistingCallModal onJoin={onJoinExistingRoom} {...modalProps} />
-      )}
+      <JoinExistingCallModal
+        onJoin={onJoinExistingRoom}
+        open={joinExistingCallModalOpen}
+        onDismiss={onDismissJoinExistingCallModal}
+      />
    </>
  );
 }
--- a/src/home/UnauthenticatedView.tsx
+++ b/src/home/UnauthenticatedView.tsx
@@ -18,6 +18,7 @@ import { FC, useCallback, useState, FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Trans, useTranslation } from "react-i18next";
+import { Heading } from "@vector-im/compound-web";

 import { useClient } from "../ClientContext";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
@@ -30,12 +31,10 @@ import {
  sanitiseRoomNameInput,
 } from "../matrix-utils";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
-import { useModalTriggerState } from "../Modal";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { useRecaptcha } from "../auth/useRecaptcha";
 import { Body, Caption, Link } from "../typography/Typography";
 import { Form } from "../form/Form";
-import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
 import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
@@ -48,14 +47,18 @@ import { setLocalStorageItem } from "../useLocalStorage";

 export const UnauthenticatedView: FC = () => {
  const { setClient } = useClient();
-  const [callType, setCallType] = useState(CallType.Video);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error>();
  const [optInAnalytics] = useOptInAnalytics();
  const { recaptchaKey, register } = useInteractiveRegistration();
  const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);

-  const { modalState, modalProps } = useModalTriggerState();
+  const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] =
+    useState(false);
+  const onDismissJoinExistingCallModal = useCallback(
+    () => setJoinExistingCallModalOpen(false),
+    [setJoinExistingCallModalOpen]
+  );
  const [onFinished, setOnFinished] = useState<() => void>();
  const history = useHistory();
  const { t } = useTranslation();
@@ -68,7 +71,6 @@ export const UnauthenticatedView: FC = () => {
      const data = new FormData(e.target as HTMLFormElement);
      const roomName = sanitiseRoomNameInput(data.get("callName") as string);
      const displayName = data.get("displayName") as string;
-      const ptt = callType === CallType.Radio;

      async function submit() {
        setError(undefined);
@@ -86,7 +88,7 @@ export const UnauthenticatedView: FC = () => {
        let roomId: string;
        try {
          roomId = (
-            await createRoom(client, roomName, ptt, e2eeEnabled ?? false)
+            await createRoom(client, roomName, e2eeEnabled ?? false)
          )[1];

          if (e2eeEnabled) {
@@ -110,7 +112,7 @@ export const UnauthenticatedView: FC = () => {
            });

            setLoading(false);
-            modalState.open();
+            setJoinExistingCallModalOpen(true);
            return;
          } else {
            throw error;
@@ -138,18 +140,12 @@ export const UnauthenticatedView: FC = () => {
      reset,
      execute,
      history,
-      callType,
-      modalState,
+      setJoinExistingCallModalOpen,
      setClient,
      e2eeEnabled,
    ]
  );

-  const callNameLabel =
-    callType === CallType.Video
-      ? t("Video call name")
-      : t("Walkie-talkie call name");
-
  return (
    <>
      <Header>
@@ -163,14 +159,16 @@ export const UnauthenticatedView: FC = () => {
      <div className={commonStyles.container}>
        <main className={commonStyles.main}>
          <HeaderLogo className={commonStyles.logo} />
-          <CallTypeDropdown callType={callType} setCallType={setCallType} />
+          <Heading size="lg" weight="semibold">
+            {t("Start new call")}
+          </Heading>
          <Form className={styles.form} onSubmit={onSubmit}>
            <FieldRow>
              <InputField
                id="callName"
                name="callName"
-                label={callNameLabel}
-                placeholder={callNameLabel}
+                label={t("Name of call")}
+                placeholder={t("Name of call")}
                type="text"
                required
                autoComplete="off"
@@ -235,8 +233,12 @@ export const UnauthenticatedView: FC = () => {
          </Body>
        </footer>
      </div>
-      {modalState.isOpen && onFinished && (
-        <JoinExistingCallModal onJoin={onFinished} {...modalProps} />
+      {onFinished && (
+        <JoinExistingCallModal
+          onJoin={onFinished}
+          open={joinExistingCallModalOpen}
+          onDismiss={onDismissJoinExistingCallModal}
+        />
      )}
    </>
  );
--- a/src/index.css
+++ b/src/index.css
@@ -25,12 +25,6 @@ limitations under the License.
@import "@vector-im/compound-web/dist/style.css";

 :root {
-  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
-  --inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f,
-    U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF;
-
  --font-scale: 1;
  --font-size-micro: calc(10px * var(--font-scale));
  --font-size-caption: calc(12px * var(--font-scale));
@@ -39,21 +33,29 @@ limitations under the License.
  --font-size-title: calc(24px * var(--font-scale));
  --font-size-headline: calc(32px * var(--font-scale));

-  --cpd-color-border-accent: var(--cpd-color-green-1100);
  /* These colors are needed during the transitionary period between the old and
  new Compound design systems, but should be removed ASAP */
  --stopgap-color-on-solid-accent: var(--cpd-color-bg-canvas-default);
  --stopgap-background-85: rgba(255, 255, 255, 0.85);
  --stopgap-bgColor3: #444;

+  --cpd-color-border-accent: var(--cpd-color-green-800);
  /* The distance to inset non-full-width content from the edge of the window
  along the inline axis */
  --inline-content-inset: max(var(--cpd-space-4x), calc((100vw - 1180px) / 2));
+  --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
+  --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  --background-gradient: url("graphics/backgroundGradient.svg");
 }

 .cpd-theme-dark {
+  --cpd-color-border-accent: var(--cpd-color-green-1100);
  --stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
  --stopgap-background-85: rgba(16, 19, 23, 0.85);
+
+  background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
+  background-repeat: no-repeat;
+  background-position: center;
 }

@font-face {
@@ -141,7 +143,6 @@ body {
  color: var(--cpd-color-text-primary);
  color-scheme: dark;
  margin: 0;
-  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
@@ -149,7 +150,9 @@ body {
 html,
 body,
 #root {
-  height: 100%;
+  /* We use !important here to override vaul drawers, which have a side effect
+  of setting height: auto; on the body element and messing up our layouts */
+  height: 100% !important;
 }

 #root {
@@ -157,6 +160,21 @@ body,
  flex-direction: column;
 }

+/* On Android and iOS, prefer native system fonts. The global.css file of
+Compound Web is where these variables ultimately get consumed to set the page's
+font-family. */
+body[data-platform="android"] {
+  --cpd-font-family-sans: "Roboto", "Noto", "Inter", sans-serif;
+}
+
+body[data-platform="ios"] {
+  --cpd-font-family-sans: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
+}
+
+body[data-platform="desktop"] {
+  --cpd-font-family-sans: "Inter", sans-serif;
+}
+
 h1,
 h2,
 h3,
--- a/src/initializer.tsx
+++ b/src/initializer.tsx
@@ -24,6 +24,7 @@ import * as Sentry from "@sentry/react";
 import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
 import { ElementCallOpenTelemetry } from "./otel/otel";
+import { platform } from "./Platform";

 enum LoadState {
  None,
@@ -107,6 +108,9 @@ export class Initializer {
        fonts.map((f) => `"${f}"`).join(", ")
      );
    }
+
+    // Add the platform to the DOM, so CSS can query it
+    document.body.setAttribute("data-platform", platform);
  }

  public static init(): Promise<void> | null {
--- a/src/home/CallTypeDropdown.module.css
+++ b/src/home/CallTypeDropdown.module.css
@@ -1,11 +1,11 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2023 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

-http://www.apache.org/licenses/LICENSE-2.0
+    http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.label {
-  margin-bottom: 0;
+import { Focus } from "matrix-js-sdk/src/matrixrtc/focus";
+
+export interface LivekitFocus extends Focus {
+  type: "livekit";
+  livekit_service_url: string;
+  livekit_alias: string;
 }
--- a/src/livekit/MediaDevicesContext.tsx
+++ b/src/livekit/MediaDevicesContext.tsx
@@ -200,8 +200,10 @@ export const useMediaDevices = () => useContext(MediaDevicesContext);
 * default because it may involve requesting additional permissions from the
 * user.
 */
-export const useMediaDeviceNames = (context: MediaDevices) =>
+export const useMediaDeviceNames = (context: MediaDevices, enabled = true) =>
  useEffect(() => {
-    context.startUsingDeviceNames();
-    return context.stopUsingDeviceNames;
-  }, [context]);
+    if (enabled) {
+      context.startUsingDeviceNames();
+      return context.stopUsingDeviceNames;
+    }
+  }, [context, enabled]);
--- a/src/livekit/OpenIDLoader.tsx
+++ b/src/livekit/OpenIDLoader.tsx
@@ -1,92 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {
-  ReactNode,
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
-import { logger } from "matrix-js-sdk/src/logger";
-import { GroupCall } from "matrix-js-sdk";
-
-import {
-  OpenIDClientParts,
-  SFUConfig,
-  getSFUConfigWithOpenID,
-} from "./openIDSFU";
-import { ErrorView, LoadingView } from "../FullScreenView";
-
-interface Props {
-  client: OpenIDClientParts;
-  groupCall: GroupCall;
-  roomName: string;
-  children: ReactNode;
-}
-
-const SFUConfigContext = createContext<SFUConfig | undefined>(undefined);
-
-export const useSFUConfig = () => useContext(SFUConfigContext);
-
-export function OpenIDLoader({ client, groupCall, roomName, children }: Props) {
-  const [state, setState] = useState<
-    SFUConfigLoading | SFUConfigLoaded | SFUConfigFailed
-  >({ kind: "loading" });
-
-  useEffect(() => {
-    (async () => {
-      try {
-        const result = await getSFUConfigWithOpenID(
-          client,
-          groupCall,
-          roomName
-        );
-        setState({ kind: "loaded", sfuConfig: result });
-      } catch (e) {
-        logger.error("Failed to fetch SFU config: ", e);
-        setState({ kind: "failed", error: e as Error });
-      }
-    })();
-  }, [client, groupCall, roomName]);
-
-  switch (state.kind) {
-    case "loading":
-      return <LoadingView />;
-    case "failed":
-      return <ErrorView error={state.error} />;
-    case "loaded":
-      return (
-        <SFUConfigContext.Provider value={state.sfuConfig}>
-          {children}
-        </SFUConfigContext.Provider>
-      );
-  }
-}
-
-type SFUConfigLoading = {
-  kind: "loading";
-};
-
-type SFUConfigLoaded = {
-  kind: "loaded";
-  sfuConfig: SFUConfig;
-};
-
-type SFUConfigFailed = {
-  kind: "failed";
-  error: Error;
-};
--- a/src/livekit/openIDSFU.ts
+++ b/src/livekit/openIDSFU.ts
@@ -14,82 +14,78 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { GroupCall, IOpenIDToken, MatrixClient } from "matrix-js-sdk";
+import { IOpenIDToken, MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/src/logger";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { useEffect, useState } from "react";

-import { Config } from "../config/Config";
+import { LivekitFocus } from "./LivekitFocus";
+import { useActiveFocus } from "../room/useActiveFocus";

 export interface SFUConfig {
  url: string;
  jwt: string;
 }

+export function sfuConfigEquals(a?: SFUConfig, b?: SFUConfig): boolean {
+  if (a === undefined && b === undefined) return true;
+  if (a === undefined || b === undefined) return false;
+
+  return a.jwt === b.jwt && a.url === b.url;
+}
+
 // The bits we need from MatrixClient
 export type OpenIDClientParts = Pick<
  MatrixClient,
  "getOpenIdToken" | "getDeviceId"
 >;

+export function useOpenIDSFU(
+  client: OpenIDClientParts,
+  rtcSession: MatrixRTCSession
+) {
+  const [sfuConfig, setSFUConfig] = useState<SFUConfig | undefined>(undefined);
+
+  const activeFocus = useActiveFocus(rtcSession);
+
+  useEffect(() => {
+    (async () => {
+      const sfuConfig = activeFocus
+        ? await getSFUConfigWithOpenID(client, activeFocus)
+        : undefined;
+      setSFUConfig(sfuConfig);
+    })();
+  }, [client, activeFocus]);
+
+  return sfuConfig;
+}
+
 export async function getSFUConfigWithOpenID(
  client: OpenIDClientParts,
-  groupCall: GroupCall,
-  roomName: string
-): Promise<SFUConfig> {
+  activeFocus: LivekitFocus
+): Promise<SFUConfig | undefined> {
  const openIdToken = await client.getOpenIdToken();
  logger.debug("Got openID token", openIdToken);

-  // if the call has a livekit service URL, try it.
-  if (groupCall.livekitServiceURL) {
-    try {
-      logger.info(
-        `Trying to get JWT from call's configured URL of ${groupCall.livekitServiceURL}...`
-      );
-      const sfuConfig = await getLiveKitJWT(
-        client,
-        groupCall.livekitServiceURL,
-        roomName,
-        openIdToken
-      );
-      logger.info(`Got JWT from call state event URL.`);
-
-      return sfuConfig;
-    } catch (e) {
-      logger.warn(
-        `Failed to get JWT from group call's configured URL of ${groupCall.livekitServiceURL}.`,
-        e
-      );
-    }
-  }
-
-  // otherwise, try our configured one and, if it works, update the call's service URL in the state event
-  // NB. This wuill update it for everyone so we may end up with multiple clients updating this when they
-  // join at similar times, but we don't have a huge number of options here.
-  const urlFromConf = Config.get().livekit!.livekit_service_url;
-  logger.info(`Trying livekit service URL from our config: ${urlFromConf}...`);
  try {
+    logger.info(
+      `Trying to get JWT from call's active focus URL of ${activeFocus.livekit_service_url}...`
+    );
    const sfuConfig = await getLiveKitJWT(
      client,
-      urlFromConf,
-      roomName,
+      activeFocus.livekit_service_url,
+      activeFocus.livekit_alias,
      openIdToken
    );
-
-    logger.info(
-      `Got JWT, updating call livekit service URL with: ${urlFromConf}...`
-    );
-    try {
-      await groupCall.updateLivekitServiceURL(urlFromConf);
-      logger.info(`Call livekit service URL updated.`);
-    } catch (e) {
-      logger.warn(
-        `Failed to update call livekit service URL: continuing anyway.`
-      );
-    }
+    logger.info(`Got JWT from call's active focus URL.`);

    return sfuConfig;
  } catch (e) {
-    logger.error("Failed to get JWT from URL defined in Config.", e);
-    throw e;
+    logger.warn(
+      `Failed to get JWT from RTC session's active focus URL of ${activeFocus.livekit_service_url}.`,
+      e
+    );
+    return undefined;
  }
 }

--- a/src/livekit/useECConnectionState.ts
+++ b/src/livekit/useECConnectionState.ts
@@ -0,0 +1,157 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  AudioCaptureOptions,
+  ConnectionState,
+  LocalTrackPublication,
+  Room,
+  RoomEvent,
+  Track,
+} from "livekit-client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import { SFUConfig, sfuConfigEquals } from "./openIDSFU";
+
+/*
+ * Additional values for states that a call can be in, beyond what livekit
+ * provides in ConnectionState. Also reconnects the call if the SFU Config
+ * changes.
+ */
+export enum ECAddonConnectionState {
+  // We are switching from one focus to another (or between livekit room aliases on the same focus)
+  ECSwitchingFocus = "ec_switching_focus",
+  // The call has just been initialised and is waiting for credentials to arrive before attempting
+  // to connect. This distinguishes from the 'Disconected' state which is now just for when livekit
+  // gives up on connectivity and we consider the call to have failed.
+  ECWaiting = "ec_waiting",
+}
+
+export type ECConnectionState = ConnectionState | ECAddonConnectionState;
+
+// This is mostly necessary because an empty useRef is an empty object
+// which is truthy, so we can't just use Boolean(currentSFUConfig.current)
+function sfuConfigValid(sfuConfig?: SFUConfig): boolean {
+  return Boolean(sfuConfig?.url) && Boolean(sfuConfig?.jwt);
+}
+
+async function doConnect(
+  livekitRoom: Room,
+  sfuConfig: SFUConfig,
+  audioEnabled: boolean,
+  audioOptions: AudioCaptureOptions
+): Promise<void> {
+  await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt);
+  const hasMicrophoneTrack = Array.from(
+    livekitRoom?.localParticipant.audioTracks.values()
+  ).some((track: LocalTrackPublication) => {
+    return track.source == Track.Source.Microphone;
+  });
+  // We create a track in case there isn't any.
+  if (!hasMicrophoneTrack) {
+    const audioTracks = await livekitRoom!.localParticipant.createTracks({
+      audio: audioOptions,
+    });
+    if (audioTracks.length < 1) {
+      logger.info("Tried to pre-create local audio track but got no tracks");
+      return;
+    }
+    if (!audioEnabled) await audioTracks[0].mute();
+
+    await livekitRoom?.localParticipant.publishTrack(audioTracks[0]);
+  }
+}
+
+export function useECConnectionState(
+  initialAudioOptions: AudioCaptureOptions,
+  initialAudioEnabled: boolean,
+  livekitRoom?: Room,
+  sfuConfig?: SFUConfig
+): ECConnectionState {
+  const [connState, setConnState] = useState(
+    sfuConfig && livekitRoom
+      ? livekitRoom.state
+      : ECAddonConnectionState.ECWaiting
+  );
+
+  const [isSwitchingFocus, setSwitchingFocus] = useState(false);
+
+  const onConnStateChanged = useCallback((state: ConnectionState) => {
+    if (state == ConnectionState.Connected) setSwitchingFocus(false);
+    setConnState(state);
+  }, []);
+
+  useEffect(() => {
+    const oldRoom = livekitRoom;
+
+    if (livekitRoom) {
+      livekitRoom.on(RoomEvent.ConnectionStateChanged, onConnStateChanged);
+    }
+
+    return () => {
+      if (oldRoom)
+        oldRoom.off(RoomEvent.ConnectionStateChanged, onConnStateChanged);
+    };
+  }, [livekitRoom, onConnStateChanged]);
+
+  const currentSFUConfig = useRef(Object.assign({}, sfuConfig));
+
+  // Id we are transitioning from a valid config to another valid one, we need
+  // to explicitly switch focus
+  useEffect(() => {
+    if (
+      sfuConfigValid(sfuConfig) &&
+      sfuConfigValid(currentSFUConfig.current) &&
+      !sfuConfigEquals(currentSFUConfig.current, sfuConfig)
+    ) {
+      logger.info(
+        `SFU config changed! URL was ${currentSFUConfig.current?.url} now ${sfuConfig?.url}`
+      );
+
+      (async () => {
+        setSwitchingFocus(true);
+        await livekitRoom?.disconnect();
+        await doConnect(
+          livekitRoom!,
+          sfuConfig!,
+          initialAudioEnabled,
+          initialAudioOptions
+        );
+      })();
+    } else if (
+      !sfuConfigValid(currentSFUConfig.current) &&
+      sfuConfigValid(sfuConfig)
+    ) {
+      // if we're transitioning from an invalid config to a valid one (ie. connecting)
+      // then do an initial connection, including publishing the microphone track:
+      // livekit (by default) keeps the mic track open when you mute, but if you start muted,
+      // doesn't publish it until you unmute. We want to publish it from the start so we're
+      // always capturing audio: it helps keep bluetooth headsets in the right mode and
+      // mobile browsers to know we're doing a call.
+      doConnect(
+        livekitRoom!,
+        sfuConfig!,
+        initialAudioEnabled,
+        initialAudioOptions
+      );
+    }
+
+    currentSFUConfig.current = Object.assign({}, sfuConfig);
+  }, [sfuConfig, livekitRoom, initialAudioOptions, initialAudioEnabled]);
+
+  return isSwitchingFocus ? ECAddonConnectionState.ECSwitchingFocus : connState;
+}
--- a/src/livekit/useLiveKit.ts
+++ b/src/livekit/useLiveKit.ts
@@ -22,7 +22,7 @@ import {
  RoomOptions,
  setLogLevel,
 } from "livekit-client";
-import { useConnectionState, useLiveKitRoom } from "@livekit/components-react";
+import { useLiveKitRoom } from "@livekit/components-react";
 import { useEffect, useMemo, useRef } from "react";
 import E2EEWorker from "livekit-client/e2ee-worker?worker";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -35,6 +35,10 @@ import {
  MediaDevices,
  useMediaDevices,
 } from "./MediaDevicesContext";
+import {
+  ECConnectionState,
+  useECConnectionState,
+} from "./useECConnectionState";

 export type E2EEConfig = {
  sharedKey: string;
@@ -42,11 +46,16 @@ export type E2EEConfig = {

 setLogLevel("debug");

+interface UseLivekitResult {
+  livekitRoom?: Room;
+  connState: ECConnectionState;
+}
+
 export function useLiveKit(
  muteStates: MuteStates,
  sfuConfig?: SFUConfig,
  e2eeConfig?: E2EEConfig
-): Room | undefined {
+): UseLivekitResult {
  const e2eeOptions = useMemo(() => {
    if (!e2eeConfig?.sharedKey) return undefined;

@@ -99,9 +108,17 @@ export function useLiveKit(
    audio: initialMuteStates.current.audio.enabled,
    video: initialMuteStates.current.video.enabled,
    room: roomWithoutProps,
+    connect: false,
  });

-  const connectionState = useConnectionState(roomWithoutProps);
+  const connectionState = useECConnectionState(
+    {
+      deviceId: initialDevices.current.audioOutput.selectedId,
+    },
+    initialMuteStates.current.audio.enabled,
+    room,
+    sfuConfig
+  );

  useEffect(() => {
    // Sync the requested mute states with LiveKit's mute states. We do it this
@@ -149,5 +166,8 @@ export function useLiveKit(
    }
  }, [room, devices, connectionState]);

-  return room;
+  return {
+    connState: connectionState,
+    livekitRoom: room,
+  };
 }
--- a/src/matrix-utils.ts
+++ b/src/matrix-utils.ts
@@ -172,7 +172,6 @@ export async function initClient(
    localTimeoutMs: 5000,
    useE2eForGroupCall: e2eEnabled,
    fallbackICEServerAllowed: fallbackICEServerAllowed,
-    useLivekitForGroupCalls: true,
  });

  try {
@@ -273,7 +272,6 @@ export function isLocalRoomId(roomId: string, client: MatrixClient): boolean {
 export async function createRoom(
  client: MatrixClient,
  name: string,
-  ptt: boolean,
  e2ee: boolean
 ): Promise<[string, string]> {
  logger.log(`Creating room for group call`);
@@ -328,14 +326,12 @@ export async function createRoom(

  const result = await createPromise;

-  logger.log(
-    `Creating ${ptt ? "PTT" : "video"} group call in ${result.room_id}`
-  );
+  logger.log(`Creating group call in ${result.room_id}`);

  await client.createGroupCall(
    result.room_id,
-    ptt ? GroupCallType.Voice : GroupCallType.Video,
-    ptt,
+    GroupCallType.Video,
+    false,
    GroupCallIntent.Room,
    true
  );
--- a/src/room/AppSelectionModal.module.css
+++ b/src/room/AppSelectionModal.module.css
@@ -1,11 +1,11 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2023 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

-http://www.apache.org/licenses/LICENSE-2.0
+    http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
@@ -14,6 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.hideFocus * {
-  outline: none !important;
+.modal p {
+  text-align: center;
+  margin-block-end: var(--cpd-space-8x);
+}
+
+.modal button,
+.modal a {
+  width: 100%;
+}
+
+.modal button {
+  margin-block-end: var(--cpd-space-6x);
+}
+
+.modal a {
+  box-sizing: border-box;
 }
--- a/src/room/AppSelectionModal.tsx
+++ b/src/room/AppSelectionModal.tsx
@@ -0,0 +1,80 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Text } from "@vector-im/compound-web";
+import { ReactComponent as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg";
+
+import { Modal } from "../Modal";
+import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { getRoomUrl } from "../matrix-utils";
+import styles from "./AppSelectionModal.module.css";
+import { editFragmentQuery } from "../UrlParams";
+
+interface Props {
+  roomId: string | null;
+}
+
+export const AppSelectionModal: FC<Props> = ({ roomId }) => {
+  const { t } = useTranslation();
+
+  const [open, setOpen] = useState(true);
+  const onBrowserClick = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setOpen(false);
+    },
+    [setOpen]
+  );
+
+  const roomSharedKey = useRoomSharedKey(roomId ?? "");
+  const appUrl = useMemo(() => {
+    // If the room ID is not known, fall back to the URL of the current page
+    const url = new URL(
+      roomId === null
+        ? window.location.href
+        : getRoomUrl(roomId, roomSharedKey ?? undefined)
+    );
+    // Edit the URL so that it opens in embedded mode. We do this for two
+    // reasons: It causes the mobile app to limit the user to only visiting the
+    // room in question, and it prevents this app selection prompt from being
+    // shown a second time.
+    url.hash = editFragmentQuery(url.hash, (params) => {
+      params.set("isEmbedded", "");
+      return params;
+    });
+
+    const result = new URL("element://call");
+    result.searchParams.set("url", url.toString());
+    return result.toString();
+  }, [roomId, roomSharedKey]);
+
+  return (
+    <Modal className={styles.modal} title={t("Select app")} open={open}>
+      <Text size="md" weight="semibold">
+        {t("Ready to join?")}
+      </Text>
+      <Button kind="secondary" onClick={onBrowserClick}>
+        {t("Continue in browser")}
+      </Button>
+      <Button as="a" href={appUrl} Icon={PopOutIcon}>
+        {t("Open in the app")}
+      </Button>
+    </Modal>
+  );
+};
--- a/src/room/CallEndedView.module.css
+++ b/src/room/CallEndedView.module.css
@@ -17,7 +17,8 @@ limitations under the License.
 .headline {
  text-align: center;
  margin-bottom: 60px;
-  white-space: pre;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
 }

 .callEndedContent {
@@ -66,6 +67,7 @@ limitations under the License.
  flex: 1;
  flex-direction: column;
  align-items: center;
+  padding-inline: var(--inline-content-inset);
 }

 .logo {
--- a/src/room/GroupCallLoader.tsx
+++ b/src/room/GroupCallLoader.tsx
@@ -16,8 +16,8 @@ limitations under the License.

 import { 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 { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";

 import { useLoadGroupCall } from "./useLoadGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
@@ -26,8 +26,7 @@ interface Props {
  client: MatrixClient;
  roomIdOrAlias: string;
  viaServers: string[];
-  children: (groupCall: GroupCall) => ReactNode;
-  createPtt: boolean;
+  children: (rtcSession: MatrixRTCSession) => ReactNode;
 }

 export function GroupCallLoader({
@@ -35,15 +34,9 @@ export function GroupCallLoader({
  roomIdOrAlias,
  viaServers,
  children,
-  createPtt,
 }: Props): JSX.Element {
  const { t } = useTranslation();
-  const groupCallState = useLoadGroupCall(
-    client,
-    roomIdOrAlias,
-    viaServers,
-    createPtt
-  );
+  const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);

  switch (groupCallState.kind) {
    case "loading":
@@ -53,7 +46,7 @@ export function GroupCallLoader({
        </FullScreenView>
      );
    case "loaded":
-      return <>{children(groupCallState.groupCall)}</>;
+      return <>{children(groupCallState.rtcSession)}</>;
    case "failed":
      return <ErrorView error={groupCallState.error} />;
  }
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -16,29 +16,28 @@ limitations under the License.

 import { useCallback, useEffect, useMemo, useRef, 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 { useTranslation } from "react-i18next";
 import { Room } from "livekit-client";
 import { logger } from "matrix-js-sdk/src/logger";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { JoinRule, RoomMember } from "matrix-js-sdk/src/matrix";

 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";
 import { MatrixInfo } from "./VideoPreview";
 import { CallEndedView } from "./CallEndedView";
-import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
 import { findDeviceByName } from "../media-utils";
-import { OpenIDLoader } from "../livekit/OpenIDLoader";
 import { ActiveCall } from "./InCallView";
-import { Config } from "../config/Config";
 import { MuteStates, useMuteStates } from "./MuteStates";
 import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
+import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
+import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
+import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
 import {
  useManageRoomSharedKey,
  useIsRoomE2EE,
@@ -46,13 +45,12 @@ import {
 import { useEnableE2EE } from "../settings/useSetting";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
-import { useModalTriggerState } from "../Modal";
 import { useJoinRule } from "./useJoinRule";
 import { ShareModal } from "./ShareModal";

 declare global {
  interface Window {
-    groupCall?: GroupCall;
+    rtcSession?: MatrixRTCSession;
  }
 }

@@ -62,7 +60,7 @@ interface Props {
  isEmbedded: boolean;
  preload: boolean;
  hideHeader: boolean;
-  groupCall: GroupCall;
+  rtcSession: MatrixRTCSession;
 }

 export function GroupCallView({
@@ -71,43 +69,43 @@ export function GroupCallView({
  isEmbedded,
  preload,
  hideHeader,
-  groupCall,
+  rtcSession,
 }: Props) {
-  const { state, error, enter, leave, participants, otelGroupCallMembership } =
-    useGroupCall(groupCall, client);
+  const memberships = useMatrixRTCSessionMemberships(rtcSession);
+  const isJoined = useMatrixRTCSessionJoinState(rtcSession);

-  const e2eeSharedKey = useManageRoomSharedKey(groupCall.room.roomId);
-  const isRoomE2EE = useIsRoomE2EE(groupCall.room.roomId);
+  const e2eeSharedKey = useManageRoomSharedKey(rtcSession.room.roomId);
+  const isRoomE2EE = useIsRoomE2EE(rtcSession.room.roomId);

  const { t } = useTranslation();

  useEffect(() => {
-    window.groupCall = groupCall;
+    window.rtcSession = rtcSession;
    return () => {
-      delete window.groupCall;
+      delete window.rtcSession;
    };
-  }, [groupCall]);
+  }, [rtcSession]);

  const { displayName, avatarUrl } = useProfile(client);
-  const roomName = useRoomName(groupCall.room);
-  const roomAvatar = useRoomAvatar(groupCall.room);
-  const roomEncrypted = useIsRoomE2EE(groupCall.room.roomId)!;
+  const roomName = useRoomName(rtcSession.room);
+  const roomAvatar = useRoomAvatar(rtcSession.room);
+  const roomEncrypted = useIsRoomE2EE(rtcSession.room.roomId)!;

  const matrixInfo = useMemo((): MatrixInfo => {
    return {
      userId: client.getUserId()!,
      displayName: displayName!,
      avatarUrl: avatarUrl!,
-      roomId: groupCall.room.roomId,
+      roomId: rtcSession.room.roomId,
      roomName,
-      roomAlias: groupCall.room.getCanonicalAlias(),
+      roomAlias: rtcSession.room.getCanonicalAlias(),
      roomAvatar,
      roomEncrypted,
    };
  }, [
    displayName,
    avatarUrl,
-    groupCall,
+    rtcSession,
    roomName,
    roomAvatar,
    roomEncrypted,
@@ -116,18 +114,22 @@ export function GroupCallView({

  const participatingMembers = useMemo(() => {
    const members: RoomMember[] = [];
-    for (const [member, deviceMap] of participants.entries()) {
-      // Count each member only once, regardless of how many devices they use
-      if (deviceMap.size > 0) members.push(member);
+    // Count each member only once, regardless of how many devices they use
+    const addedUserIds = new Set<string>();
+    for (const membership of memberships) {
+      if (!addedUserIds.has(membership.member.userId)) {
+        addedUserIds.add(membership.member.userId);
+        members.push(membership.member);
+      }
    }
    return members;
-  }, [participants]);
+  }, [memberships]);

  const deviceContext = useMediaDevices();
  const latestDevices = useRef<MediaDevices>();
  latestDevices.current = deviceContext;

-  const muteStates = useMuteStates(participants.size);
+  const muteStates = useMuteStates(memberships.length);
  const latestMuteStates = useRef<MuteStates>();
  latestMuteStates.current = muteStates;

@@ -184,10 +186,13 @@ export function GroupCallView({
          }
        }

-        await enter();
+        enterRTCSession(rtcSession);

        PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
-        PosthogAnalytics.instance.eventCallStarted.track(groupCall.groupCallId);
+        // we only have room sessions right now, so call ID is the emprty string - we use the room ID
+        PosthogAnalytics.instance.eventCallStarted.track(
+          rtcSession.room.roomId
+        );

        await Promise.all([
          widget!.api.setAlwaysOnScreen(true),
@@ -200,19 +205,18 @@ export function GroupCallView({
        widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
      };
    }
-  }, [groupCall, preload, enter]);
+  }, [rtcSession, preload]);

  useEffect(() => {
    if (isEmbedded && !preload) {
      // In embedded mode, bypass the lobby and just enter the call straight away
-      enter();
+      enterRTCSession(rtcSession);

      PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
-      PosthogAnalytics.instance.eventCallStarted.track(groupCall.groupCallId);
+      // use the room ID as above
+      PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
    }
-  }, [groupCall, isEmbedded, preload, enter]);
-
-  useSentryGroupCallHandler(groupCall);
+  }, [rtcSession, isEmbedded, preload]);

  const [left, setLeft] = useState(false);
  const [leaveError, setLeaveError] = useState<Error | undefined>(undefined);
@@ -223,21 +227,16 @@ export function GroupCallView({
      setLeaveError(leaveError);
      setLeft(true);

-      let participantCount = 0;
-      for (const deviceMap of groupCall.participants.values()) {
-        participantCount += deviceMap.size;
-      }
-
      // In embedded/widget mode the iFrame will be killed right after the call ended prohibiting the posthog event from getting sent,
      // therefore we want the event to be sent instantly without getting queued/batched.
      const sendInstantly = !!widget;
      PosthogAnalytics.instance.eventCallEnded.track(
-        groupCall.groupCallId,
-        participantCount,
+        rtcSession.room.roomId,
+        rtcSession.memberships.length,
        sendInstantly
      );

-      leave();
+      leaveRTCSession(rtcSession);
      if (widget) {
        // we need to wait until the callEnded event is tracked. Otherwise the iFrame gets killed before the callEnded event got tracked.
        await new Promise((resolve) => window.setTimeout(resolve, 10)); // 10ms
@@ -254,13 +253,13 @@ export function GroupCallView({
        history.push("/");
      }
    },
-    [groupCall, leave, isPasswordlessUser, isEmbedded, history]
+    [rtcSession, isPasswordlessUser, isEmbedded, history]
  );

  useEffect(() => {
-    if (widget && state === GroupCallState.Entered) {
+    if (widget && isJoined) {
      const onHangup = async (ev: CustomEvent<IWidgetApiRequest>) => {
-        leave();
+        leaveRTCSession(rtcSession);
        await widget!.api.transport.reply(ev.detail, {});
        widget!.api.setAlwaysOnScreen(false);
      };
@@ -269,7 +268,7 @@ export function GroupCallView({
        widget!.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
      };
    }
-  }, [groupCall, state, leave]);
+  }, [isJoined, rtcSession]);

  const [e2eeEnabled] = useEnableE2EE();

@@ -281,17 +280,20 @@ export function GroupCallView({
  const onReconnect = useCallback(() => {
    setLeft(false);
    setLeaveError(undefined);
-    groupCall.enter();
-  }, [groupCall]);
+    enterRTCSession(rtcSession);
+  }, [rtcSession]);

-  const joinRule = useJoinRule(groupCall.room);
+  const joinRule = useJoinRule(rtcSession.room);

-  const { modalState: shareModalState, modalProps: shareModalProps } =
-    useModalTriggerState();
+  const [shareModalOpen, setShareModalOpen] = useState(false);
+  const onDismissShareModal = useCallback(
+    () => setShareModalOpen(false),
+    [setShareModalOpen]
+  );

  const onShareClickFn = useCallback(
-    () => shareModalState.open(),
-    [shareModalState]
+    () => setShareModalOpen(true),
+    [setShareModalOpen]
  );
  const onShareClick = joinRule === JoinRule.Public ? onShareClickFn : null;

@@ -311,40 +313,31 @@ export function GroupCallView({
    return <ErrorView error={new Error("You need to enable E2EE to join.")} />;
  }

-  const livekitServiceURL =
-    groupCall.livekitServiceURL ?? Config.get().livekit?.livekit_service_url;
-  if (!livekitServiceURL) {
-    return <ErrorView error={new Error("No livekit_service_url defined")} />;
-  }
-
-  const shareModal = shareModalState.isOpen && (
-    <ShareModal roomId={groupCall.room.roomId} {...shareModalProps} />
+  const shareModal = (
+    <ShareModal
+      roomId={rtcSession.room.roomId}
+      open={shareModalOpen}
+      onDismiss={onDismissShareModal}
+    />
  );

-  if (error) {
-    return <ErrorView error={error} />;
-  } else if (state === GroupCallState.Entered) {
+  if (isJoined) {
    return (
-      <OpenIDLoader
-        client={client}
-        groupCall={groupCall}
-        roomName={`${groupCall.room.roomId}-${groupCall.groupCallId}`}
-      >
+      <>
        {shareModal}
        <ActiveCall
          client={client}
          matrixInfo={matrixInfo}
-          groupCall={groupCall}
-          participants={participants}
+          rtcSession={rtcSession}
          participatingMembers={participatingMembers}
          onLeave={onLeave}
          hideHeader={hideHeader}
          muteStates={muteStates}
          e2eeConfig={e2eeConfig}
-          otelGroupCallMembership={otelGroupCallMembership}
+          //otelGroupCallMembership={otelGroupCallMembership}
          onShareClick={onShareClick}
        />
-      </OpenIDLoader>
+      </>
    );
  } else if (left) {
    // The call ended view is shown for two reasons: prompting guests to create
@@ -360,7 +353,7 @@ export function GroupCallView({
    ) {
      return (
        <CallEndedView
-          endedCallId={groupCall.groupCallId}
+          endedCallId={rtcSession.room.roomId}
          client={client}
          isPasswordlessUser={isPasswordlessUser}
          leaveError={leaveError}
@@ -389,7 +382,7 @@ export function GroupCallView({
          client={client}
          matrixInfo={matrixInfo}
          muteStates={muteStates}
-          onEnter={() => enter()}
+          onEnter={() => enterRTCSession(rtcSession)}
          isEmbedded={isEmbedded}
          hideHeader={hideHeader}
          participatingMembers={participatingMembers}
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -23,16 +23,15 @@ import {
  useTracks,
 } from "@livekit/components-react";
 import { usePreventScroll } from "@react-aria/overlays";
-import { DisconnectReason, Room, RoomEvent, Track } from "livekit-client";
+import { ConnectionState, Room, Track } from "livekit-client";
 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 { Ref, useCallback, useEffect, useMemo, useRef } from "react";
+import { Room as MatrixRoom } from "matrix-js-sdk/src/models/room";
+import { Ref, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useMeasure from "react-use-measure";
-import { OverlayTriggerState } from "@react-stately/overlays";
 import { logger } from "matrix-js-sdk/src/logger";
-import { RoomEventCallbacks } from "livekit-client/dist/src/room/Room";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";

 import { ReactComponent as LogoMark } from "../icons/LogoMark.svg";
 import { ReactComponent as LogoType } from "../icons/LogoType.svg";
@@ -50,19 +49,13 @@ import {
  TileDescriptor,
  VideoGrid,
 } from "../video-grid/VideoGrid";
-import {
-  useShowInspector,
-  useShowConnectionStats,
-} from "../settings/useSetting";
-import { useModalTriggerState } from "../Modal";
+import { useShowConnectionStats } from "../settings/useSetting";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
 import { ElementWidgetActions, widget } from "../widget";
-import { GroupCallInspector } from "./GroupCallInspector";
 import styles from "./InCallView.module.css";
-import { ParticipantInfo } from "./useGroupCall";
 import { ItemData, TileContent, VideoTile } from "../video-grid/VideoTile";
 import { NewVideoGrid } from "../video-grid/NewVideoGrid";
 import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
@@ -72,14 +65,17 @@ import { RageshakeRequestModal } from "./RageshakeRequestModal";
 import { E2EEConfig, useLiveKit } from "../livekit/useLiveKit";
 import { useFullscreen } from "./useFullscreen";
 import { useLayoutStates } from "../video-grid/Layout";
-import { useSFUConfig } from "../livekit/OpenIDLoader";
-import { useEventEmitterThree } from "../useEvents";
 import { useWakeLock } from "../useWakeLock";
 import { useMergedRefs } from "../useMergedRefs";
 import { MuteStates } from "./MuteStates";
 import { MatrixInfo } from "./VideoPreview";
 import { ShareButton } from "../button/ShareButton";
 import { LayoutToggle } from "./LayoutToggle";
+import {
+  ECAddonConnectionState,
+  ECConnectionState,
+} from "../livekit/useECConnectionState";
+import { useOpenIDSFU } from "../livekit/openIDSFU";

 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -87,13 +83,21 @@ const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // For now we can disable screensharing in Safari.
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

-export interface ActiveCallProps extends Omit<InCallViewProps, "livekitRoom"> {
+// How long we wait after a focus switch before showing the real participant list again
+const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
+
+export interface ActiveCallProps
+  extends Omit<InCallViewProps, "livekitRoom" | "connState"> {
  e2eeConfig?: E2EEConfig;
 }

 export function ActiveCall(props: ActiveCallProps) {
-  const sfuConfig = useSFUConfig();
-  const livekitRoom = useLiveKit(props.muteStates, sfuConfig, props.e2eeConfig);
+  const sfuConfig = useOpenIDSFU(props.client, props.rtcSession);
+  const { livekitRoom, connState } = useLiveKit(
+    props.muteStates,
+    sfuConfig,
+    props.e2eeConfig
+  );

  if (!livekitRoom) {
    return null;
@@ -105,7 +109,7 @@ export function ActiveCall(props: ActiveCallProps) {

  return (
    <RoomContext.Provider value={livekitRoom}>
-      <InCallView {...props} livekitRoom={livekitRoom} />
+      <InCallView {...props} livekitRoom={livekitRoom} connState={connState} />
    </RoomContext.Provider>
  );
 }
@@ -113,34 +117,42 @@ export function ActiveCall(props: ActiveCallProps) {
 export interface InCallViewProps {
  client: MatrixClient;
  matrixInfo: MatrixInfo;
-  groupCall: GroupCall;
+  rtcSession: MatrixRTCSession;
  livekitRoom: Room;
  muteStates: MuteStates;
-  participants: Map<RoomMember, Map<string, ParticipantInfo>>;
  participatingMembers: RoomMember[];
  onLeave: (error?: Error) => void;
  hideHeader: boolean;
  otelGroupCallMembership?: OTelGroupCallMembership;
+  connState: ECConnectionState;
  onShareClick: (() => void) | null;
 }

 export function InCallView({
  client,
  matrixInfo,
-  groupCall,
+  rtcSession,
  livekitRoom,
  muteStates,
-  participants,
  participatingMembers,
  onLeave,
  hideHeader,
  otelGroupCallMembership,
+  connState,
  onShareClick,
 }: InCallViewProps) {
  const { t } = useTranslation();
  usePreventScroll();
  useWakeLock();

+  useEffect(() => {
+    if (connState === ConnectionState.Disconnected) {
+      // annoyingly we don't get the disconnection reason this way,
+      // only by listening for the emitted event
+      onLeave(new Error("Disconnected from call server"));
+    }
+  }, [connState, onLeave]);
+
  const containerRef1 = useRef<HTMLDivElement | null>(null);
  const [containerRef2, bounds] = useMeasure({ polyfill: ResizeObserver });
  const boundsValid = bounds.height > 0;
@@ -157,7 +169,7 @@ export function InCallView({
    screenSharingTracks.length > 0
  );

-  const [showInspector] = useShowInspector();
+  //const [showInspector] = useShowInspector();
  const [showConnectionStats] = useShowConnectionStats();

  const { hideScreensharing } = useUrlParams();
@@ -184,27 +196,10 @@ export function InCallView({
    (muted) => muteStates.audio.setEnabled?.(!muted)
  );

-  const onDisconnected = useCallback(
-    (reason?: DisconnectReason) => {
-      PosthogAnalytics.instance.eventCallDisconnected.track(reason);
-      logger.info("Disconnected from livekit call with reason ", reason);
-      onLeave(
-        new Error("Disconnected from LiveKit call with reason " + reason)
-      );
-    },
-    [onLeave]
-  );
-
  const onLeavePress = useCallback(() => {
    onLeave();
  }, [onLeave]);

-  useEventEmitterThree<RoomEvent.Disconnected, RoomEventCallbacks>(
-    livekitRoom,
-    RoomEvent.Disconnected,
-    onDisconnected
-  );
-
  useEffect(() => {
    widget?.api.transport.send(
      layout === "grid"
@@ -245,7 +240,7 @@ export function InCallView({
  const reducedControls = boundsValid && bounds.width <= 340;
  const noControls = reducedControls && bounds.height <= 400;

-  const items = useParticipantTiles(livekitRoom, participants);
+  const items = useParticipantTiles(livekitRoom, rtcSession.room, connState);
  const { fullscreenItem, toggleFullscreen, exitFullscreen } =
    useFullscreen(items);

@@ -316,25 +311,20 @@ export function InCallView({
    );
  };

-  const {
-    modalState: rageshakeRequestModalState,
-    modalProps: rageshakeRequestModalProps,
-  } = useRageshakeRequestModal(groupCall.room.roomId);
+  const rageshakeRequestModalProps = useRageshakeRequestModal(
+    rtcSession.room.roomId
+  );

-  const {
-    modalState: settingsModalState,
-    modalProps: settingsModalProps,
-  }: {
-    modalState: OverlayTriggerState;
-    modalProps: {
-      isOpen: boolean;
-      onClose: () => void;
-    };
-  } = useModalTriggerState();
+  const [settingsModalOpen, setSettingsModalOpen] = useState(false);

-  const openSettings = useCallback(() => {
-    settingsModalState.open();
-  }, [settingsModalState]);
+  const openSettings = useCallback(
+    () => setSettingsModalOpen(true),
+    [setSettingsModalOpen]
+  );
+  const closeSettings = useCallback(
+    () => setSettingsModalOpen(false),
+    [setSettingsModalOpen]
+  );

  const toggleScreensharing = useCallback(async () => {
    exitFullscreen();
@@ -391,8 +381,12 @@ export function InCallView({
      <div className={styles.footer}>
        {!mobile && !hideHeader && (
          <div className={styles.logo}>
-            <LogoMark width={24} height={24} />
-            <LogoType width={80} height={11} />
+            <LogoMark width={24} height={24} aria-hidden />
+            <LogoType
+              width={80}
+              height={11}
+              aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
+            />
          </div>
        )}
        <div className={styles.buttons}>{buttons}</div>
@@ -433,50 +427,58 @@ export function InCallView({
        {renderContent()}
        {footer}
      </div>
-      {otelGroupCallMembership && (
+      {/*otelGroupCallMembership && (
        <GroupCallInspector
          client={client}
          groupCall={groupCall}
          otelGroupCallMembership={otelGroupCallMembership}
          show={showInspector}
        />
-      )}
-      {rageshakeRequestModalState.isOpen && !noControls && (
-        <RageshakeRequestModal
-          {...rageshakeRequestModalProps}
-          roomId={groupCall.room.roomId}
-        />
-      )}
-      {settingsModalState.isOpen && (
-        <SettingsModal
-          client={client}
-          roomId={groupCall.room.roomId}
-          {...settingsModalProps}
-        />
-      )}
+      )*/}
+      {!noControls && <RageshakeRequestModal {...rageshakeRequestModalProps} />}
+      <SettingsModal
+        client={client}
+        roomId={rtcSession.room.roomId}
+        open={settingsModalOpen}
+        onDismiss={closeSettings}
+      />
    </div>
  );
 }

+function findMatrixMember(
+  room: MatrixRoom,
+  id: string
+): RoomMember | undefined {
+  if (!id) return undefined;
+
+  const parts = id.split(":");
+  // must be at least 3 parts because we know the first part is a userId which must necessarily contain a colon
+  if (parts.length < 3) {
+    logger.warn(
+      "Livekit participants ID doesn't look like a userId:deviceId combination"
+    );
+    return undefined;
+  }
+
+  parts.pop();
+  const userId = parts.join(":");
+
+  return room.getMember(userId) ?? undefined;
+}
+
 function useParticipantTiles(
  livekitRoom: Room,
-  participants: Map<RoomMember, Map<string, ParticipantInfo>>
+  matrixRoom: MatrixRoom,
+  connState: ECConnectionState
 ): TileDescriptor<ItemData>[] {
+  const previousTiles = useRef<TileDescriptor<ItemData>[]>([]);
+
  const sfuParticipants = useParticipants({
    room: livekitRoom,
  });

  const items = useMemo(() => {
-    // The IDs of the participants who published membership event to the room (i.e. are present from Matrix perspective).
-    const matrixParticipants: Map<string, RoomMember> = new Map(
-      [...participants.entries()].flatMap(([user, devicesMap]) => {
-        return [...devicesMap.keys()].map((deviceId) => [
-          `${user.userId}:${deviceId}`,
-          user,
-        ]);
-      })
-    );
-
    const hasPresenter =
      sfuParticipants.find((p) => p.isScreenShareEnabled) !== undefined;
    let allGhosts = true;
@@ -492,7 +494,14 @@ function useParticipantTiles(
            : false;

        const id = sfuParticipant.identity;
-        const member = matrixParticipants.get(id);
+        const member = findMatrixMember(matrixRoom, id);
+        // We always start with a local participant wit the empty string as their ID before we're
+        // connected, this is fine and we'll be in "all ghosts" mode.
+        if (id !== "" && member === undefined) {
+          logger.warn(
+            `Ruh, roh! No matrix member found for SFU participant '${id}': creating g-g-g-ghost!`
+          );
+        }
        allGhosts &&= member === undefined;

        const userMediaTile = {
@@ -544,7 +553,46 @@ function useParticipantTiles(
    // If every item is a ghost, that probably means we're still connecting and
    // shouldn't bother showing anything yet
    return allGhosts ? [] : tiles;
-  }, [participants, sfuParticipants]);
+  }, [matrixRoom, sfuParticipants]);

-  return items;
+  // We carry over old tiles from the previous focus for some time after a focus switch
+  // so that the video tiles don't all disappear and reappear.
+  // This is set to true when the state transitions to Switching Focus and remains
+  // true for a short time after it changes (ie. connState is only switching focus for
+  // the time it takes us to reconnect to the conference).
+  // If there are still members that haven't reconnected after that time, they'll just
+  // appear to disconnect and will reappear once they reconnect.
+  const [isSwitchingFocus, setIsSwitchingFocus] = useState(false);
+
+  useEffect(() => {
+    if (connState === ECAddonConnectionState.ECSwitchingFocus) {
+      setIsSwitchingFocus(true);
+    } else if (isSwitchingFocus) {
+      setTimeout(() => {
+        setIsSwitchingFocus(false);
+      }, POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS);
+    }
+  }, [connState, setIsSwitchingFocus, isSwitchingFocus]);
+
+  if (
+    connState === ECAddonConnectionState.ECSwitchingFocus ||
+    isSwitchingFocus
+  ) {
+    logger.debug("Switching focus: injecting previous tiles");
+
+    // inject the previous tile for members that haven't rejoined yet
+    const newItems = items.slice(0);
+    const rejoined = new Set(newItems.map((p) => p.id));
+
+    for (const prevTile of previousTiles.current) {
+      if (!rejoined.has(prevTile.id)) {
+        newItems.push(prevTile);
+      }
+    }
+
+    return newItems;
+  } else {
+    previousTiles.current = items;
+    return items;
+  }
 }
--- a/src/room/LayoutToggle.module.css
+++ b/src/room/LayoutToggle.module.css
@@ -34,7 +34,7 @@ limitations under the License.
  border-radius: var(--cpd-radius-pill-effect);
  color: var(--cpd-color-icon-primary);
  background: var(--cpd-color-bg-action-secondary-rest);
-  box-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--small-drop-shadow);
 }

@media (hover: hover) {
--- a/src/room/RageshakeRequestModal.tsx
+++ b/src/room/RageshakeRequestModal.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";

-import { Modal, ModalContent, ModalProps } from "../Modal";
+import { Modal, ModalProps } from "../Modal";
 import { Button } from "../button";
 import { FieldRow, ErrorMessage } from "../input/Input";
 import { useSubmitRageshake } from "../settings/submit-rageshake";
@@ -26,51 +26,49 @@ import { Body } from "../typography/Typography";
 interface Props extends Omit<ModalProps, "title" | "children"> {
  rageshakeRequestId: string;
  roomId: string;
-  onClose: () => void;
+  open: boolean;
+  onDismiss: () => void;
 }

 export const RageshakeRequestModal: FC<Props> = ({
  rageshakeRequestId,
  roomId,
-  ...rest
+  open,
+  onDismiss,
 }) => {
  const { t } = useTranslation();
  const { submitRageshake, sending, sent, error } = useSubmitRageshake();

  useEffect(() => {
-    if (sent) {
-      rest.onClose();
-    }
-  }, [sent, rest]);
+    if (sent) onDismiss();
+  }, [sent, onDismiss]);

  return (
-    <Modal title={t("Debug log request")} isDismissable {...rest}>
-      <ModalContent>
-        <Body>
-          {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
-            onPress={() =>
-              submitRageshake({
-                sendLogs: true,
-                rageshakeRequestId,
-                roomId,
-              })
-            }
-            disabled={sending}
-          >
-            {sending ? t("Sending debug logs…") : t("Send debug logs")}
-          </Button>
-        </FieldRow>
-        {error && (
-          <FieldRow>
-            <ErrorMessage error={error} />
-          </FieldRow>
+    <Modal title={t("Debug log request")} open={open} onDismiss={onDismiss}>
+      <Body>
+        {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."
        )}
-      </ModalContent>
+      </Body>
+      <FieldRow>
+        <Button
+          onPress={() =>
+            submitRageshake({
+              sendLogs: true,
+              rageshakeRequestId,
+              roomId,
+            })
+          }
+          disabled={sending}
+        >
+          {sending ? t("Sending debug logs…") : t("Send debug logs")}
+        </Button>
+      </FieldRow>
+      {error && (
+        <FieldRow>
+          <ErrorMessage error={error} />
+        </FieldRow>
+      )}
    </Modal>
  );
 };
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { FC, useEffect, useState, useCallback } from "react";
+import { FC, useEffect, useState, useCallback, ReactNode } from "react";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";

-import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
 import { useClientLegacy } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
 import { RoomAuthView } from "./RoomAuthView";
@@ -26,6 +26,8 @@ import { useUrlParams } from "../UrlParams";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
 import { useOptInAnalytics } from "../settings/useSetting";
 import { HomePage } from "../home/HomePage";
+import { platform } from "../Platform";
+import { AppSelectionModal } from "./AppSelectionModal";

 export const RoomPage: FC = () => {
  const {
@@ -35,7 +37,6 @@ export const RoomPage: FC = () => {
    isEmbedded,
    preload,
    hideHeader,
-    isPtt,
    displayName,
  } = useUrlParams();
  const roomIdOrAlias = roomId ?? roomAlias;
@@ -73,10 +74,10 @@ export const RoomPage: FC = () => {
  ]);

  const groupCallView = useCallback(
-    (groupCall: GroupCall) => (
+    (rtcSession: MatrixRTCSession) => (
      <GroupCallView
        client={client!}
-        groupCall={groupCall}
+        rtcSession={rtcSession}
        isPasswordlessUser={passwordlessUser}
        isEmbedded={isEmbedded}
        preload={preload}
@@ -86,30 +87,36 @@ export const RoomPage: FC = () => {
    [client, passwordlessUser, isEmbedded, preload, hideHeader]
  );

+  let content: ReactNode;
  if (loading || isRegistering) {
-    return <LoadingView />;
-  }
-
-  if (error) {
-    return <ErrorView error={error} />;
-  }
-
-  if (!client) {
-    return <RoomAuthView />;
-  }
-
-  if (!roomIdOrAlias) {
-    return <HomePage />;
+    content = <LoadingView />;
+  } else if (error) {
+    content = <ErrorView error={error} />;
+  } else if (!client) {
+    content = <RoomAuthView />;
+  } else if (!roomIdOrAlias) {
+    // TODO: This doesn't belong here, the app routes need to be reworked
+    content = <HomePage />;
+  } else {
+    content = (
+      <GroupCallLoader
+        client={client}
+        roomIdOrAlias={roomIdOrAlias}
+        viaServers={viaServers}
+      >
+        {groupCallView}
+      </GroupCallLoader>
+    );
  }

  return (
-    <GroupCallLoader
-      client={client}
-      roomIdOrAlias={roomIdOrAlias}
-      viaServers={viaServers}
-      createPtt={isPtt}
-    >
-      {groupCallView}
-    </GroupCallLoader>
+    <>
+      {content}
+      {/* On mobile, show a prompt to launch the mobile app. If in embedded mode,
+    that means we *are* in the mobile app and should show no further prompt. */}
+      {(platform === "android" || platform === "ios") && !isEmbedded && (
+        <AppSelectionModal roomId={roomId} />
+      )}
+    </>
  );
 };
--- a/src/room/ShareModal.module.css
+++ b/src/room/ShareModal.module.css
@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.inviteModal {
-  max-width: 413px;
-}
-
 .copyButton {
  width: 100%;
 }
--- a/src/room/ShareModal.tsx
+++ b/src/room/ShareModal.tsx
@@ -17,35 +17,30 @@ limitations under the License.
 import { FC } from "react";
 import { useTranslation } from "react-i18next";

-import { Modal, ModalContent, ModalProps } from "../Modal";
+import { Modal } from "../Modal";
 import { CopyButton } from "../button";
 import { getRoomUrl } from "../matrix-utils";
 import styles from "./ShareModal.module.css";
 import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";

-interface Props extends Omit<ModalProps, "title" | "children"> {
+interface Props {
  roomId: string;
+  open: boolean;
+  onDismiss: () => void;
 }

-export const ShareModal: FC<Props> = ({ roomId, ...rest }) => {
+export const ShareModal: FC<Props> = ({ roomId, open, onDismiss }) => {
  const { t } = useTranslation();
  const roomSharedKey = useRoomSharedKey(roomId);

  return (
-    <Modal
-      title={t("Share this call")}
-      isDismissable
-      className={styles.inviteModal}
-      {...rest}
-    >
-      <ModalContent>
-        <p>{t("Copy and share this call link")}</p>
-        <CopyButton
-          className={styles.copyButton}
-          value={getRoomUrl(roomId, roomSharedKey ?? undefined)}
-          data-testid="modal_inviteLink"
-        />
-      </ModalContent>
+    <Modal title={t("Share this call")} open={open} onDismiss={onDismiss}>
+      <p>{t("Copy and share this call link")}</p>
+      <CopyButton
+        className={styles.copyButton}
+        value={getRoomUrl(roomId, roomSharedKey ?? undefined)}
+        data-testid="modal_inviteLink"
+      />
    </Modal>
  );
 };
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -14,10 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { useEffect, useCallback, useMemo, useRef, FC } from "react";
+import { useEffect, useCallback, useMemo, useRef, FC, useState } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
-import { OverlayTriggerState } from "@react-stately/overlays";
 import { usePreviewTracks } from "@livekit/components-react";
 import {
  CreateLocalTracksOptions,
@@ -28,7 +27,6 @@ import {
 import { MicButton, SettingsButton, VideoButton } from "../button";
 import { Avatar } from "../Avatar";
 import styles from "./VideoPreview.module.css";
-import { useModalTriggerState } from "../Modal";
 import { SettingsModal } from "../settings/SettingsModal";
 import { useClient } from "../ClientContext";
 import { useMediaDevices } from "../livekit/MediaDevicesContext";
@@ -54,20 +52,16 @@ export const VideoPreview: FC<Props> = ({ matrixInfo, muteStates }) => {
  const { client } = useClient();
  const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });

-  const {
-    modalState: settingsModalState,
-    modalProps: settingsModalProps,
-  }: {
-    modalState: OverlayTriggerState;
-    modalProps: {
-      isOpen: boolean;
-      onClose: () => void;
-    };
-  } = useModalTriggerState();
+  const [settingsModalOpen, setSettingsModalOpen] = useState(false);

-  const openSettings = useCallback(() => {
-    settingsModalState.open();
-  }, [settingsModalState]);
+  const openSettings = useCallback(
+    () => setSettingsModalOpen(true),
+    [setSettingsModalOpen]
+  );
+  const closeSettings = useCallback(
+    () => setSettingsModalOpen(false),
+    [setSettingsModalOpen]
+  );

  const devices = useMediaDevices();

@@ -153,8 +147,12 @@ export const VideoPreview: FC<Props> = ({ matrixInfo, muteStates }) => {
          <SettingsButton onPress={openSettings} />
        </div>
      </>
-      {settingsModalState.isOpen && client && (
-        <SettingsModal client={client} {...settingsModalProps} />
+      {client && (
+        <SettingsModal
+          client={client}
+          open={settingsModalOpen}
+          onDismiss={closeSettings}
+        />
      )}
    </div>
  );
--- a/src/room/useActiveFocus.ts
+++ b/src/room/useActiveFocus.ts
@@ -0,0 +1,68 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { useCallback, useEffect, useState } from "react";
+import { deepCompare } from "matrix-js-sdk/src/utils";
+
+import { LivekitFocus } from "../livekit/LivekitFocus";
+
+function getActiveFocus(
+  rtcSession: MatrixRTCSession
+): LivekitFocus | undefined {
+  const oldestMembership = rtcSession.getOldestMembership();
+  return oldestMembership?.getActiveFoci()[0] as LivekitFocus;
+}
+
+/**
+ * Gets the currently active (livekit) focus for a MatrixRTC session
+ * This logic is specific to livekit foci where the whole call must use one
+ * and the same focus.
+ */
+export function useActiveFocus(
+  rtcSession: MatrixRTCSession
+): LivekitFocus | undefined {
+  const [activeFocus, setActiveFocus] = useState(() =>
+    getActiveFocus(rtcSession)
+  );
+
+  const onMembershipsChanged = useCallback(() => {
+    const newActiveFocus = getActiveFocus(rtcSession);
+
+    if (!deepCompare(activeFocus, newActiveFocus)) {
+      setActiveFocus(newActiveFocus);
+    }
+  }, [activeFocus, rtcSession]);
+
+  useEffect(() => {
+    rtcSession.on(
+      MatrixRTCSessionEvent.MembershipsChanged,
+      onMembershipsChanged
+    );
+
+    return () => {
+      rtcSession.off(
+        MatrixRTCSessionEvent.MembershipsChanged,
+        onMembershipsChanged
+      );
+    };
+  });
+
+  return activeFocus;
+}
--- a/src/room/useGroupCall.ts
+++ b/src/room/useGroupCall.ts
@@ -1,629 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { useCallback, useEffect, useState } from "react";
-import * as Sentry from "@sentry/react";
-import {
-  GroupCallEvent,
-  GroupCallState,
-  GroupCall,
-  GroupCallError,
-  GroupCallStatsReportEvent,
-  GroupCallStatsReport,
-} from "matrix-js-sdk/src/webrtc/groupCall";
-import { CallFeed, CallFeedEvent } 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 { MatrixClient, RoomStateEvent } from "matrix-js-sdk";
-import {
-  ByteSentStatsReport,
-  ConnectionStatsReport,
-  SummaryStatsReport,
-  CallFeedReport,
-} from "matrix-js-sdk/src/webrtc/stats/statsReport";
-
-import { usePageUnload } from "./usePageUnload";
-import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
-import { TranslatedError, translatedError } from "../TranslatedError";
-import { ElementWidgetActions, ScreenshareStartData, widget } from "../widget";
-import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
-import { ElementCallOpenTelemetry } from "../otel/otel";
-import { checkForParallelCalls } from "./checkForParallelCalls";
-
-enum ConnectionState {
-  EstablishingCall = "establishing call", // call hasn't been established yet
-  WaitMedia = "wait_media", // call is set up, waiting for ICE to connect
-  Connected = "connected", // media is flowing
-}
-
-export interface ParticipantInfo {
-  connectionState: ConnectionState;
-  presenter: boolean;
-}
-
-interface UseGroupCallReturnType {
-  state: GroupCallState;
-  localCallFeed?: CallFeed;
-  activeSpeaker?: CallFeed;
-  userMediaFeeds: CallFeed[];
-  microphoneMuted: boolean;
-  localVideoMuted: boolean;
-  error?: TranslatedError;
-  initLocalCallFeed: () => void;
-  enter: () => Promise<void>;
-  leave: () => void;
-  toggleLocalVideoMuted: () => void;
-  toggleMicrophoneMuted: () => void;
-  toggleScreensharing: () => void;
-  setMicrophoneMuted: (muted: boolean) => void;
-  requestingScreenshare: boolean;
-  isScreensharing: boolean;
-  screenshareFeeds: CallFeed[];
-  participants: Map<RoomMember, Map<string, ParticipantInfo>>;
-  hasLocalParticipant: boolean;
-  otelGroupCallMembership?: OTelGroupCallMembership;
-}
-
-interface State {
-  state: GroupCallState;
-  localCallFeed?: CallFeed;
-  activeSpeaker?: CallFeed;
-  userMediaFeeds: CallFeed[];
-  error?: TranslatedError;
-  microphoneMuted: boolean;
-  localVideoMuted: boolean;
-  screenshareFeeds: CallFeed[];
-  isScreensharing: boolean;
-  requestingScreenshare: boolean;
-  participants: Map<RoomMember, Map<string, ParticipantInfo>>;
-  hasLocalParticipant: boolean;
-}
-
-// This is a bit of a hack, but we keep the opentelemetry tracker object at the file
-// level so that it doesn't pop in & out of existence as react mounts & unmounts
-// components. The right solution is probably for this to live in the js-sdk and have
-// the same lifetime as groupcalls themselves.
-let groupCallOTelMembership: OTelGroupCallMembership | undefined;
-let groupCallOTelMembershipGroupCallId: string;
-
-function getParticipants(
-  groupCall: GroupCall
-): Map<RoomMember, Map<string, ParticipantInfo>> {
-  const participants = new Map<RoomMember, Map<string, ParticipantInfo>>();
-
-  for (const [member, participantsStateMap] of groupCall.participants) {
-    const participantInfoMap = new Map<string, ParticipantInfo>();
-    participants.set(member, participantInfoMap);
-
-    for (const [deviceId, participant] of participantsStateMap) {
-      const feed = groupCall.userMediaFeeds.find(
-        (f) => f.userId === member.userId && f.deviceId === deviceId
-      );
-
-      let connectionState: ConnectionState;
-      // If we allow calls without media, we have no feeds and cannot read the connection status from them.
-      // @TODO: The connection state should generally not be determined by the feed.
-      if (
-        groupCall.allowCallWithoutVideoAndAudio &&
-        !feed &&
-        !participant.screensharing
-      ) {
-        connectionState = ConnectionState.Connected;
-      } else {
-        connectionState = feed
-          ? feed.connected
-            ? ConnectionState.Connected
-            : ConnectionState.WaitMedia
-          : ConnectionState.EstablishingCall;
-      }
-      participantInfoMap.set(deviceId, {
-        connectionState,
-        presenter: participant.screensharing,
-      });
-    }
-  }
-
-  return participants;
-}
-
-export function useGroupCall(
-  groupCall: GroupCall,
-  client: MatrixClient
-): UseGroupCallReturnType {
-  const [
-    {
-      state,
-      localCallFeed,
-      activeSpeaker,
-      userMediaFeeds,
-      error,
-      microphoneMuted,
-      localVideoMuted,
-      isScreensharing,
-      screenshareFeeds,
-      participants,
-      hasLocalParticipant,
-      requestingScreenshare,
-    },
-    setState,
-  ] = useState<State>({
-    state: GroupCallState.LocalCallFeedUninitialized,
-    userMediaFeeds: [],
-    microphoneMuted: false,
-    localVideoMuted: false,
-    isScreensharing: false,
-    screenshareFeeds: [],
-    requestingScreenshare: false,
-    participants: getParticipants(groupCall),
-    hasLocalParticipant: false,
-  });
-
-  if (groupCallOTelMembershipGroupCallId !== groupCall.groupCallId) {
-    if (groupCallOTelMembership) groupCallOTelMembership.dispose();
-
-    // If the user disables analytics, this will stay around until they leave the call
-    // so analytics will be disabled once they leave.
-    if (ElementCallOpenTelemetry.instance) {
-      groupCallOTelMembership = new OTelGroupCallMembership(groupCall, client);
-      groupCallOTelMembershipGroupCallId = groupCall.groupCallId;
-    } else {
-      groupCallOTelMembership = undefined;
-    }
-  }
-
-  const updateState = useCallback(
-    (state: Partial<State>) => setState((prev) => ({ ...prev, ...state })),
-    [setState]
-  );
-
-  const doNothingMediaActionCallback = useCallback(
-    (details: MediaSessionActionDetails) => {},
-    []
-  );
-
-  const leaveCall = useCallback(() => {
-    groupCallOTelMembership?.onLeaveCall();
-    groupCall.leave();
-  }, [groupCall]);
-
-  useEffect(() => {
-    // disable the media action keys, otherwise audio elements get paused when
-    // the user presses media keys or unplugs headphones, etc.
-    // Note there are actions for muting / unmuting a microphone & hanging up
-    // which we could wire up.
-    const mediaActions: MediaSessionAction[] = [
-      "play",
-      "pause",
-      "stop",
-      "nexttrack",
-      "previoustrack",
-    ];
-
-    for (const mediaAction of mediaActions) {
-      navigator.mediaSession?.setActionHandler(
-        mediaAction,
-        doNothingMediaActionCallback
-      );
-    }
-
-    return () => {
-      for (const mediaAction of mediaActions) {
-        navigator.mediaSession?.setActionHandler(mediaAction, null);
-      }
-    };
-  }, [doNothingMediaActionCallback]);
-
-  useEffect(() => {
-    function onGroupCallStateChanged() {
-      updateState({
-        state: groupCall.state,
-        localCallFeed: groupCall.localCallFeed,
-        activeSpeaker: groupCall.activeSpeaker,
-        userMediaFeeds: [...groupCall.userMediaFeeds],
-        microphoneMuted: groupCall.isMicrophoneMuted(),
-        localVideoMuted: groupCall.isLocalVideoMuted(),
-        isScreensharing: groupCall.isScreensharing(),
-        screenshareFeeds: [...groupCall.screenshareFeeds],
-      });
-    }
-
-    const prevUserMediaFeeds = new Set<CallFeed>();
-
-    function onUserMediaFeedsChanged(userMediaFeeds: CallFeed[]): void {
-      for (const feed of prevUserMediaFeeds) {
-        feed.off(CallFeedEvent.ConnectedChanged, onConnectedChanged);
-      }
-      prevUserMediaFeeds.clear();
-
-      for (const feed of userMediaFeeds) {
-        feed.on(CallFeedEvent.ConnectedChanged, onConnectedChanged);
-        prevUserMediaFeeds.add(feed);
-      }
-
-      updateState({
-        userMediaFeeds: [...userMediaFeeds],
-        participants: getParticipants(groupCall),
-      });
-    }
-
-    const prevScreenshareFeeds = new Set<CallFeed>();
-
-    function onScreenshareFeedsChanged(screenshareFeeds: CallFeed[]): void {
-      for (const feed of prevScreenshareFeeds) {
-        feed.off(CallFeedEvent.ConnectedChanged, onConnectedChanged);
-      }
-      prevScreenshareFeeds.clear();
-
-      for (const feed of screenshareFeeds) {
-        feed.on(CallFeedEvent.ConnectedChanged, onConnectedChanged);
-        prevScreenshareFeeds.add(feed);
-      }
-
-      updateState({
-        screenshareFeeds: [...screenshareFeeds],
-      });
-    }
-
-    function onConnectedChanged(connected: boolean): void {
-      updateState({
-        participants: getParticipants(groupCall),
-      });
-    }
-
-    function onActiveSpeakerChanged(activeSpeaker: CallFeed | undefined): void {
-      updateState({
-        activeSpeaker: activeSpeaker,
-      });
-    }
-
-    function onLocalMuteStateChanged(
-      microphoneMuted: boolean,
-      localVideoMuted: boolean
-    ): void {
-      updateState({
-        microphoneMuted,
-        localVideoMuted,
-      });
-    }
-
-    function onLocalScreenshareStateChanged(
-      isScreensharing: boolean,
-      _localScreenshareFeed?: CallFeed,
-      localDesktopCapturerSourceId?: string
-    ): void {
-      updateState({
-        isScreensharing,
-      });
-    }
-
-    function onCallsChanged(): void {
-      updateState({ participants: getParticipants(groupCall) });
-    }
-
-    function onParticipantsChanged(): void {
-      updateState({
-        participants: getParticipants(groupCall),
-        hasLocalParticipant: groupCall.hasLocalParticipant(),
-      });
-    }
-
-    function onError(e: GroupCallError): void {
-      Sentry.captureException(e);
-    }
-
-    function onConnectionStatsReport(
-      report: GroupCallStatsReport<ConnectionStatsReport>
-    ): void {
-      groupCallOTelMembership?.onConnectionStatsReport(report);
-    }
-
-    function onByteSentStatsReport(
-      report: GroupCallStatsReport<ByteSentStatsReport>
-    ): void {
-      groupCallOTelMembership?.onByteSentStatsReport(report);
-    }
-
-    function onSummaryStatsReport(
-      report: GroupCallStatsReport<SummaryStatsReport>
-    ): void {
-      groupCallOTelMembership?.onSummaryStatsReport(report);
-    }
-
-    function onCallFeedStatsReport(
-      report: GroupCallStatsReport<CallFeedReport>
-    ): void {
-      groupCallOTelMembership?.onCallFeedStatsReport(report);
-    }
-
-    groupCall.on(GroupCallEvent.GroupCallStateChanged, onGroupCallStateChanged);
-    groupCall.on(GroupCallEvent.UserMediaFeedsChanged, onUserMediaFeedsChanged);
-    groupCall.on(
-      GroupCallEvent.ScreenshareFeedsChanged,
-      onScreenshareFeedsChanged
-    );
-    groupCall.on(GroupCallEvent.ActiveSpeakerChanged, onActiveSpeakerChanged);
-    groupCall.on(GroupCallEvent.LocalMuteStateChanged, onLocalMuteStateChanged);
-    groupCall.on(
-      GroupCallEvent.LocalScreenshareStateChanged,
-      onLocalScreenshareStateChanged
-    );
-    groupCall.on(GroupCallEvent.CallsChanged, onCallsChanged);
-    groupCall.on(GroupCallEvent.ParticipantsChanged, onParticipantsChanged);
-    groupCall.on(GroupCallEvent.Error, onError);
-    groupCall.on(
-      GroupCallStatsReportEvent.ConnectionStats,
-      onConnectionStatsReport
-    );
-    groupCall.on(
-      GroupCallStatsReportEvent.ByteSentStats,
-      onByteSentStatsReport
-    );
-    groupCall.on(GroupCallStatsReportEvent.SummaryStats, onSummaryStatsReport);
-    groupCall.on(
-      GroupCallStatsReportEvent.CallFeedStats,
-      onCallFeedStatsReport
-    );
-
-    groupCall.room.currentState.on(
-      RoomStateEvent.Update,
-      checkForParallelCalls
-    );
-
-    updateState({
-      error: undefined,
-      state: groupCall.state,
-      localCallFeed: groupCall.localCallFeed,
-      activeSpeaker: groupCall.activeSpeaker,
-      userMediaFeeds: [...groupCall.userMediaFeeds],
-      microphoneMuted: groupCall.isMicrophoneMuted(),
-      localVideoMuted: groupCall.isLocalVideoMuted(),
-      isScreensharing: groupCall.isScreensharing(),
-      screenshareFeeds: [...groupCall.screenshareFeeds],
-      participants: getParticipants(groupCall),
-      hasLocalParticipant: groupCall.hasLocalParticipant(),
-    });
-
-    return () => {
-      groupCall.removeListener(
-        GroupCallEvent.GroupCallStateChanged,
-        onGroupCallStateChanged
-      );
-      groupCall.removeListener(
-        GroupCallEvent.UserMediaFeedsChanged,
-        onUserMediaFeedsChanged
-      );
-      groupCall.removeListener(
-        GroupCallEvent.ScreenshareFeedsChanged,
-        onScreenshareFeedsChanged
-      );
-      groupCall.removeListener(
-        GroupCallEvent.ActiveSpeakerChanged,
-        onActiveSpeakerChanged
-      );
-      groupCall.removeListener(
-        GroupCallEvent.LocalMuteStateChanged,
-        onLocalMuteStateChanged
-      );
-      groupCall.removeListener(
-        GroupCallEvent.LocalScreenshareStateChanged,
-        onLocalScreenshareStateChanged
-      );
-      groupCall.removeListener(GroupCallEvent.CallsChanged, onCallsChanged);
-      groupCall.removeListener(
-        GroupCallEvent.ParticipantsChanged,
-        onParticipantsChanged
-      );
-      groupCall.removeListener(GroupCallEvent.Error, onError);
-      groupCall.removeListener(
-        GroupCallStatsReportEvent.ConnectionStats,
-        onConnectionStatsReport
-      );
-      groupCall.removeListener(
-        GroupCallStatsReportEvent.ByteSentStats,
-        onByteSentStatsReport
-      );
-      groupCall.removeListener(
-        GroupCallStatsReportEvent.SummaryStats,
-        onSummaryStatsReport
-      );
-      groupCall.removeListener(
-        GroupCallStatsReportEvent.CallFeedStats,
-        onCallFeedStatsReport
-      );
-      groupCall.room.currentState.off(
-        RoomStateEvent.Update,
-        checkForParallelCalls
-      );
-      leaveCall();
-    };
-  }, [groupCall, updateState, leaveCall]);
-
-  usePageUnload(() => {
-    leaveCall();
-  });
-
-  const initLocalCallFeed = useCallback(
-    () => groupCall.initLocalCallFeed(),
-    [groupCall]
-  );
-
-  const enter = useCallback(async () => {
-    if (
-      groupCall.state !== GroupCallState.LocalCallFeedUninitialized &&
-      groupCall.state !== GroupCallState.LocalCallFeedInitialized
-    ) {
-      return;
-    }
-
-    PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
-    PosthogAnalytics.instance.eventCallStarted.track(groupCall.groupCallId);
-
-    // This must be called before we start trying to join the call, as we need to
-    // have started tracking by the time calls start getting created.
-    groupCallOTelMembership?.onJoinCall();
-
-    await groupCall.enter().catch((error) => {
-      console.error(error);
-      updateState({ error });
-    });
-  }, [groupCall, updateState]);
-
-  const toggleLocalVideoMuted = useCallback(() => {
-    const toggleToMute = !groupCall.isLocalVideoMuted();
-    groupCall.setLocalVideoMuted(toggleToMute);
-    groupCallOTelMembership?.onToggleLocalVideoMuted(toggleToMute);
-    // TODO: These explict posthog calls should be unnecessary now with the posthog otel exporter?
-    PosthogAnalytics.instance.eventMuteCamera.track(
-      toggleToMute,
-      groupCall.groupCallId
-    );
-  }, [groupCall]);
-
-  const setMicrophoneMuted = useCallback(
-    (setMuted: boolean) => {
-      groupCall.setMicrophoneMuted(setMuted);
-      groupCallOTelMembership?.onSetMicrophoneMuted(setMuted);
-      PosthogAnalytics.instance.eventMuteMicrophone.track(
-        setMuted,
-        groupCall.groupCallId
-      );
-    },
-    [groupCall]
-  );
-
-  const toggleMicrophoneMuted = useCallback(() => {
-    const toggleToMute = !groupCall.isMicrophoneMuted();
-    groupCallOTelMembership?.onToggleMicrophoneMuted(toggleToMute);
-    setMicrophoneMuted(toggleToMute);
-  }, [groupCall, setMicrophoneMuted]);
-
-  const toggleScreensharing = useCallback(async () => {
-    groupCallOTelMembership?.onToggleScreensharing(!groupCall.isScreensharing);
-
-    if (!groupCall.isScreensharing()) {
-      // toggling on
-      updateState({ requestingScreenshare: true });
-
-      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, updateState]);
-
-  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, updateState]
-  );
-
-  const onScreenshareStop = useCallback(
-    async (ev: CustomEvent<IWidgetApiRequest>) => {
-      updateState({ requestingScreenshare: false });
-      await groupCall.setScreensharingEnabled(false);
-      await widget?.api.transport.reply(ev.detail, {});
-    },
-    [groupCall, updateState]
-  );
-
-  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 = translatedError(
-        "WebRTC is not supported or is being blocked in this browser.",
-        t
-      );
-      console.error(error);
-      updateState({ error });
-    }
-  }, [t, updateState]);
-
-  return {
-    state,
-    localCallFeed,
-    activeSpeaker,
-    userMediaFeeds,
-    microphoneMuted,
-    localVideoMuted,
-    error,
-    initLocalCallFeed,
-    enter,
-    leave: leaveCall,
-    toggleLocalVideoMuted,
-    toggleMicrophoneMuted,
-    toggleScreensharing,
-    setMicrophoneMuted,
-    requestingScreenshare,
-    isScreensharing,
-    screenshareFeeds,
-    participants,
-    hasLocalParticipant,
-    otelGroupCallMembership: groupCallOTelMembership,
-  };
-}
--- a/src/room/useLoadGroupCall.ts
+++ b/src/room/useLoadGroupCall.ts
@@ -15,32 +15,23 @@ limitations under the License.
 */

 import { useState, useEffect } from "react";
-import { EventType } from "matrix-js-sdk/src/@types/event";
-import {
-  GroupCallType,
-  GroupCallIntent,
-} 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 { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { randomString } from "matrix-js-sdk/src/randomstring";

 import type { Room } from "matrix-js-sdk/src/models/room";
 import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
 import { setLocalStorageItem } from "../useLocalStorage";
 import { isLocalRoomId, createRoom, roomNameFromRoomId } from "../matrix-utils";
-import { translatedError } from "../TranslatedError";
-import { widget } from "../widget";
 import { useEnableE2EE } from "../settings/useSetting";
 import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";

-const STATS_COLLECT_INTERVAL_TIME_MS = 10000;
-
 export type GroupCallLoaded = {
  kind: "loaded";
-  groupCall: GroupCall;
+  rtcSession: MatrixRTCSession;
 };

 export type GroupCallLoadFailed = {
@@ -65,8 +56,7 @@ export interface GroupCallLoadState {
 export const useLoadGroupCall = (
  client: MatrixClient,
  roomIdOrAlias: string,
-  viaServers: string[],
-  createPtt: boolean
+  viaServers: string[]
 ): GroupCallStatus => {
  const { t } = useTranslation();
  const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
@@ -110,7 +100,6 @@ export const useLoadGroupCall = (
          const [, roomId] = await createRoom(
            client,
            roomNameFromRoomId(roomIdOrAlias),
-            createPtt,
            e2eeEnabled ?? false
          );

@@ -130,61 +119,12 @@ export const useLoadGroupCall = (
      }
    };

-    const fetchOrCreateGroupCall = async (): Promise<GroupCall> => {
+    const fetchOrCreateGroupCall = async (): Promise<MatrixRTCSession> => {
      const room = await fetchOrCreateRoom();
      logger.debug(`Fetched / joined room ${roomIdOrAlias}`);
-      let groupCall = client.getGroupCallForRoom(room.roomId);
-      logger.debug("Got group call", groupCall?.groupCallId);

-      if (groupCall) {
-        groupCall.setGroupCallStatsInterval(STATS_COLLECT_INTERVAL_TIME_MS);
-        return groupCall;
-      }
-
-      if (
-        !widget &&
-        room.currentState.mayClientSendStateEvent(
-          EventType.GroupCallPrefix,
-          client
-        )
-      ) {
-        // The call doesn't exist, but we can create it
-        console.log(
-          `No call found in ${roomIdOrAlias}: creating ${
-            createPtt ? "PTT" : "video"
-          } call`
-        );
-        groupCall = await client.createGroupCall(
-          room.roomId,
-          createPtt ? GroupCallType.Voice : GroupCallType.Video,
-          createPtt,
-          GroupCallIntent.Room
-        );
-        groupCall.setGroupCallStatsInterval(STATS_COLLECT_INTERVAL_TIME_MS);
-        return groupCall;
-      }
-
-      // We don't have permission to create the call, so all we can do is wait
-      // for one to come in
-      return new Promise((resolve, reject) => {
-        const onGroupCallIncoming = (groupCall: GroupCall) => {
-          if (groupCall?.room.roomId === room.roomId) {
-            clearTimeout(timeout);
-            groupCall.setGroupCallStatsInterval(STATS_COLLECT_INTERVAL_TIME_MS);
-            client.off(
-              GroupCallEventHandlerEvent.Incoming,
-              onGroupCallIncoming
-            );
-            resolve(groupCall);
-          }
-        };
-        client.on(GroupCallEventHandlerEvent.Incoming, onGroupCallIncoming);
-
-        const timeout = setTimeout(() => {
-          client.off(GroupCallEventHandlerEvent.Incoming, onGroupCallIncoming);
-          reject(translatedError("Fetching group call timed out.", t));
-        }, 30000);
-      });
+      const rtcSession = client.matrixRTC.getRoomSession(room);
+      return rtcSession;
    };

    const waitForClientSyncing = async () => {
@@ -207,9 +147,9 @@ export const useLoadGroupCall = (

    waitForClientSyncing()
      .then(fetchOrCreateGroupCall)
-      .then((groupCall) => setState({ kind: "loaded", groupCall }))
+      .then((rtcSession) => setState({ kind: "loaded", rtcSession }))
      .catch((error) => setState({ kind: "failed", error }));
-  }, [client, roomIdOrAlias, viaServers, createPtt, t, e2eeEnabled]);
+  }, [client, roomIdOrAlias, viaServers, t, e2eeEnabled]);

  return state;
 };
--- a/src/room/usePageUnload.ts
+++ b/src/room/usePageUnload.ts
@@ -16,21 +16,7 @@ limitations under the License.

 import { useEffect } from "react";

-// https://stackoverflow.com/a/9039885
-function isIOS() {
-  return (
-    [
-      "iPad Simulator",
-      "iPhone Simulator",
-      "iPod Simulator",
-      "iPad",
-      "iPhone",
-      "iPod",
-    ].includes(navigator.platform) ||
-    // iPad on iOS 13 detection
-    (navigator.userAgent.includes("Mac") && "ontouchend" in document)
-  );
-}
+import { platform } from "../Platform";

 export function usePageUnload(callback: () => void) {
  useEffect(() => {
@@ -53,7 +39,7 @@ export function usePageUnload(callback: () => void) {
    }

    // iOS doesn't fire beforeunload event, so leave the call when you hide the page.
-    if (isIOS()) {
+    if (platform === "ios") {
      window.addEventListener("pagehide", onBeforeUnload);
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
--- a/src/room/useSentryGroupCallHandler.ts
+++ b/src/room/useSentryGroupCallHandler.ts
@@ -1,46 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { useEffect } from "react";
-import * as Sentry from "@sentry/react";
-import { GroupCall, GroupCallEvent } from "matrix-js-sdk/src/webrtc/groupCall";
-import { CallEvent, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
-
-export function useSentryGroupCallHandler(groupCall: GroupCall) {
-  useEffect(() => {
-    function onHangup(call: MatrixCall) {
-      if (call.hangupReason === "ice_failed") {
-        Sentry.captureException(new Error("Call hangup due to ICE failure."));
-      }
-    }
-
-    function onError(error: Error) {
-      Sentry.captureException(error);
-    }
-
-    if (groupCall) {
-      groupCall.on(CallEvent.Hangup, onHangup);
-      groupCall.on(GroupCallEvent.Error, onError);
-    }
-
-    return () => {
-      if (groupCall) {
-        groupCall.removeListener(CallEvent.Hangup, onHangup);
-        groupCall.removeListener(GroupCallEvent.Error, onError);
-      }
-    };
-  }, [groupCall]);
-}
--- a/src/rtcSessionHelpers.ts
+++ b/src/rtcSessionHelpers.ts
@@ -0,0 +1,53 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+
+import { PosthogAnalytics } from "./analytics/PosthogAnalytics";
+import { LivekitFocus } from "./livekit/LivekitFocus";
+import { Config } from "./config/Config";
+
+function makeFocus(livekitAlias: string): LivekitFocus {
+  const urlFromConf = Config.get().livekit!.livekit_service_url;
+  if (!urlFromConf) {
+    throw new Error("No livekit_service_url is configured!");
+  }
+
+  return {
+    type: "livekit",
+    livekit_service_url: urlFromConf,
+    livekit_alias: livekitAlias,
+  };
+}
+
+export function enterRTCSession(rtcSession: MatrixRTCSession) {
+  PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
+  PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
+
+  // This must be called before we start trying to join the call, as we need to
+  // have started tracking by the time calls start getting created.
+  //groupCallOTelMembership?.onJoinCall();
+
+  // right now we asume everything is a room-scoped call
+  const livekitAlias = rtcSession.room.roomId;
+
+  rtcSession.joinRoomSession([makeFocus(livekitAlias)]);
+}
+
+export function leaveRTCSession(rtcSession: MatrixRTCSession) {
+  //groupCallOTelMembership?.onLeaveCall();
+  rtcSession.leaveRoomSession();
+}
--- a/src/settings/SettingsModal.module.css
+++ b/src/settings/SettingsModal.module.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,18 +15,13 @@ limitations under the License.
 */

 .settingsModal {
-  width: 774px;
-  height: 480px;
+  block-size: 550px;
 }

 .settingsModal p {
  color: var(--cpd-color-text-secondary);
 }

-.tabContainer {
-  padding: 27px 20px;
-}
-
 .fieldRowText {
  margin-bottom: 0;
 }
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -51,11 +51,11 @@ import {
 } from "../livekit/MediaDevicesContext";

 interface Props {
-  isOpen: boolean;
+  open: boolean;
+  onDismiss: () => void;
  client: MatrixClient;
  roomId?: string;
  defaultTab?: string;
-  onClose: () => void;
 }

 export const SettingsModal = (props: Props) => {
@@ -119,7 +119,7 @@ export const SettingsModal = (props: Props) => {
  );

  const devices = useMediaDevices();
-  useMediaDeviceNames(devices);
+  useMediaDeviceNames(devices, props.open);

  const audioTab = (
    <TabItem
@@ -289,10 +289,9 @@ export const SettingsModal = (props: Props) => {
  return (
    <Modal
      title={t("Settings")}
-      isDismissable
-      mobileFullScreen
      className={styles.settingsModal}
-      {...props}
+      open={props.open}
+      onDismiss={props.onDismiss}
    >
      <TabContainer
        onSelectionChange={onSelectedTabChanged}
--- a/src/settings/submit-rageshake.ts
+++ b/src/settings/submit-rageshake.ts
@@ -14,20 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { useCallback, useContext, useEffect, useState } from "react";
+import {
+  ComponentProps,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import pako from "pako";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { OverlayTriggerState } from "@react-stately/overlays";
 import { ClientEvent } from "matrix-js-sdk/src/client";

 import { getLogsForReport } from "./rageshake";
 import { useClient } from "../ClientContext";
 import { InspectorContext } from "../room/GroupCallInspector";
-import { useModalTriggerState } from "../Modal";
 import { Config } from "../config/Config";
 import { ElementCallOpenTelemetry } from "../otel/otel";
+import { RageshakeRequestModal } from "../room/RageshakeRequestModal";

 const gzip = (text: string): Blob => {
  // encode as UTF-8
@@ -343,22 +348,12 @@ export function useRageshakeRequest(): (

  return sendRageshakeRequest;
 }
-interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-interface ModalPropsWithId extends ModalProps {
-  rageshakeRequestId: string;
-}

-export function useRageshakeRequestModal(roomId: string): {
-  modalState: OverlayTriggerState;
-  modalProps: ModalPropsWithId;
-} {
-  const { modalState, modalProps } = useModalTriggerState() as {
-    modalState: OverlayTriggerState;
-    modalProps: ModalProps;
-  };
+export function useRageshakeRequestModal(
+  roomId: string
+): ComponentProps<typeof RageshakeRequestModal> {
+  const [open, setOpen] = useState(false);
+  const onDismiss = useCallback(() => setOpen(false), [setOpen]);
  const { client } = useClient();
  const [rageshakeRequestId, setRageshakeRequestId] = useState<string>();

@@ -374,7 +369,7 @@ export function useRageshakeRequestModal(roomId: string): {
        client.getUserId() !== event.getSender()
      ) {
        setRageshakeRequestId(event.getContent().request_id);
-        modalState.open();
+        setOpen(true);
      }
    };

@@ -383,10 +378,12 @@ export function useRageshakeRequestModal(roomId: string): {
    return () => {
      client.removeListener(ClientEvent.Event, onEvent);
    };
-  }, [modalState.open, roomId, client, modalState]);
+  }, [setOpen, roomId, client]);

  return {
-    modalState,
-    modalProps: { ...modalProps, rageshakeRequestId: rageshakeRequestId ?? "" },
+    rageshakeRequestId: rageshakeRequestId ?? "",
+    roomId,
+    open,
+    onDismiss,
  };
 }
--- a/src/tabs/Tabs.module.css
+++ b/src/tabs/Tabs.module.css
@@ -78,32 +78,3 @@ limitations under the License.
  padding: 0;
  overflow-y: auto;
 }
-
-@media (min-width: 800px) {
-  .tab {
-    width: 200px;
-    padding: 0 16px;
-  }
-
-  .tab > * {
-    margin: 0 12px 0 0;
-  }
-
-  .tabContainer {
-    width: 100%;
-    flex-direction: row;
-    padding: 20px 18px;
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-
-  .tabList {
-    flex-direction: column;
-    margin-bottom: 0;
-    gap: 0;
-  }
-
-  .tabPanel {
-    padding: 0 40px;
-  }
-}
--- a/src/useMatrixRTCSessionJoinState.ts
+++ b/src/useMatrixRTCSessionJoinState.ts
@@ -0,0 +1,50 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { logger } from "matrix-js-sdk/src/logger";
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { useCallback, useEffect, useState } from "react";
+
+export function useMatrixRTCSessionJoinState(
+  rtcSession: MatrixRTCSession
+): boolean {
+  const [isJoined, setJoined] = useState(rtcSession.isJoined());
+
+  const onJoinStateChanged = useCallback(() => {
+    logger.info(
+      `Session in room ${rtcSession.room.roomId} changed to ${
+        rtcSession.isJoined() ? "joined" : "left"
+      }`
+    );
+    setJoined(rtcSession.isJoined());
+  }, [rtcSession]);
+
+  useEffect(() => {
+    rtcSession.on(MatrixRTCSessionEvent.JoinStateChanged, onJoinStateChanged);
+
+    return () => {
+      rtcSession.off(
+        MatrixRTCSessionEvent.JoinStateChanged,
+        onJoinStateChanged
+      );
+    };
+  }, [rtcSession, onJoinStateChanged]);
+
+  return isJoined;
+}
--- a/src/useMatrixRTCSessionMemberships.ts
+++ b/src/useMatrixRTCSessionMemberships.ts
@@ -0,0 +1,52 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { logger } from "matrix-js-sdk/src/logger";
+import { CallMembership } from "matrix-js-sdk/src/matrixrtc/CallMembership";
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { useCallback, useEffect, useState } from "react";
+
+export function useMatrixRTCSessionMemberships(
+  rtcSession: MatrixRTCSession
+): CallMembership[] {
+  const [memberships, setMemberships] = useState(rtcSession.memberships);
+
+  const onMembershipsChanged = useCallback(() => {
+    logger.info(
+      `Memberships changed for call in room ${rtcSession.room.roomId} (${rtcSession.memberships.length} members)`
+    );
+    setMemberships(rtcSession.memberships);
+  }, [rtcSession]);
+
+  useEffect(() => {
+    rtcSession.on(
+      MatrixRTCSessionEvent.MembershipsChanged,
+      onMembershipsChanged
+    );
+
+    return () => {
+      rtcSession.off(
+        MatrixRTCSessionEvent.MembershipsChanged,
+        onMembershipsChanged
+      );
+    };
+  }, [rtcSession, onMembershipsChanged]);
+
+  return memberships;
+}
--- a/src/usePageFocusStyle.ts
+++ b/src/usePageFocusStyle.ts
@@ -1,39 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { useEffect } from "react";
-import { useFocusVisible } from "@react-aria/interactions";
-
-import styles from "./usePageFocusStyle.module.css";
-
-export function usePageFocusStyle(): void {
-  const { isFocusVisible } = useFocusVisible();
-
-  useEffect(() => {
-    const classList = document.body.classList;
-    const hasClass = classList.contains(styles.hideFocus);
-
-    if (isFocusVisible && hasClass) {
-      classList.remove(styles.hideFocus);
-    } else if (!isFocusVisible && !hasClass) {
-      classList.add(styles.hideFocus);
-    }
-
-    return () => {
-      classList.remove(styles.hideFocus);
-    };
-  }, [isFocusVisible]);
-}
--- a/src/video-grid/BigGrid.module.css
+++ b/src/video-grid/BigGrid.module.css
@@ -16,14 +16,13 @@ limitations under the License.

 .bigGrid {
  display: grid;
-  grid-auto-rows: 163px;
-  gap: 8px;
+  grid-auto-rows: 130px;
+  gap: var(--cpd-space-2x);
 }

@media (min-width: 800px) {
  .bigGrid {
-    grid-auto-rows: 183px;
-    column-gap: 18px;
-    row-gap: 21px;
+    grid-auto-rows: 135px;
+    gap: var(--cpd-space-5x);
  }
 }
--- a/src/video-grid/BigGrid.tsx
+++ b/src/video-grid/BigGrid.tsx
@@ -957,7 +957,7 @@ function updateTiles(g: Grid, tiles: TileDescriptor<unknown>[]): Grid {
 }

 function updateBounds(g: Grid, bounds: RectReadOnly): Grid {
-  const columns = Math.max(2, Math.floor(bounds.width * 0.0045));
+  const columns = Math.max(2, Math.floor(bounds.width * 0.0055));
  return columns === g.columns ? g : resize(g, columns);
 }

--- a/src/video-grid/NewVideoGrid.tsx
+++ b/src/video-grid/NewVideoGrid.tsx
@@ -178,7 +178,7 @@ export function NewVideoGrid<T>({
      from: ({ x, y, width, height }: Tile<T>) => ({
        opacity: 0,
        scale: 0,
-        shadow: 1,
+        shadow: 0,
        shadowSpread: 0,
        zIndex: 1,
        x,
@@ -221,7 +221,7 @@ export function NewVideoGrid<T>({
          ? {
              scale: 1,
              zIndex: 1,
-              shadow: 1,
+              shadow: 0,
              x: tile.x,
              y: tile.y,
              width: tile.width,
--- a/src/video-grid/VideoGrid.tsx
+++ b/src/video-grid/VideoGrid.tsx
@@ -1082,7 +1082,7 @@ export function VideoGrid<T>({
            y?: number;
            width?: number;
            height?: number;
-          } = { shadow: 1, scale: 0, opacity: 0 };
+          } = { shadow: 0, scale: 0, opacity: 0 };
          let reset = false;

          if (!tilePositionsWereValid) {
@@ -1105,7 +1105,7 @@ export function VideoGrid<T>({
            scale: remove ? 0 : 1,
            opacity: remove ? 0 : 1,
            zIndex: tilePosition.zIndex,
-            shadow: 1,
+            shadow: oneOnOneLayout && tile.item.local ? 1 : 0,
            shadowSpread: oneOnOneLayout && tile.item.local ? 1 : 0,
            from,
            reset,
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -20,14 +20,11 @@ limitations under the License.
  top: 0;
  container-name: videoTile;
  container-type: size;
-  --tileRadius: 8px;
-  border-radius: var(--tileRadius);
+  border-radius: var(--cpd-space-4x);
  overflow: hidden;
  cursor: pointer;
-
-  /* HACK: This has no visual effect due to the short duration, but allows the
-  JS to detect movement via the transform property for audio spatialization */
-  transition: transform 0.000000001s;
+  outline: 2px solid rgba(0, 0, 0, 0);
+  transition: outline-radius ease 0.15s, outline-color ease 0.15s;
 }

 .videoTile * {
@@ -45,21 +42,14 @@ limitations under the License.
  transform: scaleX(-1);
 }

-.videoTile::after {
-  position: absolute;
-  top: -1px;
-  left: -1px;
-  right: -1px;
-  bottom: -1px;
-  content: "";
-  border-radius: var(--tileRadius);
-  box-shadow: inset 0 0 0 4px var(--cpd-color-border-accent) !important;
-  opacity: 0;
-  transition: opacity ease 0.15s;
+.videoTile.speaking {
+  outline: 4px solid var(--cpd-color-border-accent);
 }

-.videoTile.speaking::after {
-  opacity: 1;
+@media (hover: hover) {
+  .videoTile:hover {
+    outline: 2px solid var(--cpd-color-gray-1400);
+  }
 }

 .videoTile.maximised {
@@ -73,30 +63,47 @@ limitations under the License.
  object-fit: contain;
 }

-.infoBubble {
+.nameTag {
  position: absolute;
-  height: 24px;
-  padding: 0 8px;
+  inset-inline-start: var(--cpd-space-1x);
+  inset-block-end: var(--cpd-space-1x);
+  padding: var(--cpd-space-1x);
+  padding-block: var(--cpd-space-1x);
  color: var(--cpd-color-text-primary);
-  background-color: var(--stopgap-background-85);
+  /* TODO: un-hardcode this color. It comes from the dark theme. */
+  background-color: rgba(237, 244, 252, 0.79);
  display: flex;
  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
+  border-radius: var(--cpd-radius-pill-effect);
  user-select: none;
  max-width: calc(100% - 48px);
  overflow: hidden;
  z-index: 1;
+  box-shadow: var(--small-drop-shadow);
 }

-.infoBubble > svg {
-  height: 16px;
-  width: 16px;
-  margin-right: 4px;
+:global(.cpd-theme-dark) .nameTag {
+  /* TODO: un-hardcode this color. It comes from the light theme. */
+  background-color: rgba(2, 7, 13, 0.77);
 }

-.infoBubble > svg * {
-  fill: var(--cpd-color-icon-primary);
+.nameTag > svg {
+  flex-shrink: 0;
+}
+
+.nameTag > svg[data-muted="true"] {
+  color: var(--cpd-color-icon-secondary);
+}
+
+.nameTag > svg[data-muted="false"] {
+  color: var(--cpd-color-icon-primary);
+}
+
+.nameTag span {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-inline: var(--cpd-space-2x);
 }

 .toolbar {
@@ -137,24 +144,6 @@ limitations under the License.
  height: 16px;
 }

-.memberName {
-  left: 16px;
-  bottom: 16px;
-}
-
-.memberName > :last-child {
-  margin-right: 0px;
-}
-
-.memberName span {
-  font-size: var(--font-size-caption);
-  font-weight: 400;
-  line-height: var(--font-size-body);
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
 .videoMutedOverlay {
  width: 100%;
  height: 100%;
@@ -192,12 +181,6 @@ limitations under the License.
  background-color: rgba(0, 0, 0, 0.5);
 }

-@media (min-width: 800px) {
-  .videoTile {
-    --tileRadius: 20px;
-  }
-}
-
 /* CSS makes us put a condition here, even though all we want to do is
 unconditionally select the container so we can use cqmin units */
@container videoTile (width > 0) {
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { ComponentProps, forwardRef, useCallback, useEffect } from "react";
+import {
+  ComponentProps,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import { animated } from "@react-spring/web";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
@@ -28,14 +34,14 @@ import {
  RoomMember,
  RoomMemberEvent,
 } from "matrix-js-sdk/src/models/room-member";
+import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
+import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg";
+import { Text } from "@vector-im/compound-web";

 import { Avatar } from "../Avatar";
 import styles from "./VideoTile.module.css";
-import { ReactComponent as MicIcon } from "../icons/Mic.svg";
-import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
 import { useReactiveState } from "../useReactiveState";
 import { AudioButton, FullscreenButton } from "../button/Button";
-import { useModalTriggerState } from "../Modal";
 import { VideoTileSettingsModal } from "./VideoTileSettingsModal";

 export interface ItemData {
@@ -102,22 +108,30 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
      }
    }, [member, setDisplayName]);

-    const { isMuted: microphoneMuted } = useMediaTrack(
-      content === TileContent.UserMedia
-        ? Track.Source.Microphone
-        : Track.Source.ScreenShareAudio,
-      sfuParticipant
-    );
+    const muted =
+      useMediaTrack(
+        content === TileContent.UserMedia
+          ? Track.Source.Microphone
+          : Track.Source.ScreenShareAudio,
+        sfuParticipant
+      ).isMuted !== false;
+
+    const MicIcon = muted ? MicOffSolidIcon : MicOnSolidIcon;

    const onFullscreen = useCallback(() => {
      onToggleFullscreen(data.id);
    }, [data, onToggleFullscreen]);

-    const {
-      modalState: videoTileSettingsModalState,
-      modalProps: videoTileSettingsModalProps,
-    } = useModalTriggerState();
-    const onOptionsPress = videoTileSettingsModalState.open;
+    const [videoTileSettingsModalOpen, setVideoTileSettingsModalOpen] =
+      useState(false);
+    const openVideoTileSettingsModal = useCallback(
+      () => setVideoTileSettingsModalOpen(true),
+      [setVideoTileSettingsModalOpen]
+    );
+    const closeVideoTileSettingsModal = useCallback(
+      () => setVideoTileSettingsModalOpen(false),
+      [setVideoTileSettingsModalOpen]
+    );

    const toolbarButtons: JSX.Element[] = [];
    if (!sfuParticipant.isLocal) {
@@ -126,7 +140,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
          key="localVolume"
          className={styles.button}
          volume={(sfuParticipant as RemoteParticipant).getVolume() ?? 0}
-          onPress={onOptionsPress}
+          onPress={openVideoTileSettingsModal}
        />
      );

@@ -153,7 +167,6 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
            sfuParticipant.isSpeaking &&
            content === TileContent.UserMedia &&
            showSpeakingIndicator,
-          [styles.muted]: microphoneMuted,
          [styles.screenshare]: content === TileContent.ScreenShare,
          [styles.maximised]: maximised,
        })}
@@ -182,9 +195,16 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
            <span>{t("{{displayName}} is presenting", { displayName })}</span>
          </div>
        ) : (
-          <div className={classNames(styles.infoBubble, styles.memberName)}>
-            {microphoneMuted === false ? <MicIcon /> : <MicMutedIcon />}
-            <span title={displayName}>{displayName}</span>
+          <div className={styles.nameTag}>
+            <MicIcon
+              width={20}
+              height={20}
+              aria-label={muted ? t("Microphone off") : t("Microphone on")}
+              data-muted={muted}
+            />
+            <Text as="span" size="sm" weight="medium">
+              {sfuParticipant.isLocal ? t("You") : displayName}
+            </Text>
            {showConnectionStats && (
              <ConnectionQualityIndicator participant={sfuParticipant} />
            )}
@@ -198,10 +218,11 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
              : Track.Source.ScreenShare
          }
        />
-        {videoTileSettingsModalState.isOpen && !maximised && (
+        {!maximised && (
          <VideoTileSettingsModal
-            {...videoTileSettingsModalProps}
            data={data}
+            open={videoTileSettingsModalOpen}
+            onDismiss={closeVideoTileSettingsModal}
          />
        )}
      </animated.div>
--- a/src/video-grid/VideoTileSettingsModal.tsx
+++ b/src/video-grid/VideoTileSettingsModal.tsx
@@ -66,23 +66,21 @@ const LocalVolume: React.FC<LocalVolumeProps> = ({
  );
 };

-// TODO: Extend ModalProps
 interface Props {
  data: ItemData;
-  onClose: () => void;
+  open: boolean;
+  onDismiss: () => void;
 }

-export const VideoTileSettingsModal = ({ data, onClose, ...rest }: Props) => {
+export const VideoTileSettingsModal = ({ data, open, onDismiss }: Props) => {
  const { t } = useTranslation();

  return (
    <Modal
      className={styles.videoTileSettingsModal}
      title={t("Local volume")}
-      isDismissable
-      mobileFullScreen
-      onClose={onClose}
-      {...rest}
+      open={open}
+      onDismiss={onDismiss}
    >
      <div className={styles.content}>
        <LocalVolume
--- a/src/widget.ts
+++ b/src/widget.ts
@@ -157,15 +157,6 @@ export const widget: WidgetHelpers | null = (() => {
          timelineSupport: true,
          useE2eForGroupCall: e2eEnabled,
          fallbackICEServerAllowed: allowIceFallback,
-          // XXX: The client expects the list of foci in its constructor, but we don't
-          // know this until we fetch the config file. However, we can't wait to construct
-          // the client object or we'll miss the 'capabilities' request from the host app.
-          // As of writing this, I have made the embedded widget client send the 'contentLoaded'
-          // message so that we can use the widget API in less racy mode, but we need to change
-          // element-web to use waitForIFrameLoad=false. Once that change has rolled out,
-          // we can just start the client after we've fetched the config.
-          livekitServiceURL: undefined,
-          useLivekitForGroupCalls: true,
        }
      );

@@ -174,13 +165,6 @@ export const widget: WidgetHelpers | null = (() => {
          // wait for the config file to be ready (we load very early on so it might not
          // be otherwise)
          await Config.init();
-          const livekit = Config.get().livekit;
-          const focus = livekit?.livekit_service_url;
-          // Now we've fetched the config, be evil and use the getter to inject the focus
-          // into the client (see above XXX).
-          if (focus) {
-            client.setLivekitServiceURL(livekit.livekit_service_url);
-          }
          await client.startClient();
          resolve(client);
        })();
--- a/yarn.lock
+++ b/yarn.lock