Merge remote-tracking branch 'origin/livekit' into michaelk/various_testid_tags

.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",

.github/workflows/build.yaml

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

.github/workflows/e2e.yml

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

.github/workflows/lint.yaml

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

.github/workflows/netlify-fullmesh.yaml

@@ -28,10 +28,10 @@ jobs:
           ref: ${{ github.event.workflow_run.head_sha }}
 
       - name: "Download artifact"
-        uses: actions/github-script@v3.2.0
+        uses: actions/github-script@v6.4.1
         with:
           script: |
-            const artifacts = await github.actions.listWorkflowRunArtifacts({
+            const artifacts = await github.rest.actions.listWorkflowRunArtifacts({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 run_id: ${{ github.event.workflow_run.id }},
@@ -39,7 +39,7 @@ jobs:
             const matchArtifact = artifacts.data.artifacts.filter((artifact) => {
                 return artifact.name == "build"
             })[0];
-            const download = await github.actions.downloadArtifact({
+            const download = await github.rest.actions.downloadArtifact({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 artifact_id: matchArtifact.id,

.github/workflows/netlify-livekit.yaml

@@ -28,10 +28,10 @@ jobs:
           ref: ${{ github.event.workflow_run.head_sha }}
 
       - name: "Download artifact"
-        uses: actions/github-script@v3.2.0
+        uses: actions/github-script@v6.4.1
         with:
           script: |
-            const artifacts = await github.actions.listWorkflowRunArtifacts({
+            const artifacts = await github.rest.actions.listWorkflowRunArtifacts({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 run_id: ${{ github.event.workflow_run.id }},
@@ -39,7 +39,7 @@ jobs:
             const matchArtifact = artifacts.data.artifacts.filter((artifact) => {
                 return artifact.name == "build"
             })[0];
-            const download = await github.actions.downloadArtifact({
+            const download = await github.rest.actions.downloadArtifact({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 artifact_id: matchArtifact.id,

.github/workflows/netlify-pr.yaml

@@ -28,7 +28,7 @@ jobs:
             Exercise caution. Use test accounts.
 
       - id: prdetails
-        uses: matrix-org/pr-details-action@v1.2
+        uses: matrix-org/pr-details-action@v1.3
         with:
           owner: ${{ github.event.workflow_run.head_repository.owner.login }}
           branch: ${{ github.event.workflow_run.head_branch }}

.github/workflows/publish.yaml

@@ -23,10 +23,10 @@ jobs:
         run: echo "unix_time=$(date +'%s')" >> $GITHUB_OUTPUT
 
       - name: Check it out
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Log in to container registry
-        uses: docker/login-action@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

.github/workflows/test.yaml

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

.github/workflows/triage-incoming.yaml

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

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#6836720e1e1c2cb01d49d6e5fcfc01afc14834ca",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#6385c9c0dab8fe67bd3a8992a4777f243fdd1b68",
     "matrix-widget-api": "^1.3.1",
     "mermaid": "^9.0.0",
     "normalize.css": "^8.0.1",
@@ -77,15 +76,17 @@
     "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",
-    "@sentry/vite-plugin": "^0.3.0",
+    "@react-types/dialog": "^3.5.5",
+    "@sentry/vite-plugin": "^2.0.0",
     "@storybook/react": "^6.5.0-alpha.5",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "@types/content-type": "^1.1.5",
     "@types/d3": "^7.4.0",
     "@types/dom-screen-wake-lock": "^1.0.1",
@@ -98,11 +99,11 @@
     "@types/uuid": "9",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^9.0.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "eslint": "^8.14.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-matrix-org": "^0.4.0",

public/.well-known/assetlinks.json

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

public/locales/bg/app.json

@@ -5,8 +5,6 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Друг потребител в този разговор има проблем. За да диагностицираме този проблем по-добре ни се иска да съберем debug логове.",
   "Audio": "Звук",
   "Avatar": "Аватар",
-  "Call link copied": "Връзка към разговора бе копирана",
-  "Call type menu": "Меню \"тип на разговора\"",
   "Camera": "Камера",
   "Close": "Затвори",
   "Confirm password": "Потвърди паролата",
@@ -19,12 +17,10 @@
   "Display name": "Име/псевдоним",
   "Download debug logs": "Изтеглете debug логове",
   "Exit full screen": "Излез от цял екран",
-  "Fetching group call timed out.": "Изтече времето за взимане на груповия разговор.",
   "Full screen": "Цял екран",
   "Go": "Напред",
   "Home": "Начало",
   "Include debug logs": "Включи debug логове",
-  "Incompatible versions": "Несъвместими версии",
   "Inspector": "Инспектор",
   "Join call": "Влез в разговора",
   "Join call now": "Влез в разговора сега",
@@ -39,7 +35,6 @@
   "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": "Профил",
@@ -60,18 +55,11 @@
   "Speaker": "Говорител",
   "Spotlight": "Прожектор",
   "Submit feedback": "Изпрати обратна връзка",
-  "Take me Home": "Отиди в Начало",
   "This call already exists, would you like to join?": "Този разговор вече съществува, искате ли да се присъедините?",
   "User menu": "Потребителско меню",
   "Username": "Потребителско име",
   "Version: {{version}}": "Версия: {{version}}",
   "Video": "Видео",
-  "Video call": "Видео разговор",
-  "Video call name": "Име на видео разговора",
   "Waiting for other participants…": "Изчакване на други участници…",
-  "Walkie-talkie call": "Уоки-токи разговор",
-  "Walkie-talkie call name": "Име на уоки-токи разговора",
-  "WebRTC is not supported or is being blocked in this browser.": "WebRTC не се поддържа или се блокира от браузъра.",
-  "Yes, join call": "Да, присъедини се",
-  "Your recent calls": "Скорошните ви разговори"
+  "Yes, join call": "Да, присъедини се"
 }

public/locales/cs/app.json

@@ -4,22 +4,16 @@
   "Confirm password": "Potvrdit heslo",
   "Close": "Zavřít",
   "Camera": "Kamera",
-  "Call link copied": "Odkaz na hovor zkopírován",
   "Avatar": "Avatar",
   "Audio": "Audio",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Vytvořit účet</0> Or <2>Jako host</2>",
-  "Your recent calls": "Vaše nedávné hovory",
   "Yes, join call": "Ano, připojit se",
-  "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",
   "Video": "Video",
   "Version: {{version}}": "Verze: {{version}}",
   "Username": "Uživatelské jméno",
   "User menu": "Uživatelské menu",
   "This call already exists, would you like to join?": "Tento hovor již existuje, chcete se připojit?",
-  "Take me Home": "Domovská obrazovka",
   "Submit feedback": "Dát feedback",
   "Speaker": "Reproduktor",
   "Sign out": "Odhlásit se",
@@ -50,20 +44,15 @@
   "Join call now": "Připojit se k hovoru",
   "Join call": "Připojit se k hovoru",
   "Inspector": "Insepktor",
-  "Incompatible versions": "Nekompatibilní verze",
-  "Walkie-talkie call name": "Jméno vysílačkového hovoru",
-  "Walkie-talkie call": "Vysílačkový hovor",
   "Spotlight": "Soustředěný mód",
   "Recaptcha not loaded": "Recaptcha se nenačetla",
   "Recaptcha dismissed": "Recaptcha byla zamítnuta",
-  "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",
   "Go": "Pokračovat",
   "Full screen": "Zvětšit na celou obrazovku",
-  "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",
@@ -73,10 +62,8 @@
   "Debug log": "Protokoly ladění",
   "Create account": "Vytvořit účet",
   "Copy": "Kopírovat",
-  "Call type menu": "Menu typu hovoru",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Jiný uživatel v tomto hovoru má problémy. Abychom mohli diagnostikovat problém, rádi bychom shromáždili protokoly ladění.",
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Proč neskončit nastavením hesla, abyste mohli účet použít znovu?</0><1>Budete si moci nechat své jméno a nastavit si avatar pro budoucí hovory </1>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Připojit se</0><1>Or</1><2>Zkopírovat odkaz a připojit se později</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Už máte účet?</0><1><0>Přihlásit se</0> Or <2>Jako host</2></1>",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Odeslání ladících záznamů nám pomůže diagnostikovat problém.</0>",
   "<0>Oops, something's gone wrong.</0>": "<0>Oops, něco se pokazilo.</0>",

public/locales/de/app.json

@@ -5,8 +5,6 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ein anderer Benutzer dieses Anrufs hat ein Problem. Um es besser diagnostizieren zu können, würden wir gerne ein Debug-Protokoll erstellen.",
   "Audio": "Audio",
   "Avatar": "Avatar",
-  "Call link copied": "Anruflink kopiert",
-  "Call type menu": "Anruftyp Menü",
   "Camera": "Kamera",
   "Close": "Schließen",
   "Confirm password": "Passwort bestätigen",
@@ -23,7 +21,6 @@
   "Go": "Los geht’s",
   "Home": "Startseite",
   "Include debug logs": "Debug-Protokolle einschließen",
-  "Incompatible versions": "Inkompatible Versionen",
   "Inspector": "Inspektor",
   "Join call": "Anruf beitreten",
   "Join call now": "Anruf beitreten",
@@ -36,9 +33,8 @@
   "Microphone": "Mikrofon",
   "More": "Mehr",
   "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",
@@ -47,7 +43,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 …",
@@ -59,23 +55,14 @@
   "Speaker": "Wiedergabegerät",
   "Spotlight": "Rampenlicht",
   "Submit feedback": "Rückmeldung geben",
-  "Take me Home": "Zurück zur Startseite",
   "This call already exists, would you like to join?": "Dieser Aufruf existiert bereits, möchtest Du teilnehmen?",
   "User menu": "Benutzermenü",
   "Username": "Benutzername",
   "Version: {{version}}": "Version: {{version}}",
   "Video": "Video",
-  "Video call": "Videoanruf",
-  "Video call name": "Name des Videoanrufs",
   "Waiting for other participants…": "Warte auf weitere Teilnehmer …",
-  "Walkie-talkie call": "Walkie-Talkie-Anruf",
-  "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",
-  "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>",
   "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>",
@@ -103,10 +90,37 @@
   "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)",
+  "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",
+  "Sharing screen": "Bildschirm wird geteilt",
+  "You": "Du",
+  "Continue in browser": "Weiter im Browser",
+  "Name of call": "Name des Anrufs",
+  "Open in the app": "In der App öffnen",
+  "Ready to join?": "Bereit, beizutreten?",
+  "Unmute microphone": "Mikrofon aktivieren",
+  "Start video": "Video aktivieren",
+  "Stop video": "Video deaktivieren",
+  "Back to recents": "Zurück zu kürzlichen Anrufen",
+  "Select app": "App auswählen",
+  "Mute microphone": "Mikrofon deaktivieren",
+  "Start new call": "Neuen Anruf beginnen",
+  "Call not found": "Anruf nicht gefunden",
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Anrufe sind nun Ende-zu-Ende-verschlüsselt und müssen auf der Startseite erstellt werden. Damit stellen wir sicher, dass alle denselben Schlüssel verwenden.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Dein Webbrowser unterstützt keine Medien-Ende-zu-Ende-Verschlüsselung. Unterstützte Browser sind Chrome, Safari, Firefox >=117"
 }

public/locales/el/app.json

@@ -13,23 +13,15 @@
   "Login to your account": "Συνδεθείτε στον λογαριασμό σας",
   "Logging in…": "Σύνδεση…",
   "Inspector": "Επιθεωρητής",
-  "Incompatible versions": "Μη συμβατές εκδόσεις",
   "Display name": "Εμφανιζόμενο όνομα",
   "Developer Settings": "Ρυθμίσεις προγραμματιστή",
   "Debug log request": "Αίτημα αρχείου καταγραφής",
-  "Call link copied": "Ο σύνδεσμος κλήσης αντιγράφηκε",
   "Avatar": "Avatar",
   "<0>Oops, something's gone wrong.</0>": "<0>Ωχ, κάτι πήγε στραβά.</0>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Δημιουργήστε λογαριασμό</0> Ή <2>Συμμετέχετε ως επισκέπτης</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Έχετε ήδη λογαριασμό;</0><1><0>Συνδεθείτε</0> Ή <2>Συμμετέχετε ως επισκέπτης</2></1>",
-  "Your recent calls": "Οι πρόσφατες κλήσεις σας",
   "Yes, join call": "Ναι, συμμετοχή στην κλήση",
-  "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…": "Αναμονή για άλλους συμμετέχοντες…",
-  "Video call name": "Όνομα βίντεο κλήσης",
-  "Video call": "Βίντεο κλήση",
   "Video": "Βίντεο",
   "Username": "Όνομα χρήστη",
   "This call already exists, would you like to join?": "Αυτή η κλήση υπάρχει ήδη, θα θέλατε να συμμετάσχετε;",
@@ -64,20 +56,16 @@
   "Send debug logs": "Αποστολή αρχείων καταγραφής",
   "Recaptcha dismissed": "Το recaptcha απορρίφθηκε",
   "<0>Thanks for your feedback!</0>": "<0>Ευχαριστώ για τα σχόλιά σας!</0>",
-  "Call type menu": "Μενού είδους κλήσης",
   "Local volume": "Τοπική ένταση",
   "Home": "Αρχική",
   "Show connection stats": "Εμφάνιση στατιστικών σύνδεσης",
-  "Take me Home": "Μετάβαση στην Αρχική",
   "{{displayName}} is presenting": "{{displayName}} παρουσιάζει",
   "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": "<0></0><1></1>Μπορείτε να ανακαλέσετε τη συγκατάθεσή σας αποεπιλέγοντας αυτό το πλαίσιο. Εάν βρίσκεστε σε κλήση, η ρύθμιση αυτή θα τεθεί σε ισχύ στο τέλος της.",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Συμμετοχή στην κλήση τώρα</0><1>Or</1><2>Αντιγραφή συνδέσμου κλήσης και συμμετοχή αργότερα</2>",
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Θα θέλαμε να ακούσουμε τα σχόλιά σας ώστε να βελτιώσουμε την εμπειρία σας.</0>",
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Γιατί να μην ολοκληρώσετε με τη δημιουργία ενός κωδικού πρόσβασης για τη διατήρηση του λογαριασμού σας;</0><1>Θα μπορείτε να διατηρήσετε το όνομά σας και να ορίσετε ένα avatar για χρήση σε μελλοντικές κλήσεις.</1>",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ένας άλλος χρήστης σε αυτή την κλήση έχει ένα πρόβλημα. Για την καλύτερη διάγνωση αυτών των προβλημάτων θα θέλαμε να συλλέξουμε ένα αρχείο καταγραφής σφαλμάτων.",
   "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>.",
   "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…": "Υποβολή…",
@@ -95,7 +83,6 @@
   "Sending debug logs…": "Αποστολή αρχείων καταγραφής…",
   "Submit": "Υποβολή",
   "Your feedback": "Τα σχόλιά σας",
-  "Fetching group call timed out.": "Η ομαδική κλήση έληξε από τέλος χρόνου.",
   "Spotlight": "Spotlight",
   "Element Call Home": "Element Κεντρική Οθόνη Κλήσεων"
 }

public/locales/en-GB/app.json

@@ -9,7 +9,6 @@
   "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Create an account</0> Or <2>Access as a guest</2>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>",
   "<0>Oops, something's gone wrong.</0>": "<0>Oops, something's gone wrong.</0>",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Submitting debug logs will help us track down the problem.</0>",
   "<0>Thanks for your feedback!</0>": "<0>Thanks for your feedback!</0>",
@@ -18,15 +17,17 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.",
   "Audio": "Audio",
   "Avatar": "Avatar",
+  "Back to recents": "Back to recents",
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.",
-  "Call link copied": "Call link copied",
-  "Call type menu": "Call type menu",
+  "Call not found": "Call not found",
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.",
   "Camera": "Camera",
   "Close": "Close",
   "Confirm password": "Confirm password",
   "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",
@@ -66,13 +67,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>",
+  "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",
@@ -82,6 +87,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…",
@@ -96,28 +102,25 @@
   "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…",
-  "Take me Home": "Take me Home",
   "Thanks, we received your feedback!": "Thanks, we received your feedback!",
   "Thanks!": "Thanks!",
   "This call already exists, would you like to join?": "This call already exists, would you like to join?",
   "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",
   "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 web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117"
 }

public/locales/es/app.json

@@ -1,22 +1,15 @@
 {
   "<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>",
   "Login to your account": "Iniciar sesión en tu cuenta",
   "Yes, join call": "Si, unirse a la llamada",
-  "Walkie-talkie call name": "Nombre de la llamada Walkie-talkie",
-  "Walkie-talkie call": "Llamada Walkie-talkie",
   "Waiting for other participants…": "Esperando a los otros participantes…",
-  "Video call name": "Nombre de la videollamada",
-  "Video call": "Videollamada",
   "Video": "Video",
   "Version: {{version}}": "Versión: {{version}}",
   "Username": "Nombre de usuario",
   "User menu": "Menú de usuario",
-  "Take me Home": "Volver al inicio",
   "Submit feedback": "Enviar comentarios",
   "Spotlight": "Foco",
   "Speaker": "Altavoz",
@@ -37,7 +30,6 @@
   "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",
   "More": "Más",
@@ -50,12 +42,10 @@
   "Join call now": "Unirse a la llamada ahora",
   "Join call": "Unirse a la llamada",
   "Inspector": "Inspector",
-  "Incompatible versions": "Versiones incompatibles",
   "Include debug logs": "Incluir registros de depuración",
   "Home": "Inicio",
   "Go": "Comenzar",
   "Full screen": "Pantalla completa",
-  "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",
@@ -68,13 +58,10 @@
   "Confirm password": "Confirmar contraseña",
   "Close": "Cerrar",
   "Camera": "Cámara",
-  "Call type menu": "Menú de tipo de llamada",
-  "Call link copied": "Enlace de la llamada copiado",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Otro usuario en esta llamada está teniendo problemas. Para diagnosticar estos problemas nos gustaría recopilar un registro de depuración.",
   "Audio": "Audio",
   "Avatar": "Avatar",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Crear una cuenta</0> o <2>Acceder como invitado</2>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Unirse ahora</0><1>Or</1><2>Copiar el enlace y unirse más tarde</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>¿Ya tienes una cuenta?</0><1><0>Iniciar sesión</0> o <2>Acceder como invitado</2></1>",
   "Element Call Home": "Inicio de Element Call",
   "Copy": "Copiar",

public/locales/et/app.json

@@ -1,15 +1,12 @@
 {
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Kas soovid salasõna seadistada ja sellega oma kasutajakonto alles jätta?</0><1>Nii saad säilitada oma nime ja määrata profiilipildi, mida saad kasutada tulevastes kõnedes</1>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Liitu kõnega kohe</0><1> Või</1><2>Kopeeri kõne link ja liitu hiljem</2>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Loo konto</0> Või <2>Sisene külalisena</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>On sul juba konto?</0><1><0>Logi sisse</0> Või <2>Logi sisse külalisena</2></1>",
   "Inspector": "Inspektor",
-  "Incompatible versions": "Ühildumatud versioonid",
   "Include debug logs": "Lisa veatuvastuslogid",
   "Home": "Avavaatesse",
   "Go": "Jätka",
   "Full screen": "Täisekraan",
-  "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",
@@ -22,8 +19,6 @@
   "Confirm password": "Kinnita salasõna",
   "Close": "Sulge",
   "Camera": "Kaamera",
-  "Call type menu": "Kõnetüübi valik",
-  "Call link copied": "Kõne link on kopeeritud",
   "Avatar": "Tunnuspilt",
   "Audio": "Heli",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ühel teisel selles kõnes osalejal on lahenduse kasutamisel tekkinud probleem ning selle põhjuse leidmiseks me sooviksime koguda silumislogisid.",
@@ -32,7 +27,6 @@
   "Not registered yet? <2>Create an account</2>": "Sa pole veel registreerunud? <2>Loo kasutajakonto</2>",
   "Not now, return to home screen": "Mitte praegu, mine tagasi avalehele",
   "No": "Ei",
-  "Your recent calls": "Hiljutised kõned",
   "More": "Rohkem",
   "Microphone": "Mikrofon",
   "Login to your account": "Logi oma kontosse sisse",
@@ -43,7 +37,6 @@
   "Join existing call?": "Liitu juba käimasoleva kõnega?",
   "Join call now": "Liitu kõnega kohe",
   "Join call": "Kõnega liitumine",
-  "Take me Home": "Mine avalehele",
   "Submit feedback": "Jaga tagasisidet",
   "Spotlight": "Rambivalgus",
   "Speaker": "Kõlar",
@@ -63,19 +56,13 @@
   "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",
   "Video": "Video",
   "Version: {{version}}": "Versioon: {{version}}",
   "Username": "Kasutajanimi",
   "This call already exists, would you like to join?": "See kõne on juba olemas, kas soovid liituda?",
   "User menu": "Kasutajamenüü",
   "Yes, join call": "Jah, liitu kõnega",
-  "Walkie-talkie call": "Walkie-talkie stiilis kõne",
-  "Walkie-talkie call name": "Walkie-talkie stiilis kõne nimi",
-  "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>",
@@ -90,7 +77,7 @@
   "Submit": "Saada",
   "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Kui selle rakenduse kasutamisel tekib sul probleeme või lihtsalt soovid oma arvamust avaldada, siis palun täida alljärgnev lühike kirjeldus.",
   "Feedback": "Tagasiside",
-  "{{count}} stars|one": "{{count}} tärn",
+  "{{count}} stars|one": "{{count}} tärni",
   "{{count}} stars|other": "{{count}} tärni",
   "How did it go?": "Kuidas sujus?",
   "{{displayName}}, your call has ended.": "{{displayName}}, sinu kõne on lõppenud.",
@@ -108,5 +95,32 @@
   "Reconnect": "Ühenda uuesti",
   "Thanks!": "Tänud!",
   "End-to-end encryption isn't supported on your browser.": "Sinu brauser ei toeta läbivat krüptimist.",
-  "Enable end-to-end encryption (password protected calls)": "Võta kasutusele läbiv krüptimine (salasõnaga kaitstud kõned)"
+  "Enable end-to-end encryption (password protected calls)": "Võta kasutusele läbiv krüptimine (salasõnaga kaitstud kõned)",
+  "Encrypted": "Krüptitud",
+  "End call": "Lõpeta kõne",
+  "Grid": "Ruudustik",
+  "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",
+  "{{count, number}}|one": "{{count, number}}",
+  "{{count, number}}|other": "{{count, number}}",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
+  "You": "Sina",
+  "Continue in browser": "Jätka veebibrauseris",
+  "Mute microphone": "Summuta mikrofon",
+  "Name of call": "Kõne nimi",
+  "Open in the app": "Ava rakenduses",
+  "Ready to join?": "Oled valmis liituma?",
+  "Select app": "Vali rakendus",
+  "Start new call": "Algata uus kõne",
+  "Back to recents": "Tagasi hiljutiste kõnede juurde",
+  "Stop video": "Peata videovoog",
+  "Start video": "Lülita videovoog sisse",
+  "Unmute microphone": "Lülita mikrofon sisse",
+  "Call not found": "Kõnet ei leidu",
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Kõned on nüüd läbivalt krüptitud ning need pead looma kodulehelt. Sellega tagad, et kõik kasutavad samu krüptovõtmeid.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Sinu veebibrauser ei toeta meedia läbivat krüptimist. Toetatud brauserid on Chrome, Chromium, Safari ja Firefox >=117"
 }

public/locales/fa/app.json

@@ -1,9 +1,6 @@
 {
-  "Your recent calls": "تماس‌های اخیر شما",
-  "Video call": "تماس تصویری",
   "Video": "ویدیو",
   "Username": "نام کاربری",
-  "Take me Home": "مرا به خانه ببر",
   "Speaker": "بلندگو",
   "Sign out": "خروج",
   "Sign in": "ورود",
@@ -34,8 +31,6 @@
   "Confirm password": "تایید رمزعبور",
   "Close": "بستن",
   "Camera": "دوربین",
-  "Call type menu": "منوی نوع تماس",
-  "Call link copied": "لینک تماس کپی شد",
   "Avatar": "آواتار",
   "Audio": "صدا",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "کاربر دیگری در این تماس مشکلی دارد. برای تشخیص بهتر مشکل، بهتر است ما لاگ عیب‌یابی را جمع‌آوری کنیم.",
@@ -44,7 +39,6 @@
   "<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": "نسخه‌های ناسازگار",
   "Spotlight": "نور افکن",
   "Show call inspector": "نمایش بازرس تماس",
   "Share screen": "اشتراک گذاری صفحه نمایش",
@@ -59,23 +53,16 @@
   "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": "شامل لاگ‌های عیب‌یابی",
-  "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": "فهرست کاربر",
   "This call already exists, would you like to join?": "این تماس از قبل وجود دارد، می‌خواهید بپیوندید؟",
   "Submit feedback": "بازخورد ارائه دهید",
   "Element Call Home": "خانهٔ تماس المنت",
-  "Copy": "رونوشت",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>اکنون به تماس پیوسته</0><1>یا</1><2>پیوند تماس را رونوشت کرده و بعداً بپیوندید</2>"
+  "Copy": "رونوشت"
 }

public/locales/fr/app.json

@@ -4,8 +4,6 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Un autre utilisateur dans cet appel a un problème. Pour nous permettre de résoudre le problème, nous aimerions récupérer un journal de débogage.",
   "Audio": "Audio",
   "Avatar": "Avatar",
-  "Call link copied": "Lien de l’appel copié",
-  "Call type menu": "Menu de type d’appel",
   "Camera": "Caméra",
   "Close": "Fermer",
   "Confirm password": "Confirmer le mot de passe",
@@ -22,7 +20,6 @@
   "Go": "Commencer",
   "Home": "Accueil",
   "Include debug logs": "Inclure les journaux de débogage",
-  "Incompatible versions": "Versions incompatibles",
   "Inspector": "Inspecteur",
   "Join call": "Rejoindre l’appel",
   "Join call now": "Rejoindre l’appel maintenant",
@@ -37,7 +34,6 @@
   "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",
@@ -56,18 +52,10 @@
   "Sign in": "Connexion",
   "Sign out": "Déconnexion",
   "Spotlight": "Premier plan",
-  "Submit feedback": "Envoyer des retours",
-  "Take me Home": "Retouner à l’accueil",
+  "Submit feedback": "Envoyer un commentaire",
   "This call already exists, would you like to join?": "Cet appel existe déjà, voulez-vous le rejoindre ?",
-  "Fetching group call timed out.": "Échec de connexion à l’appel de groupe dans le temps imparti.",
-  "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…",
-  "Video call name": "Nom de l’appel vidéo",
-  "Video call": "Appel vidéo",
   "Video": "Vidéo",
   "Version: {{version}}": "Version : {{version}}",
   "Username": "Nom d’utilisateur",
@@ -75,7 +63,6 @@
   "Speaker": "Intervenant",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Vous avez déjà un compte ?</0><1><0>Se connecter</0> Ou <2>Accès invité</2></1>",
   "Sending debug logs…": "Envoi des journaux de débogage…",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Rejoindre l’appel maintenant</0><1>Ou</1><2>Copier le lien de l’appel et rejoindre plus tard</2>",
   "Element Call Home": "Accueil Element Call",
   "Copy": "Copier",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Soumettre les journaux de débogage nous aidera à déterminer le problème.</0>",
@@ -88,7 +75,7 @@
   "Thanks, we received your feedback!": "Merci, nous avons reçu vos commentaires !",
   "Submitting…": "Envoi…",
   "Submit": "Envoyer",
-  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Si vous rencontrez des problèmes, ou vous voulez simplement faire un commentaire, veuillez nous envoyer une courte description ci-dessous.",
+  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Si vous rencontrez des problèmes, ou vous voulez simplement faire un commentaire, faites-en une courte description ci-dessous.",
   "Feedback": "Commentaires",
   "{{count}} stars|other": "{{count}} favoris",
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Nous aimerions avoir vos commentaires afin que nous puissions améliorer votre expérience.</0>",
@@ -108,5 +95,32 @@
   "You were disconnected from the call": "Vous avez été déconnecté de l’appel",
   "Connectivity to the server has been lost.": "La connexion avec le serveur a été perdue.",
   "End-to-end encryption isn't supported on your browser.": "Le chiffrement de bout-en-bout n’est pas pris en charge par votre navigateur.",
-  "Enable end-to-end encryption (password protected calls)": "Activer le chiffrement de bout-en-bout (appels protégés par mot de passe)"
+  "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é",
+  "{{count, number}}|one": "{{count, number}}",
+  "Not encrypted": "Non chiffré",
+  "You": "Vous",
+  "Continue in browser": "Continuer dans le navigateur",
+  "Mute microphone": "Couper le microphone",
+  "Name of call": "Nom de l’appel",
+  "Open in the app": "Ouvrir dans l’application",
+  "Ready to join?": "Prêt à rejoindre ?",
+  "Select app": "Choisissez l’application",
+  "Start new call": "Démarrer un nouvel appel",
+  "Back to recents": "Revenir à l’historique des appels",
+  "Start video": "Démarrer la vidéo",
+  "Stop video": "Arrêter la vidéo",
+  "Unmute microphone": "Allumer le microphone",
+  "Call not found": "Appel non trouvé",
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Les appels sont maintenant chiffrés de bout-en-bout et doivent être créés depuis la page d’accueil. Cela permet d’être sûr que tout le monde utilise la même clé de chiffrement.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Votre navigateur web ne prend pas en charge le chiffrement de bout-en-bout des médias. Les navigateurs pris en charge sont Chrome, Safari, Firefox >= 117"
 }

public/locales/id/app.json

@@ -5,8 +5,6 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Pengguna yang lain di panggilan ini sedang mengalami masalah. Supaya dapat mendiagnosa masalah ini, kami ingin mengumpulkan sebuah catatan pengawakutuan.",
   "Audio": "Audio",
   "Avatar": "Avatar",
-  "Call link copied": "Tautan panggilan disalin",
-  "Call type menu": "Menu jenis panggilan",
   "Camera": "Kamera",
   "Close": "Tutup",
   "Confirm password": "Konfirmasi kata sandi",
@@ -19,12 +17,10 @@
   "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.",
   "Full screen": "Layar penuh",
   "Go": "Bergabung",
   "Home": "Beranda",
   "Include debug logs": "Termasuk catatan pengawakutuan",
-  "Incompatible versions": "Versi tidak kompatibel",
   "Inspector": "Inspektur",
   "Join call": "Bergabung ke panggilan",
   "Join call now": "Bergabung ke panggilan sekarang",
@@ -39,7 +35,6 @@
   "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",
@@ -60,22 +55,14 @@
   "Speaker": "Pembicara",
   "Spotlight": "Sorotan",
   "Submit feedback": "Kirim masukan",
-  "Take me Home": "Bawa saya ke Beranda",
   "This call already exists, would you like to join?": "Panggilan ini sudah ada, apakah Anda ingin bergabung?",
   "User menu": "Menu pengguna",
   "Username": "Nama pengguna",
   "Version: {{version}}": "Versi: {{version}}",
   "Video": "Video",
-  "Video call": "Panggilan video",
-  "Video call name": "Nama panggilan video",
   "Waiting for other participants…": "Menunggu peserta lain…",
-  "Walkie-talkie call": "Panggilan protofon",
-  "Walkie-talkie call name": "Nama panggilan protofon",
-  "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",
   "Sending debug logs…": "Mengirimkan catatan pengawakutuan…",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Bergabung ke panggilan sekarang</0><1>Atau</1><2>Salin tautan dan bergabung nanti</2>",
   "Element Call Home": "Beranda Element Call",
   "Copy": "Salin",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Mengirim catatan pengawakutuan akan membantu kami melacak masalahnya.</0>",
@@ -108,5 +95,32 @@
   "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",
+  "{{count, number}}|one": "{{count, number}}",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
+  "You": "Anda",
+  "Continue in browser": "Lanjutkan dalam peramban",
+  "Mute microphone": "Matikan mikrofon",
+  "Name of call": "Nama panggilan",
+  "Open in the app": "Buka dalam aplikasi",
+  "Ready to join?": "Siap untuk bergabung?",
+  "Select app": "Pilih plikasi",
+  "Start new call": "Mulai panggilan baru",
+  "Start video": "Nyalakan video",
+  "Stop video": "Matikan video",
+  "Unmute microphone": "Nyalakan mikrofon",
+  "Back to recents": "Kembali ke terkini",
+  "Call not found": "Panggilan tidak ditemukan",
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Panggilan sekarang terenkripsi secara ujung ke ujung dan harus dibuat dari laman beranda. Ini memastikan bahwa semuanya menggunakan kunci enkripsi yang sama.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Peramban web Anda tidak mendukung enkripsi media ujung ke ujung. Peramban yang didukung adalah Chrome, Safari, dan Firefox >=117"
 }

public/locales/it/app.json

@@ -1 +1,125 @@
-{}
+{
+  "{{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>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>",
+  "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",
+  "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",
+  "Waiting for other participants…": "In attesa di altri partecipanti…",
+  "Yes, join call": "Sì, entra in chiamata",
+  "You were disconnected from the call": "Sei stato disconnesso dalla chiamata",
+  "Your feedback": "Il tuo commento",
+  "{{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",
+  "Continue in browser": "Continua nel browser",
+  "Mute microphone": "Spegni il microfono",
+  "Select app": "Seleziona app",
+  "Name of call": "Nome della chiamata",
+  "Open in the app": "Apri nell'app",
+  "Ready to join?": "Tutto pronto per entrare?",
+  "Start video": "Avvia video",
+  "Stop video": "Ferma video",
+  "Unmute microphone": "Riaccendi il microfono",
+  "Back to recents": "Torna ai recenti",
+  "Start new call": "Inizia nuova chiamata",
+  "Call not found": "Chiamata non trovata",
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Le chiamate ora sono cifrate end-to-end e devono essere create dalla pagina principale. Ciò assicura che chiunque usi la stessa chiave di crittografia."
+}

public/locales/ja/app.json

@@ -1,10 +1,8 @@
 {
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>既にアカウントをお持ちですか？</0><1><0>ログイン</0>または<2>ゲストとしてアクセス</2></1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>アカウントを作成</0>または<2>ゲストとしてアクセス</2>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>今すぐ通話に参加</0><1>または</1><2>通話リンクをコピーし、後で参加</2>",
   "<0>Oops, something's gone wrong.</0>": "<0>何かがうまく行きませんでした。</0>",
   "Camera": "カメラ",
-  "Call link copied": "通話リンクをコピーしました",
   "Avatar": "アバター",
   "Audio": "音声",
   "Confirm password": "パスワードを確認",
@@ -15,7 +13,6 @@
   "Debug log": "デバッグログ",
   "Create account": "アカウントを作成",
   "Go": "続行",
-  "Fetching group call timed out.": "グループ通話の取得がタイムアウトしました。",
   "Element Call Home": "Element Call ホーム",
   "Download debug logs": "デバッグログをダウンロード",
   "Display name": "表示名",
@@ -24,7 +21,6 @@
   "Exit full screen": "全画面表示を終了",
   "Include debug logs": "デバッグログを含める",
   "Home": "ホーム",
-  "Incompatible versions": "互換性のないバージョン",
   "Join existing call?": "既存の通話に参加しますか？",
   "Join call now": "今すぐ通話に参加",
   "Join call": "通話に参加",
@@ -52,20 +48,13 @@
   "Passwords must match": "パスワードが一致する必要があります",
   "Password": "パスワード",
   "Speaker": "スピーカー",
-  "Video call name": "ビデオ通話の名称",
-  "Video call": "ビデオ通話",
   "Video": "ビデオ",
   "Waiting for other participants…": "他の参加者を待機しています…",
-  "Walkie-talkie call name": "トランシーバー通話の名称",
-  "Walkie-talkie call": "トランシーバー通話",
   "Yes, join call": "はい、通話に参加",
   "Select an option": "オプションを選択",
   "Debug log request": "デバッグログを要求",
-  "Your recent calls": "最近の通話",
-  "WebRTC is not supported or is being blocked in this browser.": "お使いのブラウザでWebRTCがサポートされていないか、またはブロックされています。",
   "Login to your account": "アカウントにログイン",
   "Remove": "削除",
   "No": "いいえ",
-  "This call already exists, would you like to join?": "この通話は既に存在します。参加しますか？",
-  "Take me Home": "ホームに戻る"
+  "This call already exists, would you like to join?": "この通話は既に存在します。参加しますか？"
 }

public/locales/lv/app.json

@@ -3,7 +3,6 @@
   "{{count}} stars|other": "{{count}} zvaigznes",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Jau ir konts?</0><1><0>Pieteikties</0> vai <2>Piekļūt kā viesim</2></1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Izveidot kontu</0> vai <2>Piekļūt kā viesim</2>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Pievienoties zvanam tagad</0><1>vai</1><2>ievietot zvana saiti starpliktuvē un pievienoties vēlāk</2>",
   "<0>Oops, something's gone wrong.</0>": "<0>Ak vai, kaut kas nogāja greizi!</0>",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Atkļūdošanas žurnāla ierakstu iesūtīšana palīdzēs mums atklāt nepilnību.</0>",
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Mums patiktu saņemt Tavu atsauksmi, lai mēs varētu uzlabot Tavu pieredzi.</0>",
@@ -11,8 +10,6 @@
   "Audio": "Skaņa",
   "Avatar": "Attēls",
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikšķināšana uz \"Aiziet\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
-  "Call link copied": "Zvana saite ievietota starpliktuvē",
-  "Call type menu": "Zvana veida izvēlne",
   "Camera": "Kamera",
   "Close": "Aizvērt",
   "Confirm password": "Apstiprināt paroli",
@@ -31,7 +28,6 @@
   "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.",
   "Full screen": "Pilnekrāns",
   "Go": "Aiziet",
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikšķināšana uz \"Pievienoties zvanam tagad\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
@@ -46,13 +42,10 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Citam lietotājam šajā zvanā ir sarežģījumi. Lai labāk atklātu šīs nepilnības, mēs gribētu iegūt atkļūdošanas žurnālu.",
   "Home": "Sākums",
   "Waiting for other participants…": "Gaida citus dalībniekus…",
-  "Walkie-talkie call": "Rācijas zvans",
   "Yes, join call": "Jā, pievienoties zvanam",
   "Your feedback": "Tava atsauksme",
-  "Your recent calls": "Nesenie zvani",
   "How did it go?": "Kā Tev veicās?",
   "Include debug logs": "Iekļaut atkļūdošanas žurnāla ierakstus",
-  "Incompatible versions": "Nesaderīgas versijas",
   "Inspector": "Inspektors",
   "Join call": "Pievienoties zvanam",
   "Join call now": "Pievienoties zvanam tagad",
@@ -92,7 +85,6 @@
   "Submit": "Iesniegt",
   "Submit feedback": "Iesniegt atsauksmi",
   "Submitting…": "Iesniedz…",
-  "Take me Home": "Aizvest uz sākumu",
   "Thanks, we received your feedback!": "Paldies, mēs saņēmām atsauksmi!",
   "Thanks!": "Paldies!",
   "This call already exists, would you like to join?": "Šis zvans jau pastāv. Vai vēlies pievienoties?",
@@ -100,13 +92,8 @@
   "User menu": "Lietotāja izvēlne",
   "Username": "Lietotājvārds",
   "Video": "Video",
-  "Video call": "Video zvans",
-  "Video call name": "Video zvana nosaukums",
   "You were disconnected from the call": "Tu tiki atvienots no zvana",
   "Version: {{version}}": "Versija: {{version}}",
-  "Walkie-talkie call name": "Rācijas zvana nosaukums",
-  "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>"
 }

public/locales/pl/app.json

@@ -1,20 +1,13 @@
 {
   "Login": "Zaloguj się",
   "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…",
-  "Video call name": "Nazwa połączenia wideo",
-  "Video call": "Połączenie wideo",
   "Video": "Wideo",
   "Version: {{version}}": "Wersja: {{version}}",
   "Username": "Nazwa użytkownika",
   "User menu": "Menu użytkownika",
   "This call already exists, would you like to join?": "Te połączenie już istnieje, czy chcesz do niego dołączyć?",
-  "Take me Home": "Zabierz mnie do strony głównej",
   "Submit feedback": "Prześlij opinię",
   "Spotlight": "Centrum uwagi",
   "Speaker": "Głośnik",
@@ -36,7 +29,6 @@
   "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",
@@ -50,11 +42,9 @@
   "Join call now": "Dołącz do połączenia teraz",
   "Join call": "Dołącz do połączenia",
   "Inspector": "Inspektor",
-  "Incompatible versions": "Niekompatybilne wersje",
   "Include debug logs": "Dołącz dzienniki debugowania",
   "Home": "Strona domowa",
   "Full screen": "Pełny ekran",
-  "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",
@@ -67,8 +57,6 @@
   "Confirm password": "Potwierdź hasło",
   "Close": "Zamknij",
   "Camera": "Kamera",
-  "Call type menu": "Menu typu połączenia",
-  "Call link copied": "Skopiowano link do połączenia",
   "Avatar": "Awatar",
   "Audio": "Dźwięk",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Inny użytkownik w tym połączeniu napotkał problem. Aby lepiej zdiagnozować tę usterkę, chcielibyśmy zebrać dzienniki debugowania.",
@@ -78,7 +66,6 @@
   "Copy": "Kopiuj",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Wysłanie dzienników debuggowania pomoże nam ustalić przyczynę problemu.</0>",
   "<0>Oops, something's gone wrong.</0>": "<0>Ojej, coś poszło nie tak.</0>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Dołącz do rozmowy już teraz</0><1>lub</1><2>Skopiuj link do rozmowy i dołącz później</2>",
   "Expose developer settings in the settings window.": "Wyświetl opcje programisty w oknie ustawień.",
   "Element Call Home": "Strona główna Element Call",
   "Developer Settings": "Opcje programisty",
@@ -91,7 +78,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>",
@@ -108,5 +95,17 @@
   "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",
+  "{{count, number}}|one": "{{count, number}}",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}"
 }

public/locales/ru/app.json

@@ -7,22 +7,14 @@
   "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>",
   "<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": "Название видео-звонка",
-  "Video call": "Видео-звонок",
   "Video": "Видео",
   "Version: {{version}}": "Версия: {{version}}",
   "Username": "Имя пользователя",
   "User menu": "Меню пользователя",
-  "Take me Home": "Перейти в Начало",
   "Spotlight": "Внимание",
   "Speaker": "Динамик",
   "Sign out": "Выйти",
@@ -32,7 +24,6 @@
   "Settings": "Настройки",
   "Sending…": "Отправка…",
   "Local volume": "Местная громкость",
-  "Call type menu": "Меню \"Тип звонка\"",
   "Include debug logs": "Приложить журнал отладки",
   "Download debug logs": "Скачать журнал отладки",
   "Debug log request": "Запрос журнала отладки",
@@ -58,11 +49,9 @@
   "Join call now": "Присоединиться сейчас",
   "Join call": "Присоединиться",
   "Inspector": "Инспектор",
-  "Incompatible versions": "Несовместимые версии",
   "Home": "Начало",
   "Go": "Далее",
   "Full screen": "Полноэкранный режим",
-  "Fetching group call timed out.": "Истекло время ожидания для группового звонка.",
   "Exit full screen": "Выйти из полноэкранного режима",
   "Display name": "Видимое имя",
   "Developer": "Разработчику",
@@ -72,12 +61,10 @@
   "Confirm password": "Подтвердите пароль",
   "Close": "Закрыть",
   "Camera": "Камера",
-  "Call link copied": "Ссылка на звонок скопирована",
   "Avatar": "Аватар",
   "Audio": "Аудио",
   "Element Call Home": "Главная Element Call",
   "Copy": "Копировать",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Присоединиться сейчас</0><1>или<1><2>Скопировать ссылку и присоединиться позже</2>",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Отправка журналов поможет нам найти и устранить проблему.</0>",
   "<0>Oops, something's gone wrong.</0>": "<0>Упс, что-то пошло не так.</0>",
   "Expose developer settings in the settings window.": "Раскрыть настройки разработчика в окне настроек.",

public/locales/sk/app.json

@@ -2,10 +2,8 @@
   "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",
   "Show call inspector": "Zobraziť inšpektora hovorov",
   "Share screen": "Zdieľať obrazovku",
@@ -22,7 +20,6 @@
   "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",
@@ -36,19 +33,12 @@
   "Join call now": "Pripojiť sa k hovoru teraz",
   "Join call": "Pripojiť sa k hovoru",
   "Inspector": "Inšpektor",
-  "Incompatible versions": "Nekompatibilné verzie",
   "Home": "Domov",
   "Go": "Prejsť",
   "Full screen": "Zobrazenie na celú obrazovku",
   "Exit full screen": "Ukončiť zobrazenie na celú obrazovku",
   "Download debug logs": "Stiahnuť záznamy ladenia",
-  "Your recent calls": "Vaše nedávne hovory",
   "Yes, join call": "Áno, pripojiť sa k hovoru",
-  "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",
-  "Video call": "Video hovor",
   "Video": "Video",
   "Version: {{version}}": "Verzia: {{version}}",
   "Username": "Meno používateľa",
@@ -69,13 +59,10 @@
   "Confirm password": "Potvrdiť heslo",
   "Close": "Zatvoriť",
   "Camera": "Kamera",
-  "Call type menu": "Ponuka typu hovoru",
-  "Call link copied": "Odkaz na hovor skopírovaný",
   "Avatar": "Obrázok",
   "Audio": "Audio",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ďalší používateľ v tomto hovore má problém. Aby sme mohli lepšie diagnostikovať tieto problémy, chceli by sme získať záznam o ladení.",
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Prečo neskončiť nastavením hesla, aby ste si zachovali svoj účet? </0><1>Budete si môcť ponechať svoje meno a nastaviť obrázok, ktorý sa bude používať pri budúcich hovoroch</1>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Pripojiť sa k hovoru teraz</0><1>alebo</1><2>Kopírovať odkaz na hovor a pripojiť sa neskôr</2>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Vytvoriť konto</0> Alebo <2>Prihlásiť sa ako hosť</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Už máte konto?</0><1><0>Prihláste sa</0> Alebo <2>Prihlásiť sa ako hosť</2></1>",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Odoslanie záznamov ladenia nám pomôže nájsť problém.</0>",
@@ -108,5 +95,32 @@
   "Thanks!": "Ďakujeme!",
   "You were disconnected from the call": "Boli ste odpojení z hovoru",
   "Enable end-to-end encryption (password protected calls)": "Povoliť end-to-end šifrovanie (hovory chránené heslom)",
-  "End-to-end encryption isn't supported on your browser.": "End-to-end šifrovanie nie je vo vašom prehliadači podporované."
+  "End-to-end encryption isn't supported on your browser.": "End-to-end šifrovanie nie je vo vašom prehliadači podporované.",
+  "{{count, number}}|other": "{{count, number}}",
+  "Encrypted": "Šifrované",
+  "End call": "Ukončiť hovor",
+  "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",
+  "{{count, number}}|one": "{{count, number}}",
+  "Share this call": "Zdieľať tento hovor",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
+  "You": "Vy",
+  "Continue in browser": "Pokračovať v prehliadači",
+  "Mute microphone": "Stlmiť mikrofón",
+  "Name of call": "Názov hovoru",
+  "Open in the app": "Otvoriť v aplikácii",
+  "Ready to join?": "Ste pripravení sa pridať?",
+  "Select app": "Vybrať aplikáciu",
+  "Start new call": "Spustiť nový hovor",
+  "Start video": "Spustiť video",
+  "Stop video": "Zastaviť video",
+  "Back to recents": "Späť k nedávnym",
+  "Unmute microphone": "Zrušiť stlmenie mikrofónu",
+  "Call not found": "Hovor nebol nájdený",
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Hovory sú teraz end-to-end šifrované a je potrebné ich vytvoriť z domovskej stránky. To pomáha zabezpečiť, aby všetci používali rovnaký šifrovací kľúč.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Váš webový prehliadač nepodporuje end-to-end šifrovanie médií. Podporované prehliadače sú Chrome, Safari, Firefox >=117"
 }

public/locales/tr/app.json

@@ -3,8 +3,6 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Bu aramadaki başka bir kullanıcı sorun yaşıyor. Sorunu daha iyi çözebilmemiz için hata ayıklama kütüğünü almak isteriz.",
   "Audio": "Ses",
   "Avatar": "Avatar",
-  "Call link copied": "Arama bağlantısı kopyalandı",
-  "Call type menu": "Arama tipi menüsü",
   "Camera": "Kamera",
   "Close": "Kapat",
   "Confirm password": "Parolayı tekrar edin",
@@ -17,12 +15,10 @@
   "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ı.",
   "Full screen": "Tam ekran",
   "Go": "Git",
   "Home": "Ev",
   "Include debug logs": "Hata ayıklama kütüğünü dahil et",
-  "Incompatible versions": "Uyumsuz sürümler",
   "Inspector": "Denetçi",
   "Join call": "Aramaya katıl",
   "Join call now": "Aramaya katıl",
@@ -37,7 +33,6 @@
   "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ı",
@@ -55,7 +50,6 @@
   "Sign in": "Gir",
   "Sign out": "Çık",
   "Submit feedback": "Geri bildirim ver",
-  "Take me Home": "Ev ekranına gir",
   "This call already exists, would you like to join?": "Bu arama zaten var, katılmak ister misiniz?",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Hesap oluştur</0> yahut <2>Konuk olarak gir</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Mevcut hesabınız mı var?</0><1><0>Gir</0> yahut <2>Konuk girişi</2></1>"

public/locales/uk/app.json

@@ -1,19 +1,12 @@
 {
   "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…": "Очікування на інших учасників…",
-  "Video call name": "Назва відеовиклику",
-  "Video call": "Відеовиклик",
   "Video": "Відео",
   "Version: {{version}}": "Версія: {{version}}",
   "Username": "Ім'я користувача",
   "User menu": "Меню користувача",
   "This call already exists, would you like to join?": "Цей виклик уже існує, бажаєте приєднатися?",
-  "Take me Home": "Перейти до Домівки",
   "Submit feedback": "Надіслати відгук",
   "Spotlight": "У центрі уваги",
   "Speaker": "Динамік",
@@ -35,7 +28,6 @@
   "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": "Ні",
@@ -49,12 +41,10 @@
   "Join call now": "Приєднатися до виклику зараз",
   "Join call": "Приєднатися до виклику",
   "Inspector": "Інспектор",
-  "Incompatible versions": "Несумісні версії",
   "Include debug logs": "Долучити журнали налагодження",
   "Home": "Домівка",
   "Go": "Далі",
   "Full screen": "Повноекранний режим",
-  "Fetching group call timed out.": "Вичерпано час очікування групового виклику.",
   "Exit full screen": "Вийти з повноекранного режиму",
   "Download debug logs": "Завантажити журнали налагодження",
   "Display name": "Псевдонім",
@@ -67,15 +57,12 @@
   "Confirm password": "Підтвердити пароль",
   "Close": "Закрити",
   "Camera": "Камера",
-  "Call type menu": "Меню типу виклику",
-  "Call link copied": "Посилання на виклик скопійовано",
   "Avatar": "Аватар",
   "Audio": "Звук",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Інший користувач у цьому виклику має проблему. Щоб краще визначити ці проблеми, ми хотіли б зібрати журнал налагодження.",
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Чому б не завершити, налаштувавши пароль для збереження свого облікового запису?</0><1>Ви зможете зберегти своє ім'я та встановити аватарку для подальшого користування під час майбутніх викликів</1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Створити обліковий запис</0> або <2>Отримати доступ як гість</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Уже маєте обліковий запис?</0><1><0>Увійти</0> Or <2>Отримати доступ як гість</2></1>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Приєднатися до виклику зараз</0><1>Or</1><2>Скопіювати посилання на виклик і приєднатися пізніше</2>",
   "Element Call Home": "Домівка Element Call",
   "Copy": "Копіювати",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Надсилання журналів налагодження допоможе нам виявити проблему.</0>",
@@ -91,7 +78,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>",
@@ -116,11 +103,24 @@
   "Not encrypted": "Не зашифровано",
   "Share": "Поділитися",
   "Sharing screen": "Презентація екрана",
-  "Video off": "Відео вимкнено",
-  "Video on": "Відео ввімкнено",
   "{{count, number}}|one": "{{count, number}}",
   "End call": "Завершити виклик",
   "Grid": "Сітка",
   "Microphone off": "Мікрофон вимкнено",
-  "Share this call": "Поділитися цим викликом"
+  "Share this call": "Поділитися цим викликом",
+  "You": "Ви",
+  "Mute microphone": "Вимкнути мікрофон",
+  "Open in the app": "Відкрити у застосунку",
+  "Ready to join?": "Готові приєднатися?",
+  "Select app": "Вибрати застосунок",
+  "Start video": "Розпочати відео",
+  "Stop video": "Зупинити відео",
+  "Unmute microphone": "Увімкнути мікрофон",
+  "Continue in browser": "Продовжити у браузері",
+  "Name of call": "Назва виклику",
+  "Start new call": "Розпочати новий виклик",
+  "Back to recents": "Повернутися до недавніх",
+  "Call not found": "Виклик не знайдено",
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Відтепер виклики захищено наскрізним шифруванням, і їх потрібно створювати з домашньої сторінки. Це допомагає переконатися, що всі користувачі використовують один і той самий ключ шифрування.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Ваш браузер не підтримує наскрізне шифрування мультимедійних даних. Підтримувані браузери: Chrome, Safari, Firefox >=117"
 }

public/locales/vi/app.json

@@ -6,14 +6,10 @@
   "Sending…": "Đang gửi…",
   "Sign in": "Đăng nhập",
   "Submit": "Gửi",
-  "Video call name": "Tên cuộc gọi truyền hình",
-  "Video call": "Gọi truyền hình",
   "Video": "Truyền hình",
   "Username": "Tên người dùng",
   "Yes, join call": "Vâng, tham gia cuộc gọi",
   "Your feedback": "Phản hồi của bạn",
-  "Your recent calls": "Cuộc gọi gần đây",
-  "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}}",
   "Submit feedback": "Gửi phản hồi",
@@ -24,12 +20,10 @@
   "Join call now": "Tham gia cuộc gọi",
   "Create account": "Tạo tài khoản",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Tạo tài khoản</0> Hay <2>Tham gia dưới tên khác</2>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Tham gia cuộc gọi</0><1>hay</1><2>Sao chép liên kết cuộc gọi và tham gia sau</2>",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Gửi nhật ký gỡ lỗi sẽ giúp chúng tôi theo dõi vấn đề.</0>",
   "Avatar": "Ảnh đại diện",
   "Audio": "Âm thanh",
   "Camera": "Máy quay",
-  "Call link copied": "Đã sao chép liên kết cuộc gọi",
   "Copied!": "Đã sao chép!",
   "Confirm password": "Xác nhận mật khẩu",
   "Close": "Đóng",
@@ -42,7 +36,6 @@
   "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",
   "Include debug logs": "Kèm theo nhật ký gỡ lỗi",
   "Join existing call?": "Tham gia cuộc gọi?",
   "Loading…": "Đang tải…",
@@ -55,8 +48,6 @@
   "Spotlight": "Tiêu điểm",
   "Submitting…": "Đang gửi…",
   "Thanks, we received your feedback!": "Cảm ơn, chúng tôi đã nhận được phản hồi!",
-  "Walkie-talkie call": "Cuộc gọi thoại",
-  "Walkie-talkie call name": "Tên cuộc gọi thoại",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Đã có tài khoản?</0><1><0>Đăng nhập</0> Hay <2>Tham gia dưới tên Khách</2></1>",
   "Exit full screen": "Rời chế độ toàn màn hình",
   "Profile": "Hồ sơ",

public/locales/zh-Hans/app.json

@@ -1,18 +1,11 @@
 {
-  "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…": "等待其他参与者……",
-  "Video call name": "视频通话名称",
-  "Video call": "视频通话",
   "Video": "视频",
   "Version: {{version}}": "版本：{{version}}",
   "Username": "用户名",
   "User menu": "用户菜单",
   "This call already exists, would you like to join?": "该通话已存在，你想加入吗？",
-  "Take me Home": "返回主页",
   "Submit feedback": "提交反馈",
   "Spotlight": "聚焦模式",
   "Speaker": "发言人",
@@ -21,7 +14,6 @@
   "Audio": "音频",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "这个通话中的另一个用户出现了问题。为了更好地诊断这些问题，我们想收集调试日志。",
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>为什么不设置一个密码来保留你的账户？</0><1>你将可以保留你的名字并设置一个头像，以便在未来的通话中使用。</1>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>现在加入通话</0><1>或</1><2>复制通话链接并稍后加入</2>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>创建账户</0> Or <2>以访客身份继续</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>已有账户？</0><1><0>登录</0> Or <2>以访客身份继续</2></1>",
   "Inspector": "检查器",
@@ -41,7 +33,6 @@
   "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": "否",
@@ -55,12 +46,10 @@
   "Join existing call?": "加入现有的通话？",
   "Join call now": "现在加入通话",
   "Join call": "加入通话",
-  "Incompatible versions": "不兼容版本",
   "Include debug logs": "包含调试日志",
   "Home": "主页",
   "Go": "开始",
   "Full screen": "全屏",
-  "Fetching group call timed out.": "获取群组通话超时。",
   "Exit full screen": "退出全屏",
   "Element Call Home": "Element Call 主页",
   "Download debug logs": "下载调试日志",
@@ -75,8 +64,6 @@
   "Confirm password": "确认密码",
   "Close": "关闭",
   "Camera": "摄像头",
-  "Call type menu": "通话类型菜单",
-  "Call link copied": "链接已复制",
   "Avatar": "头像",
   "<0>Oops, something's gone wrong.</0>": "<0>哎哟，出问题了。</0>",
   "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": ""

public/locales/zh-Hant/app.json

@@ -1,25 +1,17 @@
 {
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>現在加入通話</0><1>或</1><2>複製通話連結，稍後再加入</2>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>建立帳號</0> 或<2>以訪客身份登入</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>已經有帳號?</0><1><0>登入</0> 或<2>以訪客身份登入</2></1>",
   "Expose developer settings in the settings window.": "在設定視窗中顯示開發者設定。",
   "Developer Settings": "開發者設定",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>送出除錯紀錄，可幫助我們修正問題。</0>",
   "<0>Oops, something's gone wrong.</0>": "<0>喔喔，有些地方怪怪的。</0>",
-  "Your recent calls": "您最近的通話",
   "Yes, join call": "是，加入對話",
-  "WebRTC is not supported or is being blocked in this browser.": "此瀏覽器未支援 WebRTC 或 WebRTC 被瀏覽器封鎖。",
-  "Walkie-talkie call name": "對講機式通話名稱",
-  "Walkie-talkie call": "即時通話",
   "Waiting for other participants…": "等待其他參加者…",
-  "Video call name": "視訊通話姓名",
-  "Video call": "視訊通話",
   "Video": "視訊",
   "Version: {{version}}": "版本： {{version}}",
   "Username": "使用者名稱",
   "User menu": "使用者選單",
   "This call already exists, would you like to join?": "通話已經開始，請問您要加入嗎？",
-  "Take me Home": "帶我回主畫面",
   "Submit feedback": "遞交回覆",
   "Spotlight": "聚焦",
   "Speaker": "發言者",
@@ -41,7 +33,6 @@
   "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": "否",
@@ -56,12 +47,10 @@
   "Join call now": "現在加入通話",
   "Join call": "加入通話",
   "Inspector": "稽查員",
-  "Incompatible versions": "不相容版本",
   "Include debug logs": "包含除錯紀錄",
   "Home": "首頁",
   "Go": "前往",
   "Full screen": "全螢幕",
-  "Fetching group call timed out.": "加入群組對話已逾時。",
   "Exit full screen": "退出全螢幕",
   "Element Call Home": "Element Call 首頁",
   "Download debug logs": "下載偵錯報告",
@@ -76,8 +65,6 @@
   "Confirm password": "確認密碼",
   "Close": "關閉",
   "Camera": "相機",
-  "Call type menu": "通話類型選單",
-  "Call link copied": "已複製通話連結",
   "Avatar": "大頭照",
   "Audio": "語音",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "這通對話中的另一位使用者遇到了某些問題。為了診斷問題，我們將會建立除錯紀錄。",
@@ -108,5 +95,32 @@
   "Thanks!": "感謝！",
   "You were disconnected from the call": "您已從通話斷線",
   "Enable end-to-end encryption (password protected calls)": "啟用端到端加密（密碼保護通話）",
-  "End-to-end encryption isn't supported on your browser.": "您的瀏覽器不支援端到端加密。"
+  "End-to-end encryption isn't supported on your browser.": "您的瀏覽器不支援端到端加密。",
+  "{{count, number}}|one": "{{count, number}}",
+  "{{count, number}}|other": "{{count, number}}",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
+  "Encrypted": "已加密",
+  "End call": "結束通話",
+  "Grid": "網格",
+  "Microphone off": "麥克風關閉",
+  "Microphone on": "麥克風開啟",
+  "Not encrypted": "未加密",
+  "Share": "分享",
+  "Share this call": "分享此通話",
+  "Sharing screen": "分享畫面",
+  "You": "您",
+  "Continue in browser": "在瀏覽器中繼續",
+  "Mute microphone": "將麥克風靜音",
+  "Name of call": "通話名稱",
+  "Open in the app": "在應用程式中開啟",
+  "Ready to join?": "準備好加入了？",
+  "Select app": "選取應用程式",
+  "Start new call": "開始新通話",
+  "Start video": "開始影片",
+  "Back to recents": "回到最近的通話",
+  "Stop video": "停止影片",
+  "Unmute microphone": "將麥克風取消靜音",
+  "Call not found": "找不到通話",
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "通話現在是端對端加密的，必須從首頁建立。這有助於確保每個人都使用相同的加密金鑰。",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "您的網路瀏覽器不支援媒體端到端加密。支援的瀏覽器包含了 Chrome、Safari、Firefox >=117"
 }

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";
@@ -34,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;
 }
@@ -53,40 +78,42 @@ export default function App({ history }: AppProps) {
     // 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>
   );
 }

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);
+}

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>
+  )
+);

src/Header.module.css

@@ -21,6 +21,7 @@ limitations under the License.
   align-items: center;
   user-select: none;
   flex-shrink: 0;
+  padding-inline: var(--inline-content-inset);
 }
 
 .nav {
@@ -28,7 +29,6 @@ limitations under the License.
   flex: 1;
   align-items: center;
   white-space: nowrap;
-  padding-inline: var(--inline-content-inset);
   height: 80px;
 }
 

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,210 @@ 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;
+  flex-grow: 1;
 }
 
-.content p {
-  margin-top: 0;
+.dialog .content {
+  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: var(--border-radius);
+  border-start-end-radius: var(--border-radius);
+  /* Drawer comes in the Android style by default */
+  --border-radius: 28px;
+  --handle-block-size: 4px;
+  --handle-inline-size: 32px;
+  --handle-inset-block-start: var(--cpd-space-4x);
+  --handle-inset-block-end: var(--cpd-space-4x);
+}
+
+body[data-platform="ios"] .drawer {
+  --border-radius: 10px;
+  --handle-block-size: 5px;
+  --handle-inline-size: 36px;
+  --handle-inset-block-start: var(--cpd-space-1-5x);
+  --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;
+}
+
+.body {
+  flex-grow: 1;
+}
+
+.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);
+}

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,130 @@ 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(),
+  // Empirically, Chrome on Android can end up not matching (hover: none), but
+  // still matching (pointer: coarse) :/
+  const touchscreen = useMediaQuery("(hover: none) or (pointer: coarse)");
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) onDismiss?.();
     },
-    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>
+    );
+  }
 }

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

src/UrlParams.ts

@@ -21,15 +21,35 @@ import { Config } from "./config/Config";
 
 export const PASSWORD_STRING = "password=";
 
-interface UrlParams {
+interface RoomIdentifier {
   roomAlias: string | null;
   roomId: string | null;
   viaServers: string[];
+}
+
+// If you need to add a new flag to this interface, prefer a name that describes
+// a specific behavior (such as 'confineToRoom'), rather than one that describes
+// the situations that call for this behavior ('isEmbedded'). This makes it
+// clearer what each flag means, and helps us avoid coupling Element Call's
+// behavior to the needs of specific consumers.
+interface UrlParams {
   /**
-   * Whether the app is running in embedded mode, and should keep the user
-   * confined to the current room.
+   * Anything about what room we're pointed to should be from useRoomIdentifier which
+   * parses the path and resolves alias with respect to the default server name, however
+   * roomId is an exception as we need the room ID in embedded (matroyska) mode, and not
+   * the room alias (or even the via params because we are not trying to join it). This
+   * is also not validated, where it is in useRoomIdentifier().
    */
-  isEmbedded: boolean;
+  roomId: string | null;
+  /**
+   * Whether the app should keep the user confined to the current call/room.
+   */
+  confineToRoom: boolean;
+  /**
+   * Whether upon entering a room, the user should be prompted to launch the
+   * native mobile app. (Affects only Android and iOS.)
+   */
+  appPrompt: boolean;
   /**
    * Whether the app should pause before joining the call until it sees an
    * io.element.join widget action, allowing it to be preloaded.
@@ -43,10 +63,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,76 +110,148 @@ interface UrlParams {
   password: string | null;
 }
 
-/**
- * Gets the app parameters for the current URL.
- * @param ignoreRoomAlias If true, does not try to parse a room alias from the URL
- * @param search The URL search string
- * @param pathname The URL path name
- * @param hash The URL hash
- * @returns The app parameters encoded in the URL
- */
-export const getUrlParams = (
-  ignoreRoomAlias?: boolean,
-  search = window.location.search,
-  pathname = window.location.pathname,
-  hash = window.location.hash
-): UrlParams => {
-  // This is legacy code - we're moving away from using aliases
-  let roomAlias: string | null = null;
-  if (!ignoreRoomAlias) {
-    // Here we handle the beginning of the alias and make sure it starts with a
-    // "#"
-    if (hash === "" || hash.startsWith("#?")) {
-      roomAlias = pathname.substring(1); // Strip the "/"
-
-      // Delete "/room/", if present
-      if (roomAlias.startsWith("room/")) {
-        roomAlias = roomAlias.substring("room/".length);
-      }
-      // Add "#", if not present
-      if (!roomAlias.startsWith("#")) {
-        roomAlias = `#${roomAlias}`;
-      }
-    } else {
-      roomAlias = hash;
-    }
-
-    // Delete "?" and what comes afterwards
-    roomAlias = roomAlias.split("?")[0];
-
-    if (roomAlias.length <= 1) {
-      // Make roomAlias is null, if it only is a "#"
-      roomAlias = null;
-    } else {
-      // Add server part, if not present
-      if (!roomAlias.includes(":")) {
-        roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
-      }
-    }
-  }
-
+// This is here as a stopgap, but what would be far nicer is a function that
+// takes a UrlParams and returns a query string. That would enable us to
+// consolidate all the data about URL parameters and their meanings to this one
+// file.
+export function editFragmentQuery(
+  hash: string,
+  edit: (params: URLSearchParams) => URLSearchParams
+): string {
   const fragmentQueryStart = hash.indexOf("?");
-  const fragmentParams = new URLSearchParams(
-    fragmentQueryStart === -1 ? "" : hash.substring(fragmentQueryStart)
+  const fragmentParams = edit(
+    new URLSearchParams(
+      fragmentQueryStart === -1 ? "" : hash.substring(fragmentQueryStart)
+    )
   );
-  const queryParams = new URLSearchParams(search);
+  return `${hash.substring(
+    0,
+    fragmentQueryStart
+  )}?${fragmentParams.toString()}`;
+}
+
+class ParamParser {
+  private fragmentParams: URLSearchParams;
+  private queryParams: URLSearchParams;
+
+  constructor(search: string, hash: string) {
+    this.queryParams = new URLSearchParams(search);
+
+    const fragmentQueryStart = hash.indexOf("?");
+    this.fragmentParams = new URLSearchParams(
+      fragmentQueryStart === -1 ? "" : hash.substring(fragmentQueryStart)
+    );
+  }
 
   // Normally, URL params should be encoded in the fragment so as to avoid
   // leaking them to the server. However, we also check the normal query
   // string for backwards compatibility with versions that only used that.
-  const hasParam = (name: string): boolean =>
-    fragmentParams.has(name) || queryParams.has(name);
-  const getParam = (name: string): string | null =>
-    fragmentParams.get(name) ?? queryParams.get(name);
-  const getAllParams = (name: string): string[] => [
-    ...fragmentParams.getAll(name),
-    ...queryParams.getAll(name),
-  ];
+  getParam(name: string): string | null {
+    return this.fragmentParams.get(name) ?? this.queryParams.get(name);
+  }
 
-  const fontScale = parseFloat(getParam("fontScale") ?? "");
+  getAllParams(name: string): string[] {
+    return [
+      ...this.fragmentParams.getAll(name),
+      ...this.queryParams.getAll(name),
+    ];
+  }
+
+  getFlagParam(name: string, defaultValue = false): boolean {
+    const param = this.getParam(name);
+    return param === null ? defaultValue : param !== "false";
+  }
+}
+
+/**
+ * Gets the app parameters for the current URL.
+ * @param search The URL search string
+ * @param hash The URL hash
+ * @returns The app parameters encoded in the URL
+ */
+export const getUrlParams = (
+  search = window.location.search,
+  hash = window.location.hash
+): UrlParams => {
+  const parser = new ParamParser(search, hash);
+
+  const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
+
+  return {
+    // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
+    // what would we do if it were invalid? If the widget API says that's what
+    // the room ID is, then that's what it is.
+    roomId: parser.getParam("roomId"),
+    password: parser.getParam("password"),
+    // This flag has 'embed' as an alias for historical reasons
+    confineToRoom:
+      parser.getFlagParam("confineToRoom") || parser.getFlagParam("embed"),
+    appPrompt: parser.getFlagParam("appPrompt", true),
+    preload: parser.getFlagParam("preload"),
+    hideHeader: parser.getFlagParam("hideHeader"),
+    hideScreensharing: parser.getFlagParam("hideScreensharing"),
+    e2eEnabled: parser.getFlagParam("enableE2e", true),
+    userId: parser.getParam("userId"),
+    displayName: parser.getParam("displayName"),
+    deviceId: parser.getParam("deviceId"),
+    baseUrl: parser.getParam("baseUrl"),
+    lang: parser.getParam("lang"),
+    fonts: parser.getAllParams("font"),
+    fontScale: Number.isNaN(fontScale) ? null : fontScale,
+    analyticsID: parser.getParam("analyticsID"),
+    allowIceFallback: parser.getFlagParam("allowIceFallback"),
+  };
+};
+
+/**
+ * Hook to simplify use of getUrlParams.
+ * @returns The app parameters for the current URL
+ */
+export const useUrlParams = (): UrlParams => {
+  const { search, hash } = useLocation();
+  return useMemo(() => getUrlParams(search, hash), [search, hash]);
+};
+
+export function getRoomIdentifierFromUrl(
+  pathname: string,
+  search: string,
+  hash: string
+): RoomIdentifier {
+  let roomAlias: string | null = null;
+
+  // Here we handle the beginning of the alias and make sure it starts with a "#"
+  if (hash === "" || hash.startsWith("#?")) {
+    roomAlias = pathname.substring(1); // Strip the "/"
+
+    // Delete "/room/", if present
+    if (roomAlias.startsWith("room/")) {
+      roomAlias = roomAlias.substring("room/".length);
+    }
+    // Add "#", if not present
+    if (!roomAlias.startsWith("#")) {
+      roomAlias = `#${roomAlias}`;
+    }
+  } else {
+    roomAlias = hash;
+  }
+
+  // Delete "?" and what comes afterwards
+  roomAlias = roomAlias.split("?")[0];
+
+  if (roomAlias.length <= 1) {
+    // Make roomAlias is null, if it only is a "#"
+    roomAlias = null;
+  } else {
+    // Add server part, if not present
+    if (!roomAlias.includes(":")) {
+      roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
+    }
+  }
+
+  const parser = new ParamParser(search, hash);
 
   // Make sure roomId is valid
-  let roomId: string | null = getParam("roomId");
+  let roomId: string | null = parser.getParam("roomId");
   if (!roomId?.startsWith("!")) {
     roomId = null;
   } else if (!roomId.includes("")) {
@@ -173,34 +261,14 @@ export const getUrlParams = (
   return {
     roomAlias,
     roomId,
-    password: getParam("password"),
-    viaServers: getAllParams("via"),
-    isEmbedded: hasParam("embed"),
-    preload: hasParam("preload"),
-    hideHeader: hasParam("hideHeader"),
-    hideScreensharing: hasParam("hideScreensharing"),
-    isPtt: hasParam("ptt"),
-    e2eEnabled: getParam("enableE2e") !== "false", // Defaults to true
-    userId: getParam("userId"),
-    displayName: getParam("displayName"),
-    deviceId: getParam("deviceId"),
-    baseUrl: getParam("baseUrl"),
-    lang: getParam("lang"),
-    fonts: getAllParams("font"),
-    fontScale: Number.isNaN(fontScale) ? null : fontScale,
-    analyticsID: getParam("analyticsID"),
-    allowIceFallback: hasParam("allowIceFallback"),
+    viaServers: parser.getAllParams("viaServers"),
   };
-};
+}
 
-/**
- * Hook to simplify use of getUrlParams.
- * @returns The app parameters for the current URL
- */
-export const useUrlParams = (): UrlParams => {
-  const { search, pathname, hash } = useLocation();
+export const useRoomIdentifier = (): RoomIdentifier => {
+  const { pathname, search, hash } = useLocation();
   return useMemo(
-    () => getUrlParams(false, search, pathname, hash),
-    [search, pathname, hash]
+    () => getRoomIdentifierFromUrl(pathname, search, hash),
+    [pathname, search, hash]
   );
 };

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}
         />
       )}
     </>

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>

src/e2ee/sharedKeyManagement.ts

@@ -20,11 +20,12 @@ import { useEnableE2EE } from "../settings/useSetting";
 import { useLocalStorage } from "../useLocalStorage";
 import { useClient } from "../ClientContext";
 import { PASSWORD_STRING, useUrlParams } from "../UrlParams";
+import { widget } from "../widget";
 
 export const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
   `room-shared-key-${roomId}`;
 
-export const useInternalRoomSharedKey = (
+const useInternalRoomSharedKey = (
   roomId: string
 ): [string | null, (value: string) => void] => {
   const key = useMemo(() => getRoomSharedKeyLocalStorageKey(roomId), [roomId]);
@@ -34,52 +35,62 @@ export const useInternalRoomSharedKey = (
   return [e2eeEnabled ? roomSharedKey : null, setRoomSharedKey];
 };
 
-export const useRoomSharedKey = (roomId: string): string | null => {
-  return useInternalRoomSharedKey(roomId)[0];
-};
-
-export const useManageRoomSharedKey = (roomId: string): string | null => {
-  const { password } = useUrlParams();
+const useKeyFromUrl = (roomId: string): string | null => {
+  const urlParams = useUrlParams();
   const [e2eeSharedKey, setE2EESharedKey] = useInternalRoomSharedKey(roomId);
 
   useEffect(() => {
-    if (!password) return;
-    if (password === "") return;
-    if (password === e2eeSharedKey) return;
+    if (!urlParams.password) return;
+    if (urlParams.password === "") return;
+    if (urlParams.password === e2eeSharedKey) return;
 
-    setE2EESharedKey(password);
-  }, [password, e2eeSharedKey, setE2EESharedKey]);
+    setE2EESharedKey(urlParams.password);
+  }, [urlParams, e2eeSharedKey, setE2EESharedKey]);
+
+  return urlParams.password ?? null;
+};
+
+export const useRoomSharedKey = (roomId: string): string | null => {
+  // make sure we've extracted the key from the URL first
+  // (and we still need to take the value it returns because
+  // the effect won't run in time for it to save to localstorage in
+  // time for us to read it out again).
+  const passwordFormUrl = useKeyFromUrl(roomId);
+
+  return useInternalRoomSharedKey(roomId)[0] ?? passwordFormUrl;
+};
+
+export const useManageRoomSharedKey = (roomId: string): string | null => {
+  const urlParams = useUrlParams();
+
+  const urlPassword = useKeyFromUrl(roomId);
+
+  const [e2eeSharedKey] = useInternalRoomSharedKey(roomId);
 
   useEffect(() => {
     const hash = location.hash;
 
     if (!hash.includes("?")) return;
     if (!hash.includes(PASSWORD_STRING)) return;
-    if (password !== e2eeSharedKey) return;
+    if (urlParams.password !== e2eeSharedKey) return;
 
     const [hashStart, passwordStart] = hash.split(PASSWORD_STRING);
-    const hashEnd = passwordStart.split("&")[1];
+    const hashEnd = passwordStart.split("&").slice(1).join("&");
 
     location.replace((hashStart ?? "") + (hashEnd ?? ""));
-  }, [password, e2eeSharedKey]);
+  }, [urlParams, e2eeSharedKey]);
 
-  return e2eeSharedKey;
+  return e2eeSharedKey ?? urlPassword;
 };
 
 export const useIsRoomE2EE = (roomId: string): boolean | null => {
-  const { isEmbedded } = useUrlParams();
-  const client = useClient();
-  const room = useMemo(
-    () => client.client?.getRoom(roomId) ?? null,
-    [roomId, client.client]
+  const { client } = useClient();
+  const room = useMemo(() => client?.getRoom(roomId) ?? null, [roomId, client]);
+  // For now, rooms in widget mode are never considered encrypted.
+  // In the future, when widget mode gains encryption support, then perhaps we
+  // should inspect the e2eEnabled URL parameter here?
+  return useMemo(
+    () => widget === null && (room === null || !room.getCanonicalAlias()),
+    [room]
   );
-  const isE2EE = useMemo(() => {
-    if (isEmbedded) {
-      return false;
-    } else {
-      return room ? !room?.getCanonicalAlias() : null;
-    }
-  }, [isEmbedded, room]);
-
-  return isE2EE;
 };

src/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>

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>

src/home/CallList.tsx

@@ -17,11 +17,12 @@ limitations under the License.
 import { Link } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { Room } from "matrix-js-sdk/src/models/room";
 
 import { CopyButton } from "../button";
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
-import { getRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../matrix-utils";
 import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
 import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
@@ -34,13 +35,13 @@ export function CallList({ rooms, client }: CallListProps) {
   return (
     <>
       <div className={styles.callList}>
-        {rooms.map(({ room, roomAlias, roomName, avatarUrl, participants }) => (
+        {rooms.map(({ room, roomName, avatarUrl, participants }) => (
           <CallTile
-            key={roomAlias}
+            key={room.roomId}
             client={client}
             name={roomName}
             avatarUrl={avatarUrl}
-            roomId={room.roomId}
+            room={room}
             participants={participants}
           />
         ))}
@@ -57,17 +58,22 @@ export function CallList({ rooms, client }: CallListProps) {
 interface CallTileProps {
   name: string;
   avatarUrl: string;
-  roomId: string;
+  room: Room;
   participants: RoomMember[];
   client: MatrixClient;
 }
-function CallTile({ name, avatarUrl, roomId }: CallTileProps) {
-  const roomSharedKey = useRoomSharedKey(roomId);
+function CallTile({ name, avatarUrl, room }: CallTileProps) {
+  const roomSharedKey = useRoomSharedKey(room.roomId);
 
   return (
     <div className={styles.callTile}>
-      <Link to={`/room/#?roomId=${roomId}`} className={styles.callTileLink}>
-        <Avatar id={roomId} name={name} size={Size.LG} src={avatarUrl} />
+      <Link
+        // note we explicitly omit the password here as we don't want it on this link because
+        // it's just for the user to navigate around and not for sharing
+        to={getRelativeRoomUrl(room.roomId, room.name)}
+        className={styles.callTileLink}
+      >
+        <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
         <div className={styles.callInfo}>
           <Body overflowEllipsis fontWeight="semiBold">
             {name}
@@ -78,7 +84,11 @@ function CallTile({ name, avatarUrl, roomId }: CallTileProps) {
       <CopyButton
         className={styles.copyButton}
         variant="icon"
-        value={getRoomUrl(roomId, roomSharedKey ?? undefined)}
+        value={getAbsoluteRoomUrl(
+          room.roomId,
+          room.name,
+          roomSharedKey ?? undefined
+        )}
       />
     </div>
   );

src/home/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>
-  );
-};

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 />
     );

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>
   );
 }

src/home/RegisteredView.tsx

@@ -19,9 +19,11 @@ 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,
+  getRelativeRoomUrl,
   roomAliasLocalpartFromRoomName,
   sanitiseRoomNameInput,
 } from "../matrix-utils";
@@ -33,11 +35,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 +46,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 +71,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) {
@@ -85,7 +87,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
           );
         }
 
-        history.push(`/room/#?roomId=${roomId}`);
+        history.push(getRelativeRoomUrl(roomId, roomName));
       }
 
       submit().catch((error) => {
@@ -93,7 +95,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 +103,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
         }
       });
     },
-    [client, history, modalState, callType, e2eeEnabled]
+    [client, history, setJoinExistingCallModalOpen, e2eeEnabled]
   );
 
   const recentRooms = useGroupCallRooms(client);
@@ -111,32 +113,29 @@ 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>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
-        <RightNav>
-          <UserMenuContainer />
-        </RightNav>
-      </Header>
       <div className={commonStyles.container}>
+        <Header>
+          <LeftNav>
+            <HeaderLogo />
+          </LeftNav>
+          <RightNav>
+            <UserMenuContainer />
+          </RightNav>
+        </Header>
         <main className={commonStyles.main}>
           <HeaderLogo className={commonStyles.logo} />
-          <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 +165,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}
+      />
     </>
   );
 }

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";
@@ -26,16 +27,15 @@ import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import {
   createRoom,
+  getRelativeRoomUrl,
   roomAliasLocalpartFromRoomName,
   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 +48,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 +72,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 +89,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 +113,7 @@ export const UnauthenticatedView: FC = () => {
             });
 
             setLoading(false);
-            modalState.open();
+            setJoinExistingCallModalOpen(true);
             return;
           } else {
             throw error;
@@ -123,7 +126,7 @@ export const UnauthenticatedView: FC = () => {
         }
 
         setClient({ client, session });
-        history.push(`/room/#?roomId=${roomId}`);
+        history.push(getRelativeRoomUrl(roomId, roomName));
       }
 
       submit().catch((error) => {
@@ -138,39 +141,35 @@ 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>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
-        <RightNav hideMobile>
-          <UserMenuContainer />
-        </RightNav>
-      </Header>
       <div className={commonStyles.container}>
+        <Header>
+          <LeftNav>
+            <HeaderLogo />
+          </LeftNav>
+          <RightNav hideMobile>
+            <UserMenuContainer />
+          </RightNav>
+        </Header>
         <main className={commonStyles.main}>
           <HeaderLogo className={commonStyles.logo} />
-          <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 +234,12 @@ export const UnauthenticatedView: FC = () => {
           </Body>
         </footer>
       </div>
-      {modalState.isOpen && onFinished && (
-        <JoinExistingCallModal onJoin={onFinished} {...modalProps} />
+      {onFinished && (
+        <JoinExistingCallModal
+          onJoin={onFinished}
+          open={joinExistingCallModalOpen}
+          onDismiss={onDismissJoinExistingCallModal}
+        />
       )}
     </>
   );

src/home/common.module.css

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

src/home/useGroupCallRooms.ts

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

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));
@@ -51,12 +45,17 @@ limitations under the License.
   --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 {
@@ -144,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;
 }
@@ -152,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 {
@@ -160,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,

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,
@@ -61,7 +62,7 @@ export class Initializer {
     languageDetector.addDetector({
       name: "urlFragment",
       // Look for a language code in the URL's fragment
-      lookup: () => getUrlParams(true).lang ?? undefined,
+      lookup: () => getUrlParams().lang ?? undefined,
     });
 
     i18n
@@ -94,7 +95,7 @@ export class Initializer {
     }
 
     // Custom fonts
-    const { fonts, fontScale } = getUrlParams(true);
+    const { fonts, fontScale } = getUrlParams();
     if (fontScale !== null) {
       document.documentElement.style.setProperty(
         "--font-scale",
@@ -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 {

src/livekit/MediaDevicesContext.tsx

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

src/livekit/useECConnectionState.ts

@@ -14,7 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ConnectionState, Room, RoomEvent } from "livekit-client";
+import {
+  AudioCaptureOptions,
+  ConnectionState,
+  Room,
+  RoomEvent,
+} from "livekit-client";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -42,7 +47,34 @@ 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);
+
+  // Always create an audio track manually.
+  // livekit (by default) keeps the mic track open when you mute, but if you start muted,
+  // doesn't publish it until you unmute. We want to publish it from the start so we're
+  // always capturing audio: it helps keep bluetooth headsets in the right mode and
+  // mobile browsers to know we're doing a call.
+  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 {
@@ -53,6 +85,7 @@ export function useECConnectionState(
   );
 
   const [isSwitchingFocus, setSwitchingFocus] = useState(false);
+  const [isInDoConnect, setIsInDoConnect] = useState(false);
 
   const onConnStateChanged = useCallback((state: ConnectionState) => {
     if (state == ConnectionState.Connected) setSwitchingFocus(false);
@@ -89,12 +122,46 @@ export function useECConnectionState(
       (async () => {
         setSwitchingFocus(true);
         await livekitRoom?.disconnect();
-        await livekitRoom?.connect(sfuConfig!.url, sfuConfig!.jwt);
+        setIsInDoConnect(true);
+        try {
+          await doConnect(
+            livekitRoom!,
+            sfuConfig!,
+            initialAudioEnabled,
+            initialAudioOptions
+          );
+        } finally {
+          setIsInDoConnect(false);
+        }
       })();
+    } 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.
+      setIsInDoConnect(true);
+      doConnect(
+        livekitRoom!,
+        sfuConfig!,
+        initialAudioEnabled,
+        initialAudioOptions
+      ).finally(() => setIsInDoConnect(false));
     }
 
     currentSFUConfig.current = Object.assign({}, sfuConfig);
-  }, [sfuConfig, livekitRoom]);
+  }, [sfuConfig, livekitRoom, initialAudioOptions, initialAudioEnabled]);
 
-  return isSwitchingFocus ? ECAddonConnectionState.ECSwitchingFocus : connState;
+  // Because we create audio tracks by hand, there's more to connecting than
+  // just what LiveKit does in room.connect, and we should continue to return
+  // ConnectionState.Connecting for the entire duration of the doConnect promise
+  return isSwitchingFocus
+    ? ECAddonConnectionState.ECSwitchingFocus
+    : isInDoConnect
+    ? ConnectionState.Connecting
+    : connState;
 }

src/livekit/useLiveKit.ts

@@ -23,7 +23,7 @@ import {
   setLogLevel,
 } from "livekit-client";
 import { useLiveKitRoom } from "@livekit/components-react";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import E2EEWorker from "livekit-client/e2ee-worker?worker";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -98,6 +98,11 @@ export function useLiveKit(
     [e2eeOptions]
   );
 
+  // useECConnectionState creates and publishes an audio track by hand. To keep
+  // this from racing with LiveKit's automatic creation of the audio track, we
+  // block audio from being enabled until the connection is finished.
+  const [blockAudio, setBlockAudio] = useState(true);
+
   // We have to create the room manually here due to a bug inside
   // @livekit/components-react. JSON.stringify() is used in deps of a
   // useEffect() with an argument that references itself, if E2EE is enabled
@@ -105,12 +110,25 @@ export function useLiveKit(
   const { room } = useLiveKitRoom({
     token: sfuConfig?.jwt,
     serverUrl: sfuConfig?.url,
-    audio: initialMuteStates.current.audio.enabled,
+    audio: initialMuteStates.current.audio.enabled && !blockAudio,
     video: initialMuteStates.current.video.enabled,
     room: roomWithoutProps,
+    connect: false,
   });
 
-  const connectionState = useECConnectionState(room, sfuConfig);
+  const connectionState = useECConnectionState(
+    {
+      deviceId: initialDevices.current.audioOutput.selectedId,
+    },
+    initialMuteStates.current.audio.enabled,
+    room,
+    sfuConfig
+  );
+
+  // Unblock audio once the connection is finished
+  useEffect(() => {
+    if (connectionState === ConnectionState.Connected) setBlockAudio(false);
+  }, [connectionState, setBlockAudio]);
 
   useEffect(() => {
     // Sync the requested mute states with LiveKit's mute states. We do it this

src/matrix-utils.ts

@@ -272,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`);
@@ -327,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
   );
@@ -343,15 +340,35 @@ export async function createRoom(
 }
 
 /**
- * Returns a URL to that will load Element Call with the given room
- * @param roomId of the room
- * @param password
- * @returns
+ * Returns an absolute URL to that will load Element Call with the given room
+ * @param roomId ID of the room
+ * @param roomName Name of the room
+ * @param password e2e key for the room
  */
-export function getRoomUrl(roomId: string, password?: string): string {
+export function getAbsoluteRoomUrl(
+  roomId: string,
+  roomName?: string,
+  password?: string
+): string {
   return `${window.location.protocol}//${
     window.location.host
-  }/room/#?roomId=${roomId}${password ? "&" + PASSWORD_STRING + password : ""}`;
+  }${getRelativeRoomUrl(roomId, roomName, password)}`;
+}
+
+/**
+ * Returns a relative URL to that will load Element Call with the given room
+ * @param roomId ID of the room
+ * @param roomName Name of the room
+ * @param password e2e key for the room
+ */
+export function getRelativeRoomUrl(
+  roomId: string,
+  roomName?: string,
+  password?: string
+): string {
+  return `/room/#${
+    roomName ? "/" + roomAliasLocalpartFromRoomName(roomName) : ""
+  }?roomId=${roomId}${password ? "&" + PASSWORD_STRING + password : ""}`;
 }
 
 export function getAvatarUrl(

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.
 */
 
-.label {
-  margin-bottom: 0;
+.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;
 }

src/room/AppSelectionModal.tsx

@@ -0,0 +1,91 @@
+/*
+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 { logger } from "matrix-js-sdk/src/logger";
+
+import { Modal } from "../Modal";
+import { useIsRoomE2EE, useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { getAbsoluteRoomUrl } 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 roomIsEncrypted = useIsRoomE2EE(roomId ?? "");
+  if (roomIsEncrypted && roomSharedKey === undefined) {
+    logger.error(
+      "Generating app redirect URL for encrypted room but don't have key available!"
+    );
+  }
+
+  const appUrl = useMemo(() => {
+    // If the room ID is not known, fall back to the URL of the current page
+    // Also, we don't really know the room name at this stage as we haven't
+    // started a client and synced to get the room details. We could take the one
+    // we got in our own URL and use that, but it's not a string that a human
+    // ever sees so it's somewhat redundant. We just don't pass a name.
+    const url = new URL(
+      roomId === null
+        ? window.location.href
+        : getAbsoluteRoomUrl(roomId, undefined, roomSharedKey ?? undefined)
+    );
+    // Edit the URL to prevent the app selection prompt from appearing a second
+    // time within the app, and to keep the user confined to the current room
+    url.hash = editFragmentQuery(url.hash, (params) => {
+      params.set("appPrompt", "false");
+      params.set("confineToRoom", "true");
+      return params;
+    });
+
+    const result = new URL("io.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>
+  );
+};

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 {

src/room/CallEndedView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { FormEventHandler, useCallback, useState } from "react";
+import { FC, FormEventHandler, useCallback, useState } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Trans, useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
@@ -30,19 +30,23 @@ import { FieldRow, InputField } from "../input/Input";
 import { StarRatingInput } from "../input/StarRatingInput";
 import { RageshakeButton } from "../settings/RageshakeButton";
 
-export function CallEndedView({
-  client,
-  isPasswordlessUser,
-  endedCallId,
-  leaveError,
-  reconnect,
-}: {
+interface Props {
   client: MatrixClient;
   isPasswordlessUser: boolean;
+  confineToRoom: boolean;
   endedCallId: string;
   leaveError?: Error;
   reconnect: () => void;
-}) {
+}
+
+export const CallEndedView: FC<Props> = ({
+  client,
+  isPasswordlessUser,
+  confineToRoom,
+  endedCallId,
+  leaveError,
+  reconnect,
+}) => {
   const { t } = useTranslation();
   const history = useHistory();
 
@@ -72,14 +76,14 @@ export function CallEndedView({
           if (isPasswordlessUser) {
             // setting this renders the callEndedView with the invitation to create an account
             setSurverySubmitted(true);
-          } else {
+          } else if (!confineToRoom) {
             // if the user already has an account immediately go back to the home screen
             history.push("/");
           }
         }, 1000);
       }, 1000);
     },
-    [endedCallId, history, isPasswordlessUser, starRating]
+    [endedCallId, history, isPasswordlessUser, confineToRoom, starRating]
   );
 
   const createAccountDialog = isPasswordlessUser && (
@@ -161,11 +165,13 @@ export function CallEndedView({
               </div>
             </div>
           </main>
-          <Body className={styles.footer}>
-            <Link color="primary" to="/">
-              {t("Return to home screen")}
-            </Link>
-          </Body>
+          {!confineToRoom && (
+            <Body className={styles.footer}>
+              <Link color="primary" to="/">
+                {t("Return to home screen")}
+              </Link>
+            </Body>
+          )}
         </>
       );
     } else {
@@ -183,15 +189,18 @@ export function CallEndedView({
                   "\n" +
                   t("How did it go?")}
             </Headline>
-            {!surveySubmitted && PosthogAnalytics.instance.isEnabled()
+            {(!surveySubmitted || confineToRoom) &&
+            PosthogAnalytics.instance.isEnabled()
               ? qualitySurveyDialog
               : createAccountDialog}
           </main>
-          <Body className={styles.footer}>
-            <Link color="primary" to="/">
-              {t("Not now, return to home screen")}
-            </Link>
-          </Body>
+          {!confineToRoom && (
+            <Body className={styles.footer}>
+              <Link color="primary" to="/">
+                {t("Not now, return to home screen")}
+              </Link>
+            </Body>
+          )}
         </>
       );
     }
@@ -200,12 +209,10 @@ export function CallEndedView({
   return (
     <>
       <Header>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
+        <LeftNav>{!confineToRoom && <HeaderLogo />}</LeftNav>
         <RightNav />
       </Header>
       <div className={styles.container}>{renderBody()}</div>
     </>
   );
-}
+};

src/room/GroupCallLoader.tsx

@@ -14,10 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ReactNode } from "react";
+import { ReactNode, useCallback } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { MatrixError } from "matrix-js-sdk";
+import { useHistory } from "react-router-dom";
+import { Heading, Link, Text } from "@vector-im/compound-web";
 
 import { useLoadGroupCall } from "./useLoadGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
@@ -27,7 +30,6 @@ interface Props {
   roomIdOrAlias: string;
   viaServers: string[];
   children: (rtcSession: MatrixRTCSession) => ReactNode;
-  createPtt: boolean;
 }
 
 export function GroupCallLoader({
@@ -35,14 +37,17 @@ 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);
+
+  const history = useHistory();
+  const onHomeClick = useCallback(
+    (ev: React.MouseEvent) => {
+      ev.preventDefault();
+      history.push("/");
+    },
+    [history]
   );
 
   switch (groupCallState.kind) {
@@ -55,6 +60,24 @@ export function GroupCallLoader({
     case "loaded":
       return <>{children(groupCallState.rtcSession)}</>;
     case "failed":
-      return <ErrorView error={groupCallState.error} />;
+      if ((groupCallState.error as MatrixError).errcode === "M_NOT_FOUND") {
+        return (
+          <FullScreenView>
+            <Heading>{t("Call not found")}</Heading>
+            <Text>
+              {t(
+                "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key."
+              )}
+            </Text>
+            {/* XXX: A 'create it for me' button would be the obvious UX here. Two screens already have
+            dupes of this flow, let's make a common component and put it here. */}
+            <Link href="/" onClick={onHomeClick}>
+              {t("Home")}
+            </Link>
+          </FullScreenView>
+        );
+      } else {
+        return <ErrorView error={groupCallState.error} />;
+      }
   }
 }

src/room/GroupCallView.tsx

@@ -17,11 +17,12 @@ limitations under the License.
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import { useTranslation } from "react-i18next";
-import { Room } from "livekit-client";
+import { Room, isE2EESupported } 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 { Heading, Link, Text } from "@vector-im/compound-web";
+import { useTranslation } from "react-i18next";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import { widget, ElementWidgetActions, JoinCallData } from "../widget";
@@ -45,7 +46,6 @@ 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";
 
@@ -58,7 +58,7 @@ declare global {
 interface Props {
   client: MatrixClient;
   isPasswordlessUser: boolean;
-  isEmbedded: boolean;
+  confineToRoom: boolean;
   preload: boolean;
   hideHeader: boolean;
   rtcSession: MatrixRTCSession;
@@ -67,7 +67,7 @@ interface Props {
 export function GroupCallView({
   client,
   isPasswordlessUser,
-  isEmbedded,
+  confineToRoom,
   preload,
   hideHeader,
   rtcSession,
@@ -78,8 +78,6 @@ export function GroupCallView({
   const e2eeSharedKey = useManageRoomSharedKey(rtcSession.room.roomId);
   const isRoomE2EE = useIsRoomE2EE(rtcSession.room.roomId);
 
-  const { t } = useTranslation();
-
   useEffect(() => {
     window.rtcSession = rtcSession;
     return () => {
@@ -208,17 +206,6 @@ export function GroupCallView({
     }
   }, [rtcSession, preload]);
 
-  useEffect(() => {
-    if (isEmbedded && !preload) {
-      // In embedded mode, bypass the lobby and just enter the call straight away
-      enterRTCSession(rtcSession);
-
-      PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
-      // use the room ID as above
-      PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
-    }
-  }, [rtcSession, isEmbedded, preload]);
-
   const [left, setLeft] = useState(false);
   const [leaveError, setLeaveError] = useState<Error | undefined>(undefined);
   const history = useHistory();
@@ -239,7 +226,8 @@ export function GroupCallView({
 
       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.
+        // we need to wait until the callEnded event is tracked on posthog.
+        // Otherwise the iFrame gets killed before the callEnded event got tracked.
         await new Promise((resolve) => window.setTimeout(resolve, 10)); // 10ms
         widget.api.setAlwaysOnScreen(false);
         PosthogAnalytics.instance.logout();
@@ -248,13 +236,13 @@ export function GroupCallView({
 
       if (
         !isPasswordlessUser &&
-        !isEmbedded &&
+        !confineToRoom &&
         !PosthogAnalytics.instance.isEnabled()
       ) {
         history.push("/");
       }
     },
-    [rtcSession, isPasswordlessUser, isEmbedded, history]
+    [rtcSession, isPasswordlessUser, confineToRoom, history]
   );
 
   useEffect(() => {
@@ -286,15 +274,28 @@ export function GroupCallView({
 
   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;
 
+  const onHomeClick = useCallback(
+    (ev: React.MouseEvent) => {
+      ev.preventDefault();
+      history.push("/");
+    },
+    [history]
+  );
+
+  const { t } = useTranslation();
+
   if (e2eeEnabled && isRoomE2EE && !e2eeSharedKey) {
     return (
       <ErrorView
@@ -305,14 +306,30 @@ export function GroupCallView({
         }
       />
     );
-  }
-
-  if (!e2eeEnabled && isRoomE2EE) {
+  } else if (!isE2EESupported() && isRoomE2EE) {
+    return (
+      <FullScreenView>
+        <Heading>Incompatible Browser</Heading>
+        <Text>
+          {t(
+            "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117"
+          )}
+        </Text>
+        <Link href="/" onClick={onHomeClick}>
+          {t("Home")}
+        </Link>
+      </FullScreenView>
+    );
+  } else if (!e2eeEnabled && isRoomE2EE) {
     return <ErrorView error={new Error("You need to enable E2EE to join.")} />;
   }
 
-  const shareModal = shareModalState.isOpen && (
-    <ShareModal roomId={rtcSession.room.roomId} {...shareModalProps} />
+  const shareModal = (
+    <ShareModal
+      room={rtcSession.room}
+      open={shareModalOpen}
+      onDismiss={onDismissShareModal}
+    />
   );
 
   if (isJoined) {
@@ -342,7 +359,7 @@ export function GroupCallView({
     // submitting anything.
     if (
       isPasswordlessUser ||
-      (PosthogAnalytics.instance.isEnabled() && !isEmbedded) ||
+      (PosthogAnalytics.instance.isEnabled() && widget === null) ||
       leaveError
     ) {
       return (
@@ -350,6 +367,7 @@ export function GroupCallView({
           endedCallId={rtcSession.room.roomId}
           client={client}
           isPasswordlessUser={isPasswordlessUser}
+          confineToRoom={confineToRoom}
           leaveError={leaveError}
           reconnect={onReconnect}
         />
@@ -362,12 +380,6 @@ export function GroupCallView({
     }
   } else if (preload) {
     return null;
-  } else if (isEmbedded) {
-    return (
-      <FullScreenView>
-        <h1>{t("Loading…")}</h1>
-      </FullScreenView>
-    );
   } else {
     return (
       <>
@@ -377,7 +389,7 @@ export function GroupCallView({
           matrixInfo={matrixInfo}
           muteStates={muteStates}
           onEnter={() => enterRTCSession(rtcSession)}
-          isEmbedded={isEmbedded}
+          confineToRoom={confineToRoom}
           hideHeader={hideHeader}
           participatingMembers={participatingMembers}
           onShareClick={onShareClick}

src/room/InCallView.module.css

@@ -21,7 +21,7 @@ limitations under the License.
   min-height: 100%;
   height: 100%;
   width: 100%;
-  --footerPadding: 8px;
+  --footerPadding: var(--cpd-space-4x);
   --footerHeight: calc(50px + 2 * var(--footerPadding));
 }
 
@@ -83,17 +83,19 @@ limitations under the License.
   justify-self: end;
 }
 
-@media (min-height: 300px) {
+@media (min-height: 400px) {
   .inRoom {
-    --footerPadding: 40px;
+    --footerPadding: var(--cpd-space-10x);
+  }
+}
+
+@media (min-height: 800px) {
+  .inRoom {
+    --footerPadding: var(--cpd-space-15x);
   }
 }
 
 @media (min-width: 800px) {
-  .inRoom {
-    --footerPadding: 60px;
-  }
-
   .buttons {
     gap: var(--cpd-space-4x);
   }

src/room/InCallView.tsx

@@ -27,10 +27,9 @@ 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 { Room as MatrixRoom } from "matrix-js-sdk/src/models/room";
-import { Ref, useCallback, useEffect, useMemo, useRef } from "react";
+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 { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 
@@ -51,7 +50,6 @@ import {
   VideoGrid,
 } from "../video-grid/VideoGrid";
 import { useShowConnectionStats } from "../settings/useSetting";
-import { useModalTriggerState } from "../Modal";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
@@ -73,7 +71,10 @@ import { MuteStates } from "./MuteStates";
 import { MatrixInfo } from "./VideoPreview";
 import { ShareButton } from "../button/ShareButton";
 import { LayoutToggle } from "./LayoutToggle";
-import { ECConnectionState } from "../livekit/useECConnectionState";
+import {
+  ECAddonConnectionState,
+  ECConnectionState,
+} from "../livekit/useECConnectionState";
 import { useOpenIDSFU } from "../livekit/openIDSFU";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
@@ -82,6 +83,9 @@ const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // For now we can disable screensharing in Safari.
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
+// 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;
@@ -236,7 +240,7 @@ export function InCallView({
   const reducedControls = boundsValid && bounds.width <= 340;
   const noControls = reducedControls && bounds.height <= 400;
 
-  const items = useParticipantTiles(livekitRoom, rtcSession.room);
+  const items = useParticipantTiles(livekitRoom, rtcSession.room, connState);
   const { fullscreenItem, toggleFullscreen, exitFullscreen } =
     useFullscreen(items);
 
@@ -307,25 +311,20 @@ export function InCallView({
     );
   };
 
-  const {
-    modalState: rageshakeRequestModalState,
-    modalProps: rageshakeRequestModalProps,
-  } = useRageshakeRequestModal(rtcSession.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();
@@ -442,19 +441,13 @@ export function InCallView({
           show={showInspector}
         />
       )*/}
-      {rageshakeRequestModalState.isOpen && !noControls && (
-        <RageshakeRequestModal
-          {...rageshakeRequestModalProps}
-          roomId={rtcSession.room.roomId}
-        />
-      )}
-      {settingsModalState.isOpen && (
-        <SettingsModal
-          client={client}
-          roomId={rtcSession.room.roomId}
-          {...settingsModalProps}
-        />
-      )}
+      {!noControls && <RageshakeRequestModal {...rageshakeRequestModalProps} />}
+      <SettingsModal
+        client={client}
+        roomId={rtcSession.room.roomId}
+        open={settingsModalOpen}
+        onDismiss={closeSettings}
+      />
     </div>
   );
 }
@@ -482,8 +475,11 @@ function findMatrixMember(
 
 function useParticipantTiles(
   livekitRoom: Room,
-  matrixRoom: MatrixRoom
+  matrixRoom: MatrixRoom,
+  connState: ECConnectionState
 ): TileDescriptor<ItemData>[] {
+  const previousTiles = useRef<TileDescriptor<ItemData>[]>([]);
+
   const sfuParticipants = useParticipants({
     room: livekitRoom,
   });
@@ -565,5 +561,44 @@ function useParticipantTiles(
     return allGhosts ? [] : tiles;
   }, [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;
+  }
 }

src/room/LayoutToggle.module.css

@@ -24,6 +24,12 @@ limitations under the License.
 
 .toggle input {
   appearance: none;
+  /*
+   * Safari puts a margin on these, which is not removed via appearance: none
+   * mobile safari also has them take up space in the DOM, so set width 0
+   */
+  margin: 0;
+  width: 0;
   outline: none !important;
 }
 

src/room/LobbyView.module.css

@@ -14,61 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.room {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-height: 100%;
-}
-
-.joinRoom {
+.content {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  gap: var(--cpd-space-6x);
   flex: 1;
   overflow: hidden;
   height: 100%;
+  padding-block-end: var(--footerHeight);
 }
 
-.joinRoomContent {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
+@media (max-width: 500px) {
+  .join {
+    width: 100%;
+  }
 }
 
-.joinRoomFooter {
-  margin: 20px 0;
-}
-
-.homeLink {
-  margin-top: 50px;
-}
-
-.joinCallButton {
-  position: absolute;
-  width: 100%;
-  max-width: 222px;
-  height: 40px;
-  bottom: 86px;
-  left: 50%;
-  font-weight: 600;
-  font-size: var(--font-size-body);
-  transform: translateX(-50%);
-}
-
-.copyButton {
-  width: 320px !important;
-  margin-bottom: 15px;
-}
-
-.copyButton:last-child {
-  margin-bottom: 0;
-}
-
-.passwordField {
-  width: 320px !important;
-  margin-bottom: 20px;
-  flex: 0;
+@media (min-height: 650px) {
+  .content {
+    gap: var(--cpd-space-10x);
+  }
 }

src/room/LobbyView.tsx

@@ -14,27 +14,35 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useRef, useEffect, FC } from "react";
-import { Trans, useTranslation } from "react-i18next";
+import { FC, useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
+import { Button, Link } from "@vector-im/compound-web";
+import classNames from "classnames";
+import { useHistory } from "react-router-dom";
 
 import styles from "./LobbyView.module.css";
-import { Button, CopyButton } from "../button";
+import inCallStyles from "./InCallView.module.css";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
-import { getRoomUrl } from "../matrix-utils";
-import { Body, Link } from "../typography/Typography";
 import { useLocationNavigation } from "../useLocationNavigation";
 import { MatrixInfo, VideoPreview } from "./VideoPreview";
 import { MuteStates } from "./MuteStates";
-import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
 import { ShareButton } from "../button/ShareButton";
+import {
+  HangupButton,
+  MicButton,
+  SettingsButton,
+  VideoButton,
+} from "../button/Button";
+import { SettingsModal } from "../settings/SettingsModal";
+import { useMediaQuery } from "../useMediaQuery";
 
 interface Props {
   client: MatrixClient;
   matrixInfo: MatrixInfo;
   muteStates: MuteStates;
   onEnter: () => void;
-  isEmbedded: boolean;
+  confineToRoom: boolean;
   hideHeader: boolean;
   participatingMembers: RoomMember[];
   onShareClick: (() => void) | null;
@@ -45,74 +53,104 @@ export const LobbyView: FC<Props> = ({
   matrixInfo,
   muteStates,
   onEnter,
-  isEmbedded,
+  confineToRoom,
   hideHeader,
   participatingMembers,
   onShareClick,
 }) => {
   const { t } = useTranslation();
-  const roomSharedKey = useRoomSharedKey(matrixInfo.roomId);
   useLocationNavigation();
 
-  const joinCallButtonRef = useRef<HTMLButtonElement>(null);
-  useEffect(() => {
-    if (joinCallButtonRef.current) {
-      joinCallButtonRef.current.focus();
-    }
-  }, [joinCallButtonRef]);
+  const onAudioPress = useCallback(
+    () => muteStates.audio.setEnabled?.((e) => !e),
+    [muteStates]
+  );
+  const onVideoPress = useCallback(
+    () => muteStates.video.setEnabled?.((e) => !e),
+    [muteStates]
+  );
 
+  const [settingsModalOpen, setSettingsModalOpen] = useState(false);
+
+  const openSettings = useCallback(
+    () => setSettingsModalOpen(true),
+    [setSettingsModalOpen]
+  );
+  const closeSettings = useCallback(
+    () => setSettingsModalOpen(false),
+    [setSettingsModalOpen]
+  );
+
+  const history = useHistory();
+  const onLeaveClick = useCallback(() => history.push("/"), [history]);
+
+  const recentsButtonInFooter = useMediaQuery("(max-height: 500px)");
+  const recentsButton = !confineToRoom && (
+    <Link className={styles.recents} href="#" onClick={onLeaveClick}>
+      {t("Back to recents")}
+    </Link>
+  );
+
+  // TODO: Unify this component with InCallView, so we can get slick joining
+  // animations and don't have to feel bad about reusing its CSS
   return (
-    <div className={styles.room}>
-      {!hideHeader && (
-        <Header>
-          <LeftNav>
-            <RoomHeaderInfo
-              id={matrixInfo.roomId}
-              name={matrixInfo.roomName}
-              avatarUrl={matrixInfo.roomAvatar}
-              encrypted={matrixInfo.roomEncrypted}
-              participants={participatingMembers}
-              client={client}
-            />
-          </LeftNav>
-          <RightNav>
-            {onShareClick !== null && <ShareButton onClick={onShareClick} />}
-          </RightNav>
-        </Header>
-      )}
-      <div className={styles.joinRoom}>
-        <div className={styles.joinRoomContent}>
-          <VideoPreview matrixInfo={matrixInfo} muteStates={muteStates} />
-          <Trans>
+    <>
+      <div className={classNames(styles.room, inCallStyles.inRoom)}>
+        {!hideHeader && (
+          <Header>
+            <LeftNav>
+              <RoomHeaderInfo
+                id={matrixInfo.roomId}
+                name={matrixInfo.roomName}
+                avatarUrl={matrixInfo.roomAvatar}
+                encrypted={matrixInfo.roomEncrypted}
+                participants={participatingMembers}
+                client={client}
+              />
+            </LeftNav>
+            <RightNav>
+              {onShareClick !== null && <ShareButton onClick={onShareClick} />}
+            </RightNav>
+          </Header>
+        )}
+        <div className={styles.content}>
+          <VideoPreview matrixInfo={matrixInfo} muteStates={muteStates}>
             <Button
-              ref={joinCallButtonRef}
-              className={styles.copyButton}
+              className={styles.join}
               size="lg"
-              onPress={() => onEnter()}
+              onClick={onEnter}
               data-testid="lobby_joinCall"
             >
-              Join call now
+              {t("Join call")}
             </Button>
-            <Body>Or</Body>
-            <CopyButton
-              variant="secondaryCopy"
-              value={getRoomUrl(matrixInfo.roomId, roomSharedKey ?? undefined)}
-              className={styles.copyButton}
-              copiedMessage={t("Call link copied")}
-              data-testid="lobby_inviteLink"
-            >
-              Copy call link and join later
-            </CopyButton>
-          </Trans>
+          </VideoPreview>
+          {!recentsButtonInFooter && recentsButton}
+        </div>
+        <div className={inCallStyles.footer}>
+          {recentsButtonInFooter && recentsButton}
+          <div className={inCallStyles.buttons}>
+            <VideoButton
+              muted={!muteStates.video.enabled}
+              onPress={onVideoPress}
+              disabled={muteStates.video.setEnabled === null}
+            />
+            <MicButton
+              muted={!muteStates.audio.enabled}
+              onPress={onAudioPress}
+              disabled={muteStates.audio.setEnabled === null}
+            />
+            <SettingsButton onPress={openSettings} />
+            {!confineToRoom && <HangupButton onPress={onLeaveClick} />}
+          </div>
         </div>
-        {!isEmbedded && (
-          <Body className={styles.joinRoomFooter}>
-            <Link color="primary" to="/">
-              {t("Take me Home")}
-            </Link>
-          </Body>
-        )}
       </div>
-    </div>
+      {client && (
+        <SettingsModal
+          client={client}
+          open={settingsModalOpen}
+          onDismiss={closeSettings}
+        />
+      )}
+    </>
   );
 };

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>
   );
 };

src/room/RoomPage.tsx

@@ -14,7 +14,7 @@ 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 { useClientLegacy } from "../ClientContext";
@@ -22,22 +22,19 @@ import { ErrorView, LoadingView } from "../FullScreenView";
 import { RoomAuthView } from "./RoomAuthView";
 import { GroupCallLoader } from "./GroupCallLoader";
 import { GroupCallView } from "./GroupCallView";
-import { useUrlParams } from "../UrlParams";
+import { useRoomIdentifier, 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 {
-    roomAlias,
-    roomId,
-    viaServers,
-    isEmbedded,
-    preload,
-    hideHeader,
-    isPtt,
-    displayName,
-  } = useUrlParams();
+  const { confineToRoom, appPrompt, preload, hideHeader, displayName } =
+    useUrlParams();
+
+  const { roomAlias, roomId, viaServers } = useRoomIdentifier();
+
   const roomIdOrAlias = roomId ?? roomAlias;
   if (!roomIdOrAlias) {
     console.error("No room specified");
@@ -78,38 +75,43 @@ export const RoomPage: FC = () => {
         client={client!}
         rtcSession={rtcSession}
         isPasswordlessUser={passwordlessUser}
-        isEmbedded={isEmbedded}
+        confineToRoom={confineToRoom}
         preload={preload}
         hideHeader={hideHeader}
       />
     ),
-    [client, passwordlessUser, isEmbedded, preload, hideHeader]
+    [client, passwordlessUser, confineToRoom, 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 Android and iOS, show a prompt to launch the mobile app. */}
+      {appPrompt && (platform === "android" || platform === "ios") && (
+        <AppSelectionModal roomId={roomId} />
+      )}
+    </>
   );
 };

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%;
 }

src/room/ShareModal.tsx

@@ -16,36 +16,36 @@ limitations under the License.
 
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
+import { Room } from "matrix-js-sdk";
 
-import { Modal, ModalContent, ModalProps } from "../Modal";
+import { Modal } from "../Modal";
 import { CopyButton } from "../button";
-import { getRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl } from "../matrix-utils";
 import styles from "./ShareModal.module.css";
 import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
 
-interface Props extends Omit<ModalProps, "title" | "children"> {
-  roomId: string;
+interface Props {
+  room: Room;
+  open: boolean;
+  onDismiss: () => void;
 }
 
-export const ShareModal: FC<Props> = ({ roomId, ...rest }) => {
+export const ShareModal: FC<Props> = ({ room, open, onDismiss }) => {
   const { t } = useTranslation();
-  const roomSharedKey = useRoomSharedKey(roomId);
+  const roomSharedKey = useRoomSharedKey(room.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={getAbsoluteRoomUrl(
+          room.roomId,
+          room.name,
+          roomSharedKey ?? undefined
+        )}
+        data-testid="modal_inviteLink"
+      />
     </Modal>
   );
 };

src/room/VideoPreview.module.css

@@ -15,21 +15,29 @@ limitations under the License.
 */
 
 .preview {
-  position: relative;
-  min-height: 280px;
-  height: 50vh;
-  border-radius: 24px;
-  overflow: hidden;
-  background-color: var(--stopgap-bgColor3);
-  margin: 20px;
+  margin-inline: var(--inline-content-inset);
+  min-block-size: 0;
+  block-size: 50vh;
 }
 
-.preview video {
+.preview.content {
+  margin-inline: 0;
+}
+
+.content {
+  position: relative;
+  block-size: 100%;
+  inline-size: 100%;
+  overflow: hidden;
+}
+
+.content video {
   width: 100%;
   height: 100%;
-  object-fit: contain;
+  object-fit: cover;
   background-color: black;
   transform: scaleX(-1);
+  background-color: var(--cpd-color-bg-subtle-primary);
 }
 
 .avatarContainer {
@@ -41,40 +49,32 @@ limitations under the License.
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--stopgap-bgColor3);
+  background-color: var(--cpd-color-bg-subtle-secondary);
 }
 
-.cameraPermissions {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  margin: 0;
-  text-align: center;
-}
-
-.previewButtons {
+.buttonBar {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  height: 66px;
+  height: calc(30 * var(--cpd-space-1x));
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--stopgap-background-85);
+  gap: var(--cpd-space-4x);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    var(--cpd-color-bg-canvas-default) 100%
+  );
 }
 
-.previewButtons > * {
-  margin-right: 30px;
+.preview.content .buttonBar {
+  padding-inline: var(--inline-content-inset);
 }
 
-.previewButtons > :last-child {
-  margin-right: 0px;
-}
-
-@media (min-width: 800px) {
-  .preview {
-    margin-top: 40px;
+@media (min-aspect-ratio: 1 / 1) {
+  .preview video {
+    aspect-ratio: 16 / 9;
   }
 }

src/room/VideoPreview.tsx

@@ -14,25 +14,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useEffect, useCallback, useMemo, useRef, FC } from "react";
+import { useEffect, useMemo, useRef, FC, ReactNode } 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,
   LocalVideoTrack,
   Track,
 } from "livekit-client";
+import classNames from "classnames";
 
-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";
 import { MuteStates } from "./MuteStates";
+import { Glass } from "../Glass";
+import { useMediaQuery } from "../useMediaQuery";
 
 export type MatrixInfo = {
   userId: string;
@@ -48,27 +46,16 @@ export type MatrixInfo = {
 interface Props {
   matrixInfo: MatrixInfo;
   muteStates: MuteStates;
+  children: ReactNode;
 }
 
-export const VideoPreview: FC<Props> = ({ matrixInfo, muteStates }) => {
-  const { client } = useClient();
+export const VideoPreview: FC<Props> = ({
+  matrixInfo,
+  muteStates,
+  children,
+}) => {
   const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
 
-  const {
-    modalState: settingsModalState,
-    modalProps: settingsModalProps,
-  }: {
-    modalState: OverlayTriggerState;
-    modalProps: {
-      isOpen: boolean;
-      onClose: () => void;
-    };
-  } = useModalTriggerState();
-
-  const openSettings = useCallback(() => {
-    settingsModalState.open();
-  }, [settingsModalState]);
-
   const devices = useMediaDevices();
 
   // Capture the audio options as they were when we first mounted, because
@@ -116,54 +103,35 @@ export const VideoPreview: FC<Props> = ({ matrixInfo, muteStates }) => {
     };
   }, [videoTrack]);
 
-  const onAudioPress = useCallback(
-    () => muteStates.audio.setEnabled?.((e) => !e),
-    [muteStates]
-  );
-  const onVideoPress = useCallback(
-    () => muteStates.video.setEnabled?.((e) => !e),
-    [muteStates]
+  const content = (
+    <>
+      <video data-testid="preview_video" ref={videoEl} muted playsInline disablePictureInPicture />
+      {!muteStates.video.enabled && (
+        <div className={styles.avatarContainer}>
+          <Avatar
+            id={matrixInfo.userId}
+            name={matrixInfo.displayName}
+            size={Math.min(previewBounds.width, previewBounds.height) / 2}
+            src={matrixInfo.avatarUrl}
+          />
+        </div>
+      )}
+      <div className={styles.buttonBar}>{children}</div>
+    </>
   );
 
-  return (
-    <div className={styles.preview} ref={previewRef}>
-      <video
-        data-testid="preview_video"
-        ref={videoEl}
-        muted
-        playsInline
-        disablePictureInPicture
-      />
-      <>
-        {!muteStates.video.enabled && (
-          <div className={styles.avatarContainer}>
-            <Avatar
-              id={matrixInfo.userId}
-              name={matrixInfo.displayName}
-              size={(previewBounds.height - 66) / 2}
-              src={matrixInfo.avatarUrl}
-            />
-          </div>
-        )}
-        <div className={styles.previewButtons}>
-          <VideoButton
-            muted={!muteStates.video.enabled}
-            onPress={onVideoPress}
-            disabled={muteStates.video.setEnabled === null}
-            data-testid="preview_videomute"
-          />
-          <MicButton
-            muted={!muteStates.audio.enabled}
-            onPress={onAudioPress}
-            disabled={muteStates.audio.setEnabled === null}
-            data-testid="preview_mute"
-          />
-          <SettingsButton onPress={openSettings} />
-        </div>
-      </>
-      {settingsModalState.isOpen && client && (
-        <SettingsModal client={client} {...settingsModalProps} />
-      )}
+  return useMediaQuery("(max-width: 550px)") ? (
+    <div
+      className={classNames(styles.preview, styles.content)}
+      ref={previewRef}
+    >
+      {content}
     </div>
+  ) : (
+    <Glass className={styles.preview}>
+      <div className={styles.content} ref={previewRef}>
+        {content}
+      </div>
+    </Glass>
   );
 };

src/room/useLoadGroupCall.ts

@@ -20,14 +20,10 @@ 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 { useEnableE2EE } from "../settings/useSetting";
-import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
 
 export type GroupCallLoaded = {
   kind: "loaded";
@@ -56,8 +52,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" });
@@ -66,59 +61,42 @@ export const useLoadGroupCall = (
 
   useEffect(() => {
     const fetchOrCreateRoom = async (): Promise<Room> => {
-      try {
+      let room: Room | null = null;
+      if (roomIdOrAlias[0] === "#") {
         // We lowercase the localpart when we create the room, so we must lowercase
         // it here too (we just do the whole alias). We can't do the same to room IDs
         // though.
-        const sanitisedIdOrAlias =
-          roomIdOrAlias[0] === "#"
-            ? roomIdOrAlias.toLowerCase()
-            : roomIdOrAlias;
-
-        const room = await client.joinRoom(sanitisedIdOrAlias, {
-          viaServers,
-        });
-        logger.info(
-          `Joined ${sanitisedIdOrAlias}, waiting room to be ready for group calls`
+        // Also, we explicitly look up the room alias here. We previously just tried to
+        // join anyway but the js-sdk recreates the room if you pass the alias for a
+        // room you're already joined to (which it probably ought not to).
+        const lookupResult = await client.getRoomIdForAlias(
+          roomIdOrAlias.toLowerCase()
         );
-        await client.waitUntilRoomReadyForGroupCalls(room.roomId);
-        logger.info(`${sanitisedIdOrAlias}, is ready for group calls`);
-        return room;
-      } catch (error) {
-        if (
-          isLocalRoomId(roomIdOrAlias, client) &&
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          (error.errcode === "M_NOT_FOUND" ||
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            (error.message &&
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              error.message.indexOf("Failed to fetch alias") !== -1))
-        ) {
-          // The room doesn't exist, but we can create it
-          const [, roomId] = await createRoom(
-            client,
-            roomNameFromRoomId(roomIdOrAlias),
-            createPtt,
-            e2eeEnabled ?? false
-          );
-
-          if (e2eeEnabled) {
-            setLocalStorageItem(
-              getRoomSharedKeyLocalStorageKey(roomId),
-              randomString(32)
-            );
-          }
-
-          // likewise, wait for the room
-          await client.waitUntilRoomReadyForGroupCalls(roomId);
-          return client.getRoom(roomId)!;
+        logger.info(`${roomIdOrAlias} resolved to ${lookupResult.room_id}`);
+        room = client.getRoom(lookupResult.room_id);
+        if (!room) {
+          logger.info(`Room ${lookupResult.room_id} not found, joining.`);
+          room = await client.joinRoom(lookupResult.room_id, {
+            viaServers: lookupResult.servers,
+          });
         } else {
-          throw error;
+          logger.info(
+            `Already in room ${lookupResult.room_id}, not rejoining.`
+          );
         }
+      } else {
+        // room IDs we just try to join by their ID, which will not work in the
+        // general case without providing some servers to join via. We could provide
+        // our own server, but in practice that is implicit.
+        room = await client.joinRoom(roomIdOrAlias);
       }
+
+      logger.info(
+        `Joined ${roomIdOrAlias}, waiting room to be ready for group calls`
+      );
+      await client.waitUntilRoomReadyForGroupCalls(room.roomId);
+      logger.info(`${roomIdOrAlias}, is ready for group calls`);
+      return room;
     };
 
     const fetchOrCreateGroupCall = async (): Promise<MatrixRTCSession> => {
@@ -151,7 +129,7 @@ export const useLoadGroupCall = (
       .then(fetchOrCreateGroupCall)
       .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;
 };

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

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

src/settings/SettingsModal.tsx

@@ -35,6 +35,7 @@ import {
   useDeveloperSettingsTab,
   useShowConnectionStats,
   useEnableE2EE,
+  isFirefox,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
@@ -43,26 +44,24 @@ import { Body, Caption } from "../typography/Typography";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { ProfileSettingsTab } from "./ProfileSettingsTab";
 import { FeedbackSettingsTab } from "./FeedbackSettingsTab";
-import { useUrlParams } from "../UrlParams";
 import {
   useMediaDevices,
   MediaDevice,
   useMediaDeviceNames,
 } from "../livekit/MediaDevicesContext";
+import { widget } from "../widget";
 
 interface Props {
-  isOpen: boolean;
+  open: boolean;
+  onDismiss: () => void;
   client: MatrixClient;
   roomId?: string;
   defaultTab?: string;
-  onClose: () => void;
 }
 
 export const SettingsModal = (props: Props) => {
   const { t } = useTranslation();
 
-  const { isEmbedded } = useUrlParams();
-
   const [showInspector, setShowInspector] = useShowInspector();
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const [developerSettingsTab, setDeveloperSettingsTab] =
@@ -119,7 +118,7 @@ export const SettingsModal = (props: Props) => {
   );
 
   const devices = useMediaDevices();
-  useMediaDeviceNames(devices);
+  useMediaDeviceNames(devices, props.open);
 
   const audioTab = (
     <TabItem
@@ -132,7 +131,8 @@ export const SettingsModal = (props: Props) => {
       }
     >
       {generateDeviceSelection(devices.audioInput, t("Microphone"))}
-      {generateDeviceSelection(devices.audioOutput, t("Speaker"))}
+      {!isFirefox() &&
+        generateDeviceSelection(devices.audioOutput, t("Speaker"))}
     </TabItem>
   );
 
@@ -282,17 +282,16 @@ export const SettingsModal = (props: Props) => {
   );
 
   const tabs = [audioTab, videoTab];
-  if (!isEmbedded) tabs.push(profileTab);
+  if (widget === null) tabs.push(profileTab);
   tabs.push(feedbackTab, moreTab);
   if (developerSettingsTab) tabs.push(developerTab);
 
   return (
     <Modal
       title={t("Settings")}
-      isDismissable
-      mobileFullScreen
       className={styles.settingsModal}
-      {...props}
+      open={props.open}
+      onDismiss={props.onDismiss}
     >
       <TabContainer
         onSelectionChange={onSelectedTabChanged}

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,
   };
 }

src/settings/useSetting.ts

@@ -58,8 +58,12 @@ export const getSetting = <T>(name: string, defaultValue: T): T => {
 export const setSetting = <T>(name: string, newValue: T) =>
   setLocalStorageItem(getSettingKey(name), JSON.stringify(newValue));
 
-const canEnableSpatialAudio = () => {
+export const isFirefox = () => {
   const { userAgent } = navigator;
+  return userAgent.includes("Firefox");
+};
+
+const canEnableSpatialAudio = () => {
   // Spatial audio means routing audio through audio contexts. On Chrome,
   // this bypasses the AEC processor and so breaks echo cancellation.
   // We only allow spatial audio to be enabled on Firefox which we know
@@ -69,7 +73,7 @@ const canEnableSpatialAudio = () => {
   // widely enough, we can allow spatial audio everywhere. It's currently in a
   // chrome flag, so we could enable this in Electron if we enabled the chrome flag
   // in the Electron wrapper.
-  return userAgent.includes("Firefox");
+  return isFirefox();
 };
 
 export const useSpatialAudio = (): DisableableSetting<boolean> => {

src/tabs/Tabs.module.css

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .tabContainer {
+  min-height: 100%;
   display: flex;
-  flex: 1;
   flex-direction: column;
 }
 
@@ -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;
-  }
-}

src/video-grid/VideoTile.module.css

@@ -35,7 +35,7 @@ limitations under the License.
   width: 100%;
   height: 100%;
   object-fit: cover;
-  background-color: #444;
+  background-color: var(--cpd-color-bg-subtle-primary);
 }
 
 .videoTile.isLocal:not(.screenshare) video {

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";
@@ -36,7 +42,6 @@ import { Avatar } from "../Avatar";
 import styles from "./VideoTile.module.css";
 import { useReactiveState } from "../useReactiveState";
 import { AudioButton, FullscreenButton } from "../button/Button";
-import { useModalTriggerState } from "../Modal";
 import { VideoTileSettingsModal } from "./VideoTileSettingsModal";
 
 export interface ItemData {
@@ -117,11 +122,16 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
       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) {
@@ -130,7 +140,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
           key="localVolume"
           className={styles.button}
           volume={(sfuParticipant as RemoteParticipant).getVolume() ?? 0}
-          onPress={onOptionsPress}
+          onPress={openVideoTileSettingsModal}
         />
       );
 
@@ -167,19 +177,20 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
         {toolbarButtons.length > 0 && (!maximised || fullscreen) && (
           <div className={classNames(styles.toolbar)}>{toolbarButtons}</div>
         )}
-        {content === TileContent.UserMedia && !sfuParticipant.isCameraEnabled && (
-          <>
-            <div className={styles.videoMutedOverlay} />
-            <Avatar
-              key={member?.userId}
-              id={member?.userId ?? displayName}
-              name={displayName}
-              size={Math.round(Math.min(targetWidth, targetHeight) / 2)}
-              src={member?.getMxcAvatarUrl()}
-              className={styles.avatar}
-            />
-          </>
-        )}
+        {content === TileContent.UserMedia &&
+          !sfuParticipant.isCameraEnabled && (
+            <>
+              <div className={styles.videoMutedOverlay} />
+              <Avatar
+                key={member?.userId}
+                id={member?.userId ?? displayName}
+                name={displayName}
+                size={Math.round(Math.min(targetWidth, targetHeight) / 2)}
+                src={member?.getMxcAvatarUrl()}
+                className={styles.avatar}
+              />
+            </>
+          )}
         {content === TileContent.ScreenShare ? (
           <div className={styles.presenterLabel}>
             <span>{t("{{displayName}} is presenting", { displayName })}</span>
@@ -210,10 +221,11 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
               : Track.Source.ScreenShare
           }
         />
-        {videoTileSettingsModalState.isOpen && !maximised && (
+        {!maximised && (
           <VideoTileSettingsModal
-            {...videoTileSettingsModalProps}
             data={data}
+            open={videoTileSettingsModalOpen}
+            onDismiss={closeVideoTileSettingsModal}
           />
         )}
       </animated.div>

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

src/widget.ts

@@ -109,7 +109,7 @@ export const widget: WidgetHelpers | null = (() => {
         baseUrl,
         e2eEnabled,
         allowIceFallback,
-      } = getUrlParams(true);
+      } = getUrlParams();
       if (!roomId) throw new Error("Room ID must be supplied");
       if (!userId) throw new Error("User ID must be supplied");
       if (!deviceId) throw new Error("Device ID must be supplied");

test/UrlParams-test.ts

@@ -15,7 +15,8 @@ limitations under the License.
 */
 
 import { mocked } from "jest-mock";
-import { getUrlParams } from "../src/UrlParams";
+
+import { getRoomIdentifierFromUrl } from "../src/UrlParams";
 import { Config } from "../src/config/Config";
 
 const ROOM_NAME = "roomNameHere";
@@ -32,27 +33,28 @@ describe("UrlParams", () => {
 
   describe("handles URL with /room/", () => {
     it("and nothing else", () => {
-      expect(getUrlParams(false, "", `/room/${ROOM_NAME}`, "").roomAlias).toBe(
-        `#${ROOM_NAME}:${HOMESERVER}`
-      );
+      expect(
+        getRoomIdentifierFromUrl(`/room/${ROOM_NAME}`, "", "").roomAlias
+      ).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
     });
 
     it("and #", () => {
       expect(
-        getUrlParams(false, "", `${ORIGIN}/room/`, `#${ROOM_NAME}`).roomAlias
+        getRoomIdentifierFromUrl("", `${ORIGIN}/room/`, `#${ROOM_NAME}`)
+          .roomAlias
       ).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
     });
 
     it("and # and server part", () => {
       expect(
-        getUrlParams(false, "", `/room/`, `#${ROOM_NAME}:${HOMESERVER}`)
+        getRoomIdentifierFromUrl("", `/room/`, `#${ROOM_NAME}:${HOMESERVER}`)
           .roomAlias
       ).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
     });
 
     it("and server part", () => {
       expect(
-        getUrlParams(false, "", `/room/${ROOM_NAME}:${HOMESERVER}`, "")
+        getRoomIdentifierFromUrl(`/room/${ROOM_NAME}:${HOMESERVER}`, "", "")
           .roomAlias
       ).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
     });
@@ -60,39 +62,44 @@ describe("UrlParams", () => {
 
   describe("handles URL without /room/", () => {
     it("and nothing else", () => {
-      expect(getUrlParams(false, "", `/${ROOM_NAME}`, "").roomAlias).toBe(
+      expect(getRoomIdentifierFromUrl(`/${ROOM_NAME}`, "", "").roomAlias).toBe(
         `#${ROOM_NAME}:${HOMESERVER}`
       );
     });
 
     it("and with #", () => {
-      expect(getUrlParams(false, "", "", `#${ROOM_NAME}`).roomAlias).toBe(
+      expect(getRoomIdentifierFromUrl("", "", `#${ROOM_NAME}`).roomAlias).toBe(
         `#${ROOM_NAME}:${HOMESERVER}`
       );
     });
 
     it("and with # and server part", () => {
       expect(
-        getUrlParams(false, "", "", `#${ROOM_NAME}:${HOMESERVER}`).roomAlias
+        getRoomIdentifierFromUrl("", "", `#${ROOM_NAME}:${HOMESERVER}`)
+          .roomAlias
       ).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
     });
 
     it("and with server part", () => {
       expect(
-        getUrlParams(false, "", `/${ROOM_NAME}:${HOMESERVER}`, "").roomAlias
+        getRoomIdentifierFromUrl(`/${ROOM_NAME}:${HOMESERVER}`, "", "")
+          .roomAlias
       ).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
     });
   });
 
   describe("handles search params", () => {
     it("(roomId)", () => {
-      expect(getUrlParams(true, `?roomId=${ROOM_ID}`).roomId).toBe(ROOM_ID);
+      expect(
+        getRoomIdentifierFromUrl("", `?roomId=${ROOM_ID}`, "").roomId
+      ).toBe(ROOM_ID);
     });
   });
 
   it("ignores room alias", () => {
     expect(
-      getUrlParams(true, "", `/room/${ROOM_NAME}:${HOMESERVER}`).roomAlias
+      getRoomIdentifierFromUrl("", `/room/${ROOM_NAME}:${HOMESERVER}`, "")
+        .roomAlias
     ).toBeFalsy();
   });
 });

vite.config.js

@@ -17,7 +17,7 @@ limitations under the License.
 import { defineConfig, loadEnv } from "vite";
 import svgrPlugin from "vite-plugin-svgr";
 import htmlTemplate from "vite-plugin-html-template";
-import sentryVitePlugin from "@sentry/vite-plugin";
+import { sentryVitePlugin } from "@sentry/vite-plugin";
 import react from "@vitejs/plugin-react";
 import basicSsl from "@vitejs/plugin-basic-ssl";