use body instead of root node

Signed-off-by: Timo K <toger5@hotmail.de>
Add a fullscreen button that uses the element request Fullscreen browser api
2026-08-29 21:15:19 +00:00 · 2025-08-08 15:37:55 +02:00 · 2025-08-08 14:47:39 +02:00 · 2025-08-07 15:16:41 +02:00 · 2025-08-06 14:54:24 +02:00 · 2025-08-06 14:22:10 +02:00
41 changed files with 1121 additions and 630 deletions
--- a/.github/workflows/changelog-label.yml
+++ b/.github/workflows/changelog-label.yml
@@ -9,6 +9,6 @@ jobs:
    steps:
      - uses: yogevbd/enforce-label-action@a3c219da6b8fa73f6ba62b68ff09c469b3a1c024 # 2.2.2
        with:
-          REQUIRED_LABELS_ANY: "PR-Bug-Fix,PR-Documentation,PR-Task,PR-Feature,PR-Improvement,PR-Developer-Experience,dependencies"
+          REQUIRED_LABELS_ANY: "PR-Bug-Fix,PR-Documentation,PR-Task,PR-Feature,PR-Improvement,PR-Developer-Experience,dependencies,PR-Breaking-Change"
          REQUIRED_LABELS_ANY_DESCRIPTION: "Select at least one 'PR-' label"
          BANNED_LABELS: "banned"
--- a/backend/dev_livekit.yaml
+++ b/backend/dev_livekit.yaml
@@ -21,3 +21,5 @@ turn:
  external_tls: true
 keys:
  devkey: secret
+room:
+  auto_create: false
--- a/dev-backend-docker-compose.yml
+++ b/dev-backend-docker-compose.yml
@@ -14,6 +14,7 @@ services:
      # If the configured homeserver runs on localhost, it'll probably be using
      # a self-signed certificate
      - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
+      - LIVEKIT_FULL_ACCESS_HOMESERVERS=*
    deploy:
      restart_policy:
        condition: on-failure
@@ -101,4 +102,6 @@ services:
    depends_on:
      - synapse
    networks:
-      - ecbackend
+      ecbackend:
+        aliases:
+          - matrix-rtc.m.localhost
--- a/docs/MSC4195_setup.drawio.png
+++ b/docs/MSC4195_setup.drawio.png
--- a/docs/self-hosting.md
+++ b/docs/self-hosting.md
@@ -145,10 +145,6 @@ server {
    {
        "type": "livekit",
        "livekit_service_url": "https://matrix-rtc-2.example.com/livekit/jwt"
-    },
-    {
-        "type": "nextgen_new_foci_type",
-        "props_for_nextgen_foci": "val"
    }
 ]
 ```
--- a/docs/url-params.md
+++ b/docs/url-params.md
@@ -48,6 +48,7 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st

 | Name                                                    | Values                                                                                               | Required for widget                                                                               | Required for SPA             | Description                                                                                                                                                                                                                                                                                                                                                                                         |
 | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `intent`                                                | `start_call`, `join_existing`, `start_call_dm`, `join_existing_dm.                                   | No, defaults to `start_call`                                                                      | No, defaults to `start_call` | The intent is a special url parameter that defines the defaults for all the other parameters. In most cases it should be enough to only set the intent to setup element-call.                                                                                                                                                                                                                       |
 | `allowIceFallback`                                      | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Allows use of fallback STUN servers for ICE if the user's homeserver doesn’t provide any.                                                                                                                                                                                                                                                                                                           |
 | `analyticsID` (deprecated: use `posthogUserId` instead) | Posthog analytics ID                                                                                 | No                                                                                                | No                           | Available only with user's consent for sharing telemetry in Element Web.                                                                                                                                                                                                                                                                                                                            |
 | `appPrompt`                                             | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Prompts the user to launch the native mobile app upon entering a room, applicable only on Android and iOS, and must be enabled in config.                                                                                                                                                                                                                                                           |
@@ -59,7 +60,6 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `header`                                                | `none`, `standard` or `app_bar`                                                                      | No, defaults to `standard`                                                                        | No, defaults to `standard`   | The style of headers to show. `standard` is the default arrangement, `none` hides the header entirely, and `app_bar` produces a header with a back button like you might see in mobile apps. The callback for the back button is `window.controls.onBackButtonPressed`.                                                                                                                             |
 | `hideScreensharing`                                     | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Hides the screen-sharing button.                                                                                                                                                                                                                                                                                                                                                                    |
 | `homeserver`                                            |                                                                                                      | Not applicable                                                                                    | No                           | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link.                                                                                                                                                                                                                                                                                   |
-| `intent`                                                | `start_call` or `join_existing`                                                                      | No, defaults to `start_call`                                                                      | No, defaults to `start_call` | The intent of the user with respect to the call. e.g. if they clicked a Start Call button, this would be `start_call`. If it was a Join Call button, it would be `join_existing`.                                                                                                                                                                                                                   |
 | `lang`                                                  | [BCP 47](https://www.rfc-editor.org/info/bcp47) code                                                 | No                                                                                                | No                           | The language the app should use.                                                                                                                                                                                                                                                                                                                                                                    |
 | `password`                                              |                                                                                                      | No                                                                                                | No                           | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)                                                                                                                                                                                                                                                                                       |
 | `perParticipantE2EE`                                    | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Enables per participant encryption with Keys exchanged over encrypted matrix room messages.                                                                                                                                                                                                                                                                                                         |
--- a/embedded/android/gradle/libs.versions.toml
+++ b/embedded/android/gradle/libs.versions.toml
@@ -2,11 +2,11 @@
 # https://docs.gradle.org/current/userguide/platforms.html#sub::toml-dependencies-format

 [versions]
-android_gradle_plugin = "8.11.0"
+android_gradle_plugin = "8.11.1"

 [libraries]
 android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref = "android_gradle_plugin" }

 [plugins]
 android_library = { id = "com.android.library", version.ref = "android_gradle_plugin" }
-maven_publish = { id = "com.vanniktech.maven.publish", version = "0.33.0" }
+maven_publish = { id = "com.vanniktech.maven.publish", version = "0.34.0" }
--- a/embedded/android/gradle/wrapper/gradle-wrapper.properties
+++ b/embedded/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
--- a/embedded/android/lib/build.gradle.kts
+++ b/embedded/android/lib/build.gradle.kts
@@ -5,8 +5,6 @@
 * Please see LICENSE files in the repository root for full details.
 */

-import com.vanniktech.maven.publish.SonatypeHost
-
 plugins {
    alias(libs.plugins.android.library)
    alias(libs.plugins.maven.publish)
@@ -27,7 +25,7 @@ android {
 }

 mavenPublishing {
-    publishToMavenCentral(SonatypeHost.CENTRAL_PORTAL, automaticRelease = true)
+    publishToMavenCentral(automaticRelease = true)

    signAllPublications()

--- a/locales/cs/app.json
+++ b/locales/cs/app.json
@@ -61,6 +61,7 @@
    "video": "Video"
  },
  "developer_mode": {
+    "always_show_iphone_earpiece": "Zobrazit možnost sluchátek pro iPhone na všech platformách",
    "crypto_version": "Kryptografická verze: {{version}}",
    "debug_tile_layout_label": "Ladění rozložení dlaždic",
    "device_id": "ID zařízení: {{id}}",
@@ -173,6 +174,7 @@
    "devices": {
      "camera": "Fotoaparát",
      "camera_numbered": "Fotoaparát {{n}}",
+      "change_device_button": "Změnit zvukové zařízení",
      "default": "Výchozí",
      "default_named": "Výchozí <2> ({{name}}) </2>",
      "microphone": "Mikrofon",
--- a/locales/da/app.json
+++ b/locales/da/app.json
@@ -61,6 +61,7 @@
    "video": "Video"
  },
  "developer_mode": {
+    "always_show_iphone_earpiece": "Vis mulighed for iPhone-høretelefon på alle platforme",
    "crypto_version": "Krypto-version: {{version}}",
    "debug_tile_layout_label": "Fejlfinding af fliselayout",
    "device_id": "Enheds-id: {{id}}",
@@ -70,6 +71,7 @@
    "livekit_server_info": "LiveKit Serverinfo",
    "livekit_sfu": "LiveKit SFU: {{url}}",
    "matrix_id": "Matrix ID: {{id}}",
+    "mute_all_audio": "Slå al lyd fra (deltagere, reaktioner, deltagelseslyde)",
    "show_connection_stats": "Vis forbindelsesstatistik",
    "show_non_member_tiles": "Vis fliser for medier fra ikke-medlemmer",
    "url_params": "URL-parametre",
@@ -80,7 +82,7 @@
  "error": {
    "call_is_not_supported": "Opkald er ikke understøttet",
    "call_not_found": "Opkald ikke fundet",
-    "call_not_found_description": "<0>Det link ser ikke ud til at høre til et eksisterende opkald. Tjek at du har det rigtige link, eller<1> opret et nyt</1>.</0>",
+    "call_not_found_description": "<0>Det link ser ikke ud til at høre til et eksisterende opkald. Tjek at du har det rigtige link, eller <2> opret et nyt</2>.</0>",
    "connection_lost": "Forbindelsen gik tabt",
    "connection_lost_description": "Du blev afbrudt fra opkaldet.",
    "e2ee_unsupported": "Inkompatibel browser",
@@ -164,12 +166,17 @@
      "effect_volume_description": "Juster den lydstyrke som reaktioner og håndsoprækninger afspilles med.",
      "effect_volume_label": "Lydstyrke for lydeffekter"
    },
+    "background_blur_header": "Baggrund",
+    "background_blur_label": "Gør videoens baggrund sløret",
+    "blur_not_supported_by_browser": "(Baggrundssløring understøttes ikke af denne enhed.)",
    "developer_tab_title": "Udvikler",
    "devices": {
      "camera": "Kamera",
      "camera_numbered": "Kamera {{n}}",
+      "change_device_button": "Skift lydenhed",
      "default": "Standard",
      "default_named": "Standard <2>({{name}})</2>",
+      "loudspeaker": "Højttaler",
      "microphone": "Mikrofon",
      "microphone_numbered": "Mikrofon {{n}}",
      "speaker": "Højttaler",
--- a/locales/de/app.json
+++ b/locales/de/app.json
@@ -82,7 +82,7 @@
  "error": {
    "call_is_not_supported": "Anrufe werden nicht unterstützt",
    "call_not_found": "Anruf nicht gefunden",
-    "call_not_found_description": "<0>Dieser Link scheint zu keinem bestehenden Anruf zu gehören. Vergewissern Sie sich, dass Sie den richtigen Link haben, oder <1> erstellen Sie einen neuen</1>. </0>",
+    "call_not_found_description": "<0>Dieser Link scheint zu keinem bestehenden Anruf zu gehören. Es sollte geprüft werden, ob der Link korrekt ist, oder <2>ein neuer erstellt werden</2>.</0>",
    "connection_lost": "Verbindung verloren",
    "connection_lost_description": "Ihre Verbindung zum Anruf wurde unterbrochen.",
    "e2ee_unsupported": "Inkompatibler Browser",
@@ -94,6 +94,8 @@
    "matrix_rtc_focus_missing": "Der Server ist nicht für die Verwendung mit {{brand}} konfiguriert. Bitte den Serveradministrator kontaktieren (Domain: {{domain}}, Fehlercode: {{ errorCode }}).",
    "open_elsewhere": "In einem anderen Tab geöffnet",
    "open_elsewhere_description": "{{brand}} wurde in einem anderen Tab geöffnet. Wenn das nicht richtig klingt, versuchen Sie, die Seite neu zu laden.",
+    "room_creation_restricted": "Anruf konnte nicht erstellt werden",
+    "room_creation_restricted_description": "Das Erstellen von Anrufen ist nur für autorisierte Nutzer möglich. Versuche es später erneut oder kontaktiere deinen Serveradministrator, falls das Problem weiterhin besteht.",
    "unexpected_ec_error": "Ein unerwarteter Fehler ist aufgetreten (<0>Fehlercode: </0> <1>{{ errorCode }}</1>). Bitte den Serveradministrator kontaktieren."
  },
  "group_call_loader": {
@@ -105,6 +107,11 @@
    "knock_reject_heading": "Zugriff verweigert",
    "reason": "Grund: {{reason}}"
  },
+  "handset": {
+    "overlay_back_button": "Zurück zum Lautsprechermodus",
+    "overlay_description": "Nur wenn App im Vordergrund nutzbar",
+    "overlay_title": "Ohrhörer Modus"
+  },
  "hangup_button_label": "Anruf beenden",
  "header_label": "Element Call-Startseite",
  "header_participants_label": "Teilnehmende",
@@ -173,9 +180,11 @@
    "devices": {
      "camera": "Kamera",
      "camera_numbered": "Kamera {{n}}",
+      "change_device_button": "Audiogerät wechseln",
      "default": "Standard",
      "default_named": "Standard<2> ({{name}} )</2>",
      "handset": "Ohrhörer",
+      "loudspeaker": "Lautsprecher",
      "microphone": "Mikrofon",
      "microphone_numbered": "Mikrofon{{n}}",
      "speaker": "Lautsprecher",
--- a/locales/en/app.json
+++ b/locales/en/app.json
@@ -94,6 +94,8 @@
    "matrix_rtc_focus_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",
    "open_elsewhere": "Opened in another tab",
    "open_elsewhere_description": "{{brand}} has been opened in another tab. If that doesn't sound right, try reloading the page.",
+    "room_creation_restricted": "Failed to create call",
+    "room_creation_restricted_description": "Call creation might be restricted to authorized users only. Try again later, or contact your server admin if the problem persists.",
    "unexpected_ec_error": "An unexpected error occurred (<0>Error Code:</0> <1>{{ errorCode }}</1>). Please contact your server admin."
  },
  "group_call_loader": {
--- a/locales/et/app.json
+++ b/locales/et/app.json
@@ -61,6 +61,7 @@
    "video": "Video"
  },
  "developer_mode": {
+    "always_show_iphone_earpiece": "Näita iPhone'i kuulari valikut kõikidel platvormidel",
    "crypto_version": "Krüptoteekide versioon: {{version}}",
    "debug_tile_layout_label": "Meediapaanide paigutus",
    "device_id": "Seadme tunnus: {{id}}",
@@ -81,7 +82,7 @@
  "error": {
    "call_is_not_supported": "Kõne pole toetatud",
    "call_not_found": "Kõnet ei leidu",
-    "call_not_found_description": "<0>See link ei tundu olema seotud ühegi olemasoleva kõnega. Kontrolli, et sul on õige link või <1>loo uus</1>.</0>",
+    "call_not_found_description": "<0>See link ei tundu olema seotud ühegi olemasoleva kõnega. Kontrolli, et sul on õige link või <2>loo uus</2>.</0>",
    "connection_lost": "Ühendus on katkenud",
    "connection_lost_description": "Sinu ühendus selle kõnega on katkenud.",
    "e2ee_unsupported": "Mitteühilduv brauser",
@@ -93,6 +94,8 @@
    "matrix_rtc_focus_missing": "See server pole seadistatud töötama rakendusega {{brand}}. Palun võta ühendust serveri halduriga (domeen: {{domain}}, veakood: {{ errorCode }}).",
    "open_elsewhere": "Avatud teisel vahekaardil",
    "open_elsewhere_description": "{{brand}} on avatud teisel vahekaardil. Kui see ei tundu olema õige, proovi selle lehe uuesti laadimist.",
+    "room_creation_restricted": "Kõne loomine ei õnnestunud",
+    "room_creation_restricted_description": "Kõne loomine võib olla lubatud ainult volitatud kasutajatele. Proovi hiljem uuesti või probleemi püsimisel võta ühendust oma serveri haldajaga.",
    "unexpected_ec_error": "Tekkis ootamatu viga (<0>Veakood:</0> <1>{{ errorCode }}</1>). Palun võta ühendust serveri haldajaga."
  },
  "group_call_loader": {
@@ -104,6 +107,10 @@
    "knock_reject_heading": "Liitumine pole lubatud",
    "reason": "Põhjus"
  },
+  "handset": {
+    "overlay_back_button": "Tagasi esineja vaatesse",
+    "overlay_description": "See toimib vaid rakenduse kasutamise ajal"
+  },
  "hangup_button_label": "Lõpeta kõne",
  "header_label": "Avaleht: Element Call",
  "header_participants_label": "Osalejad",
@@ -172,8 +179,10 @@
    "devices": {
      "camera": "Kaamera",
      "camera_numbered": "Kaamera {{n}}",
+      "change_device_button": "Muuda heliseadet",
      "default": "Vaikimisi",
      "default_named": "Vaikimisi <2>({{name}})</2>",
+      "loudspeaker": "Valjuhääldi",
      "microphone": "Mikrofon",
      "microphone_numbered": "Mikrofon {{n}}",
      "speaker": "Kõlar",
--- a/locales/ru/app.json
+++ b/locales/ru/app.json
@@ -61,6 +61,7 @@
    "video": "Видео"
  },
  "developer_mode": {
+    "always_show_iphone_earpiece": "Показать опцию наушников для iPhone на всех платформах",
    "crypto_version": "Версия криптографии: {{version}}",
    "debug_tile_layout_label": "Отладка расположения плиток",
    "device_id": "Идентификатор устройства: {{id}}",
@@ -70,6 +71,7 @@
    "livekit_server_info": "Информация о сервере LiveKit",
    "livekit_sfu": "LiveKit SFU: {{url}}",
    "matrix_id": "Matrix ID: {{id}}",
+    "mute_all_audio": "Отключить все звуки (участников, реакции, звуки присоединения)",
    "show_connection_stats": "Показать статистику подключений",
    "show_non_member_tiles": "Показать плитки для медиафайлов, не являющихся участниками",
    "url_params": "Параметры URL-адреса",
@@ -172,6 +174,7 @@
    "devices": {
      "camera": "Камера",
      "camera_numbered": "Камера {{n}}",
+      "change_device_button": "Изменить аудиоустройство",
      "default": "По умолчанию",
      "default_named": "По умолчанию <2>({{name}})</2>",
      "microphone": "Микрофон",
--- a/locales/sk/app.json
+++ b/locales/sk/app.json
@@ -61,6 +61,7 @@
    "video": "Video"
  },
  "developer_mode": {
+    "always_show_iphone_earpiece": "Zobraziť možnosť slúchadla iPhone na všetkých platformách",
    "crypto_version": "Krypto verzia: {{version}}",
    "debug_tile_layout_label": "Ladenie rozloženia dlaždíc",
    "device_id": "ID zariadenia: {{id}}",
@@ -81,7 +82,7 @@
  "error": {
    "call_is_not_supported": "Hovor nie je podporovaný",
    "call_not_found": "Hovor nebol nájdený",
-    "call_not_found_description": "<0>Zdá sa, že tento odkaz nepatrí k žiadnemu existujúcemu hovoru. Skontrolujte, či máte správny odkaz, alebo <1> vytvorte nový</1>. </0>",
+    "call_not_found_description": "<0>Zdá sa, že tento odkaz nepatrí k žiadnemu existujúcemu hovoru. Skontrolujte, či máte správny odkaz, alebo <2>vytvorte nový</2>.</0>",
    "connection_lost": "Strata spojenia",
    "connection_lost_description": "Boli ste odpojení od hovoru.",
    "e2ee_unsupported": "Nekompatibilný prehliadač",
@@ -173,8 +174,10 @@
    "devices": {
      "camera": "Kamera",
      "camera_numbered": "Kamera {{n}}",
+      "change_device_button": "Zmeniť zvukové zariadenie",
      "default": "Predvolené",
      "default_named": "Predvolené <2>({{name}})</2>",
+      "loudspeaker": "Reproduktor",
      "microphone": "Mikrofón",
      "microphone_numbered": "Mikrofón {{n}}",
      "speaker": "Reproduktor",
--- a/locales/sv/app.json
+++ b/locales/sv/app.json
@@ -61,6 +61,7 @@
    "video": "Video"
  },
  "developer_mode": {
+    "always_show_iphone_earpiece": "Visa iPhone-hörsnäckealternativ på alla plattformar",
    "crypto_version": "Kryptoversion: {{version}}",
    "debug_tile_layout_label": "Felsök panelarrangemang",
    "device_id": "Enhets-ID: {{id}}",
@@ -70,6 +71,7 @@
    "livekit_server_info": "LiveKit-serverinfo",
    "livekit_sfu": "LiveKit SFU: {{url}}",
    "matrix_id": "Matrix-ID: {{id}}",
+    "mute_all_audio": "Tysta allt ljud (deltagare, reaktioner, anslutningsljud)",
    "show_connection_stats": "Visa anslutningsstatistik",
    "show_non_member_tiles": "Visa paneler för media som inte är medlemmar",
    "url_params": "URL-parametrar",
@@ -164,10 +166,14 @@
      "effect_volume_description": "Justera volymen vid vilken reaktioner och handuppräckningseffekter spelas",
      "effect_volume_label": "Ljudeffektsvolym"
    },
+    "background_blur_header": "Bakgrund",
+    "background_blur_label": "Gör bakgrunden i videon suddig",
+    "blur_not_supported_by_browser": "(Bakgrundssuddighet stöds inte av den här enheten.)",
    "developer_tab_title": "Utvecklare",
    "devices": {
      "camera": "Kamera",
      "camera_numbered": "Kamera {{n}}",
+      "change_device_button": "Byt ljudenhet",
      "default": "Förval",
      "default_named": "Förval <2>({{name}})</2>",
      "microphone": "Mikrofon",
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
    "@mediapipe/tasks-vision": "^0.10.18",
    "@opentelemetry/api": "^1.4.0",
    "@opentelemetry/core": "^2.0.0",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.202.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.203.0",
    "@opentelemetry/resources": "^2.0.0",
    "@opentelemetry/sdk-trace-base": "^2.0.0",
    "@opentelemetry/sdk-trace-web": "^2.0.0",
@@ -81,7 +81,7 @@
    "@typescript-eslint/eslint-plugin": "^8.31.0",
    "@typescript-eslint/parser": "^8.31.0",
    "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^5.0.0",
+    "@vector-im/compound-design-tokens": "^6.0.0",
    "@vector-im/compound-web": "^8.0.0",
    "@vitejs/plugin-react": "^4.0.1",
    "@vitest/coverage-v8": "^3.0.0",
--- a/playwright/errors.spec.ts
+++ b/playwright/errors.spec.ts
@@ -72,3 +72,56 @@ test("Should automatically retry non fatal JWT errors", async ({
  await hasRetriedPromise;
  await expect(page.getByTestId("video").first()).toBeVisible();
 });
+
+test("Should show error screen if call creation is restricted", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  // We need the socket connection to fail, but this cannot be done by using the websocket route.
+  // Instead, we will trick the app by returning a bad URL for the SFU that will not be reachable an error out.
+  await page.route(
+    "**/matrix-rtc.m.localhost/livekit/jwt/sfu/get",
+    async (route) =>
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          url: "wss://badurltotricktest/livekit/sfu",
+          jwt: "FAKE",
+        }),
+      }),
+  );
+
+  // Then if the socket connection fails, livekit will try to validate the token!
+  // Livekit will not auto_create anymore and will return a 404 error.
+  await page.route(
+    "**/badurltotricktest/livekit/sfu/rtc/validate?**",
+    async (route) =>
+      await route.fulfill({
+        status: 404,
+        contentType: "text/plain",
+        body: "requested room does not exist",
+      }),
+  );
+
+  await page.pause();
+
+  await page.getByTestId("home_callName").click();
+  await page.getByTestId("home_callName").fill("HelloCall");
+  await page.getByTestId("home_displayName").click();
+  await page.getByTestId("home_displayName").fill("John Doe");
+  await page.getByTestId("home_go").click();
+
+  // Join the call
+  await page.getByTestId("lobby_joinCall").click();
+
+  await page.pause();
+  // Should fail
+  await expect(page.getByText("Failed to create call")).toBeVisible();
+  await expect(
+    page.getByText(
+      /Call creation might be restricted to authorized users only/,
+    ),
+  ).toBeVisible();
+});
--- a/playwright/restricted-sfu.spec.ts
+++ b/playwright/restricted-sfu.spec.ts
@@ -0,0 +1,75 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test } from "@playwright/test";
+import { sleep } from "matrix-js-sdk/lib/utils.js";
+
+test("Should request JWT token before starting the call", async ({ page }) => {
+  await page.goto("/");
+
+  let sfGetTimestamp = 0;
+  let sendStateEventTimestamp = 0;
+  await page.route(
+    "**/matrix-rtc.m.localhost/livekit/jwt/sfu/get",
+    async (route) => {
+      await sleep(2000); // Simulate very slow request
+      await route.continue();
+      sfGetTimestamp = Date.now();
+    },
+  );
+
+  await page.route(
+    "**/state/org.matrix.msc3401.call.member/**",
+    async (route) => {
+      await route.continue();
+      sendStateEventTimestamp = Date.now();
+    },
+  );
+
+  await page.getByTestId("home_callName").click();
+  await page.getByTestId("home_callName").fill("HelloCall");
+  await page.getByTestId("home_displayName").click();
+  await page.getByTestId("home_displayName").fill("John Doe");
+  await page.getByTestId("home_go").click();
+
+  // Join the call
+  await page.getByTestId("lobby_joinCall").click();
+  await page.waitForTimeout(4000);
+  // Ensure that the call is connected
+  await page
+    .locator("div")
+    .filter({ hasText: /^HelloCall$/ })
+    .click();
+
+  expect(sfGetTimestamp).toBeGreaterThan(0);
+  expect(sendStateEventTimestamp).toBeGreaterThan(0);
+  expect(sfGetTimestamp).toBeLessThan(sendStateEventTimestamp);
+});
+
+test("Error when pre-warming the focus are caught by the ErrorBoundary", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  await page.route("**/openid/request_token", async (route) => {
+    await route.fulfill({
+      status: 418, // Simulate an error not retryable
+    });
+  });
+
+  await page.getByTestId("home_callName").click();
+  await page.getByTestId("home_callName").fill("HelloCall");
+  await page.getByTestId("home_displayName").click();
+  await page.getByTestId("home_displayName").fill("John Doe");
+  await page.getByTestId("home_go").click();
+
+  // Join the call
+  await page.getByTestId("lobby_joinCall").click();
+
+  // Should fail
+  await expect(page.getByText("Something went wrong")).toBeVisible();
+});
--- a/playwright/sfu-reconnect-bug.spec.ts
+++ b/playwright/sfu-reconnect-bug.spec.ts
@@ -100,5 +100,5 @@ test("When creator left, avoid reconnect to the same SFU", async ({
  // https://github.com/element-hq/element-call/issues/3344
  // The app used to request a new jwt token then to reconnect to the SFU
  expect(wsConnectionCount).toBe(1);
-  expect(sfuGetCallCount).toBe(1);
+  expect(sfuGetCallCount).toBe(2 /* the first one is for the warmup */);
 });
--- a/src/UrlParams.test.ts
+++ b/src/UrlParams.test.ts
@@ -10,7 +10,7 @@ import { describe, expect, it } from "vitest";
 import {
  getRoomIdentifierFromUrl,
  getUrlParams,
-  UserIntent,
+  HeaderStyle,
 } from "../src/UrlParams";

 const ROOM_NAME = "roomNameHere";
@@ -82,6 +82,16 @@ describe("UrlParams", () => {
        getRoomIdentifierFromUrl("", `?roomId=${ROOM_ID}`, "").roomId,
      ).toBe(ROOM_ID);
    });
+    it("(roomId with unprintable characters)", () => {
+      const invisibleChar = "\u2066";
+      expect(
+        getRoomIdentifierFromUrl(
+          "",
+          `?roomId=${invisibleChar}${ROOM_ID}${invisibleChar}`,
+          "",
+        ).roomId,
+      ).toBe(ROOM_ID);
+    });
  });

  it("ignores room alias", () => {
@@ -201,24 +211,68 @@ describe("UrlParams", () => {
  });

  describe("intent", () => {
-    it("defaults to unknown", () => {
-      expect(getUrlParams().intent).toBe(UserIntent.Unknown);
+    const noIntentDefaults = {
+      confineToRoom: false,
+      appPrompt: true,
+      preload: false,
+      header: HeaderStyle.Standard,
+      showControls: true,
+      hideScreensharing: false,
+      allowIceFallback: false,
+      perParticipantE2EE: false,
+      controlledAudioDevices: false,
+      skipLobby: false,
+      returnToLobby: false,
+      sendNotificationType: undefined,
+    };
+    const startNewCallDefaults = (platform: string): object => ({
+      confineToRoom: true,
+      appPrompt: false,
+      preload: true,
+      header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
+      showControls: true,
+      hideScreensharing: false,
+      allowIceFallback: true,
+      perParticipantE2EE: true,
+      controlledAudioDevices: platform === "desktop" ? false : true,
+      skipLobby: true,
+      returnToLobby: false,
+      sendNotificationType: "notification",
+    });
+    const joinExistingCallDefaults = (platform: string): object => ({
+      confineToRoom: true,
+      appPrompt: false,
+      preload: true,
+      header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
+      showControls: true,
+      hideScreensharing: false,
+      allowIceFallback: true,
+      perParticipantE2EE: true,
+      controlledAudioDevices: platform === "desktop" ? false : true,
+      skipLobby: false,
+      returnToLobby: false,
+      sendNotificationType: "notification",
+    });
+    it("use no-intent-defaults with unknown intent", () => {
+      expect(getUrlParams()).toMatchObject(noIntentDefaults);
    });

    it("ignores intent if it is not a valid value", () => {
-      expect(getUrlParams("?intent=foo").intent).toBe(UserIntent.Unknown);
+      expect(getUrlParams("?intent=foo")).toMatchObject(noIntentDefaults);
    });

    it("accepts start_call", () => {
-      expect(getUrlParams("?intent=start_call").intent).toBe(
-        UserIntent.StartNewCall,
-      );
+      expect(
+        getUrlParams("?intent=start_call&widgetId=1234&parentUrl=parent.org"),
+      ).toMatchObject(startNewCallDefaults("desktop"));
    });

    it("accepts join_existing", () => {
-      expect(getUrlParams("?intent=join_existing").intent).toBe(
-        UserIntent.JoinExistingCall,
-      );
+      expect(
+        getUrlParams(
+          "?intent=join_existing&widgetId=1234&parentUrl=parent.org",
+        ),
+      ).toMatchObject(joinExistingCallDefaults("desktop"));
    });
  });

@@ -250,9 +304,5 @@ describe("UrlParams", () => {
      );
      expect(getUrlParams("?header=none&hideHeader=false").header).toBe("none");
    });
-    it("converts hideHeader to the correct header value", () => {
-      expect(getUrlParams("?hideHeader=true").header).toBe("none");
-      expect(getUrlParams("?hideHeader=false").header).toBe("standard");
-    });
  });
 });
--- a/src/UrlParams.ts
+++ b/src/UrlParams.ts
@@ -9,10 +9,12 @@ import { useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type RTCNotificationType } from "matrix-js-sdk/lib/matrixrtc";
+import { pickBy } from "lodash-es";

 import { Config } from "./config/Config";
 import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
+import { platform } from "./Platform";

 interface RoomIdentifier {
  roomAlias: string | null;
@@ -23,6 +25,8 @@ interface RoomIdentifier {
 export enum UserIntent {
  StartNewCall = "start_call",
  JoinExistingCall = "join_existing",
+  StartNewCallDM = "start_call_dm",
+  JoinExistingCallDM = "join_existing_dm",
  Unknown = "unknown",
 }

@@ -32,12 +36,12 @@ export enum HeaderStyle {
  AppBar = "app_bar",
 }

-// 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.
-export interface UrlParams {
+/**
+ * The UrlProperties are used to pass required data to the widget.
+ * Those are different in different rooms, users, devices. They do not configure the behavior of the
+ * widget but provide the required data to the widget.
+ */
+export interface UrlProperties {
  // Widget api related params
  widgetId: string | null;
  parentUrl: string | null;
@@ -49,45 +53,11 @@ export interface UrlParams {
   * is also not validated, where it is in useRoomIdentifier().
   */
  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.)
-   *
-   * The app prompt must also be enabled in the config for this to take effect.
-   */
-  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.
-   */
-  preload: boolean;
-  /**
-   * The style of headers to show. "standard" is the default arrangement, "none"
-   * hides the header entirely, and "app_bar" produces a header with a back
-   * button like you might see in mobile apps. The callback for the back button
-   * is window.controls.onBackButtonPressed.
-   */
-  header: HeaderStyle;
-  /**
-   * Whether the controls should be shown. For screen recording no controls can be desired.
-   */
-  showControls: boolean;
-  /**
-   * Whether to hide the screen-sharing button.
-   */
-  hideScreensharing: boolean;
-  /**
-   * Whether to use end-to-end encryption.
-   */
-  e2eEnabled: boolean;
  /**
   * The user's ID (only used in matryoshka mode).
   */
  userId: string | null;
+
  /**
   * The display name to use for auto-registration.
   */
@@ -125,14 +95,96 @@ export interface UrlParams {
   */
  posthogApiKey: string | null;
  /**
-   * Whether the app is allowed to use fallback STUN servers for ICE in case the
-   * user's homeserver doesn't provide any.
+   * Whether to use end-to-end encryption.
   */
-  allowIceFallback: boolean;
+  e2eEnabled: boolean;
  /**
   * E2EE password
   */
  password: string | null;
+  /** This defines the homeserver that is going to be used when joining a room.
+   * It has to be set to a non default value for links to rooms
+   * that are not on the default homeserver,
+   * that is in use for the current user.
+   */
+  viaServers: string | null;
+
+  /**
+   * This defines the homeserver that is going to be used when registering
+   * a new (guest) user.
+   * This can be user to configure a non default guest user server when
+   * creating a spa link.
+   */
+  homeserver: string | null;
+
+  /**
+   * The rageshake submit URL. This is only used in the embedded package of Element Call.
+   */
+  rageshakeSubmitUrl: string | null;
+
+  /**
+   * The Sentry DSN. This is only used in the embedded package of Element Call.
+   */
+  sentryDsn: string | null;
+
+  /**
+   * The Sentry environment. This is only used in the embedded package of Element Call.
+   */
+  sentryEnvironment: string | null;
+  /**
+   * The theme to use for element call.
+   * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
+   */
+  theme: string | null;
+}
+
+/**
+ * The configuration for the app, which can be set via URL parameters.
+ * Those property are different to the UrlProperties, since they are all optional
+ * and configure the behavior of the app. Their value is the same if EC is used in
+ * the same context but with different accounts/users.
+ *
+ * Their defaults can be controlled by the `intent` property.
+ */
+export interface UrlConfiguration {
+  /**
+   * 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.)
+   *
+   * The app prompt must also be enabled in the config for this to take effect.
+   */
+  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.
+   */
+  preload: boolean;
+  /**
+   * The style of headers to show. "standard" is the default arrangement, "none"
+   * hides the header entirely, and "app_bar" produces a header with a back
+   * button like you might see in mobile apps. The callback for the back button
+   * is window.controls.onBackButtonPressed.
+   */
+  header: HeaderStyle;
+  /**
+   * Whether the controls should be shown. For screen recording no controls can be desired.
+   */
+  showControls: boolean;
+  /**
+   * Whether to hide the screen-sharing button.
+   */
+  hideScreensharing: boolean;
+
+  /**
+   * Whether the app is allowed to use fallback STUN servers for ICE in case the
+   * user's homeserver doesn't provide any.
+   */
+  allowIceFallback: boolean;
+
  /**
   * Whether the app should use per participant keys for E2EE.
   */
@@ -154,52 +206,19 @@ export interface UrlParams {
   * This is useful for video rooms.
   */
  returnToLobby: boolean;
-  /**
-   * The theme to use for element call.
-   * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
-   */
-  theme: string | null;
-  /** This defines the homeserver that is going to be used when joining a room.
-   * It has to be set to a non default value for links to rooms
-   * that are not on the default homeserver,
-   * that is in use for the current user.
-   */
-  viaServers: string | null;
-  /**
-   * This defines the homeserver that is going to be used when registering
-   * a new (guest) user.
-   * This can be user to configure a non default guest user server when
-   * creating a spa link.
-   */
-  homeserver: string | null;
-
-  /**
-   * The user's intent with respect to the call.
-   * e.g. if they clicked a Start Call button, this would be `start_call`.
-   * If it was a Join Call button, it would be `join_existing`.
-   */
-  intent: string | null;
-
-  /**
-   * The rageshake submit URL. This is only used in the embedded package of Element Call.
-   */
-  rageshakeSubmitUrl: string | null;
-
-  /**
-   * The Sentry DSN. This is only used in the embedded package of Element Call.
-   */
-  sentryDsn: string | null;
-
-  /**
-   * The Sentry environment. This is only used in the embedded package of Element Call.
-   */
-  sentryEnvironment: string | null;
  /**
   * Whether and what type of notification EC should send, when the user joins the call.
   */
  sendNotificationType?: RTCNotificationType;
 }

+// 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.
+export interface UrlParams extends UrlProperties, UrlConfiguration {}
+
 // 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
@@ -240,6 +259,17 @@ class ParamParser {
    return this.fragmentParams.get(name) ?? this.queryParams.get(name);
  }

+  public getEnumParam<T extends string>(
+    name: string,
+    type: { [s: string]: T } | ArrayLike<T>,
+  ): T | undefined {
+    const value = this.getParam(name);
+    if (value !== null && Object.values(type).includes(value as T)) {
+      return value as T;
+    }
+    return undefined;
+  }
+
  public getAllParams(name: string): string[] {
    return [
      ...this.fragmentParams.getAll(name),
@@ -251,6 +281,10 @@ class ParamParser {
    const param = this.getParam(name);
    return param === null ? defaultValue : param !== "false";
  }
+  public getFlag(name: string): boolean | undefined {
+    const param = this.getParam(name);
+    return param !== null ? param !== "false" : undefined;
+  }
 }

 /**
@@ -267,46 +301,93 @@ export const getUrlParams = (

  const fontScale = parseFloat(parser.getParam("fontScale") ?? "");

-  let intent = parser.getParam("intent");
-  if (!intent || !Object.values(UserIntent).includes(intent as UserIntent)) {
-    intent = UserIntent.Unknown;
-  }
-
-  // Check hideHeader for backwards compatibility. If header is set, hideHeader
-  // is ignored.
-  const header =
-    parser.getParam("header") ??
-    (parser.getFlagParam("hideHeader")
-      ? HeaderStyle.None
-      : HeaderStyle.Standard);
-
-  const sendNotificationType = ["ring", "notification"].includes(
-    parser.getParam("sendNotificationType") ?? "",
-  )
-    ? (parser.getParam("sendNotificationType") as RTCNotificationType)
-    : undefined;
  const widgetId = parser.getParam("widgetId");
  const parentUrl = parser.getParam("parentUrl");
  const isWidget = !!widgetId && !!parentUrl;

-  return {
+  /**
+   * The user's intent with respect to the call.
+   * e.g. if they clicked a Start Call button, this would be `start_call`.
+   * If it was a Join Call button, it would be `join_existing`.
+   * This is a platform specific default set of parameters, that allows to minize the configuration
+   * needed to start a call. And empowers the EC codebase to control the platform/intent behavior in
+   * a central place.
+   *
+   * In short: either provide url query parameters of UrlConfiguration or set the intent
+   * (or the global defaults will be used).
+   */
+  const intent = !isWidget
+    ? UserIntent.Unknown
+    : (parser.getEnumParam("intent", UserIntent) ?? UserIntent.Unknown);
+  // Here we only use constants and `platform` to determine the intent preset.
+  let intentPreset: UrlConfiguration;
+  const inAppDefault = {
+    confineToRoom: true,
+    appPrompt: false,
+    preload: true,
+    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
+    showControls: true,
+    hideScreensharing: false,
+    allowIceFallback: true,
+    perParticipantE2EE: true,
+    controlledAudioDevices: platform === "desktop" ? false : true,
+    skipLobby: true,
+    returnToLobby: false,
+    sendNotificationType: "notification" as RTCNotificationType,
+  };
+  switch (intent) {
+    case UserIntent.StartNewCall:
+      intentPreset = {
+        ...inAppDefault,
+        skipLobby: true,
+      };
+      break;
+    case UserIntent.JoinExistingCall:
+      intentPreset = {
+        ...inAppDefault,
+        skipLobby: false,
+      };
+      break;
+    case UserIntent.StartNewCallDM:
+      intentPreset = {
+        ...inAppDefault,
+        skipLobby: true,
+        // autoLeaveWhenOthersLeft: true, // TODO: add this once available
+      };
+      break;
+    case UserIntent.JoinExistingCallDM:
+      intentPreset = {
+        ...inAppDefault,
+        skipLobby: true,
+        // autoLeaveWhenOthersLeft: true, // TODO: add this once available
+      };
+      break;
+    // Non widget usecase defaults
+    default:
+      intentPreset = {
+        confineToRoom: false,
+        appPrompt: true,
+        preload: false,
+        header: HeaderStyle.Standard,
+        showControls: true,
+        hideScreensharing: false,
+        allowIceFallback: false,
+        perParticipantE2EE: false,
+        controlledAudioDevices: false,
+        skipLobby: false,
+        returnToLobby: false,
+        sendNotificationType: undefined,
+      };
+  }
+
+  const properties: UrlProperties = {
    widgetId,
    parentUrl,
-
    // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
    // what would we do if it were invalid? If the widget API says that's what
    // the room ID is, then that's what it is.
    roomId: parser.getParam("roomId"),
    password: parser.getParam("password"),
-    // This flag has 'embed' as an alias for historical reasons
-    confineToRoom:
-      parser.getFlagParam("confineToRoom") || parser.getFlagParam("embed"),
-    appPrompt: parser.getFlagParam("appPrompt", true),
-    preload: isWidget ? parser.getFlagParam("preload") : false,
-    header: header as HeaderStyle,
-    showControls: parser.getFlagParam("showControls", true),
-    hideScreensharing: parser.getFlagParam("hideScreensharing"),
-    e2eEnabled: parser.getFlagParam("enableE2EE", true),
    userId: isWidget ? parser.getParam("userId") : null,
    displayName: parser.getParam("displayName"),
    deviceId: isWidget ? parser.getParam("deviceId") : null,
@@ -314,24 +395,9 @@ export const getUrlParams = (
    lang: parser.getParam("lang"),
    fonts: parser.getAllParams("font"),
    fontScale: Number.isNaN(fontScale) ? null : fontScale,
-    allowIceFallback: parser.getFlagParam("allowIceFallback"),
-    perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"),
-    controlledAudioDevices: parser.getFlagParam(
-      "controlledAudioDevices",
-      // the deprecated property name
-      parser.getFlagParam("controlledMediaDevices"),
-    ),
-    skipLobby: parser.getFlagParam(
-      "skipLobby",
-      isWidget && intent === UserIntent.StartNewCall,
-    ),
-    // In SPA mode the user should always exit to the home screen when hanging
-    // up, rather than being sent back to the lobby
-    returnToLobby: isWidget ? parser.getFlagParam("returnToLobby") : false,
    theme: parser.getParam("theme"),
    viaServers: !isWidget ? parser.getParam("viaServers") : null,
    homeserver: !isWidget ? parser.getParam("homeserver") : null,
-    intent,
    posthogApiHost: parser.getParam("posthogApiHost"),
    posthogApiKey: parser.getParam("posthogApiKey"),
    posthogUserId:
@@ -339,7 +405,35 @@ export const getUrlParams = (
    rageshakeSubmitUrl: parser.getParam("rageshakeSubmitUrl"),
    sentryDsn: parser.getParam("sentryDsn"),
    sentryEnvironment: parser.getParam("sentryEnvironment"),
-    sendNotificationType,
+    e2eEnabled: parser.getFlagParam("enableE2EE", true),
+  };
+
+  const configuration: Partial<UrlConfiguration> = {
+    confineToRoom: parser.getFlag("confineToRoom"),
+    appPrompt: parser.getFlag("appPrompt"),
+    preload: isWidget ? parser.getFlag("preload") : undefined,
+    // Check hideHeader for backwards compatibility. If header is set, hideHeader
+    // is ignored.
+    header: parser.getEnumParam("header", HeaderStyle),
+    showControls: parser.getFlag("showControls"),
+    hideScreensharing: parser.getFlag("hideScreensharing"),
+    allowIceFallback: parser.getFlag("allowIceFallback"),
+    perParticipantE2EE: parser.getFlag("perParticipantE2EE"),
+    controlledAudioDevices: parser.getFlag("controlledAudioDevices"),
+    skipLobby: isWidget ? parser.getFlag("skipLobby") : false,
+    // In SPA mode the user should always exit to the home screen when hanging
+    // up, rather than being sent back to the lobby
+    returnToLobby: isWidget ? parser.getFlag("returnToLobby") : false,
+    sendNotificationType: parser.getEnumParam("sendNotificationType", [
+      "ring",
+      "notification",
+    ]),
+  };
+
+  return {
+    ...properties,
+    ...intentPreset,
+    ...pickBy(configuration, (v) => v !== undefined),
  };
 };

@@ -398,10 +492,16 @@ export function getRoomIdentifierFromUrl(

  // Make sure roomId is valid
  let roomId: string | null = parser.getParam("roomId");
-  if (!roomId?.startsWith("!")) {
-    roomId = null;
-  } else if (!roomId.includes("")) {
-    roomId = null;
+  if (roomId !== null) {
+    // Replace any non-printable characters that another client may have inserted.
+    // For instance on iOS, some copied links end up with zero width characters on the end which get encoded into the URL.
+    // This isn't valid for a roomId, so we can freely strip the content.
+    roomId = roomId.replaceAll(/^[^ -~]+|[^ -~]+$/g, "");
+    if (!roomId.startsWith("!")) {
+      roomId = null;
+    } else if (!roomId.includes("")) {
+      roomId = null;
+    }
  }

  return {
--- a/src/config/ConfigOptions.ts
+++ b/src/config/ConfigOptions.ts
@@ -114,24 +114,29 @@ export interface ConfigOptions {
     * when someone leaves a call.
     */
    wait_for_key_rotation_ms?: number;
-    /** @deprecated use wait_for_key_rotation_ms instead */
-    key_rotation_on_leave_delay?: number;

    /**
     * The duration (in milliseconds) after the most recent keep-alive (delayed leave event restart)
     * that the server waits before sending the leave MatrixRTC membership event.
     */
    delayed_leave_event_delay_ms?: number;
-    /** @deprecated use delayed_leave_event_delay_ms instead */
-    membership_server_side_expiry_timeout?: number;
+
+    /**
+     * The time (in milliseconds) after which a we consider a delayed event restart http request to have failed.
+     * Setting this to a lower value will result in more frequent retries but also a higher chance of failiour.
+     *
+     * In the presence of network packet loss (hurting TCP connections), the custom delayedEventRestartLocalTimeoutMs
+     * helps by keeping more delayed event reset candidates in flight,
+     * improving the chances of a successful reset. (its is equivalent to the js-sdk `localTimeout` configuration,
+     * but only applies to calls to the `_unstable_updateDelayedEvent` endpoint with a body of `{action:"restart"}`.)
+     */
+    delayed_leave_event_restart_local_timeout_ms?: number;

    /**
     * The time interval (in milliseconds) at which the client sends membership keep-alive
     * messages to the server by restarting the timer for the delayed leave event.
     */
    delayed_leave_event_restart_ms?: number;
-    /** @deprecated use delayed_leave_event_restart_ms instead */
-    membership_keep_alive_period?: number;

    /**
     * How long we wait before retrying after a network error on any of the requests.
--- a/src/controls.ts
+++ b/src/controls.ts
@@ -6,9 +6,7 @@ Please see LICENSE in the repository root for full details.
 */

 import { Subject } from "rxjs";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
-
-const logger = rootLogger.getChild("[controlled-output]");
+import { logger } from "matrix-js-sdk/lib/logger";

 export interface Controls {
  canEnterPip(): boolean;
--- a/src/icons/FullScreenMaximise.svg
+++ b/src/icons/FullScreenMaximise.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 14C4.55228 14 5 14.4477 5 15V19H9C9.55228 19 10 19.4477 10 20C10 20.5523 9.55228 21 9 21H3V15C3 14.4477 3.44772 14 4 14Z"/>
+<path d="M20 14C20.5523 14 21 14.4477 21 15V21H15C14.4477 21 14 20.5523 14 20C14 19.4477 14.4477 19 15 19H19V15C19 14.4477 19.4477 14 20 14Z" />
+<path d="M9 3C9.55228 3 10 3.44772 10 4C10 4.55228 9.55228 5 9 5H5V9C5 9.55228 4.55228 10 4 10C3.44772 10 3 9.55228 3 9V3H9Z" />
+<path d="M21 9C21 9.55228 20.5523 10 20 10C19.4477 10 19 9.55228 19 9V5H15C14.4477 5 14 4.55228 14 4C14 3.44772 14.4477 3 15 3H21V9Z" />
+</svg>
--- a/src/icons/FullScreenMinimise.svg
+++ b/src/icons/FullScreenMinimise.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 20C10 20.5523 9.55228 21 9 21C8.44772 21 8 20.5523 8 20V16H4C3.44772 16 3 15.5523 3 15C3 14.4477 3.44772 14 4 14H10V20Z" />
+<path d="M20 14C20.5523 14 21 14.4477 21 15C21 15.5523 20.5523 16 20 16H16V20C16 20.5523 15.5523 21 15 21C14.4477 21 14 20.5523 14 20V14H20Z" />
+<path d="M9 3C9.55228 3 10 3.44772 10 4V10H4C3.44772 10 3 9.55228 3 9C3 8.44772 3.44772 8 4 8H8V4C8 3.44772 8.44772 3 9 3Z" />
+<path d="M15 3C15.5523 3 16 3.44772 16 4V8H20C20.5523 8 21 8.44772 21 9C21 9.55228 20.5523 10 20 10H14V4C14 3.44772 14.4477 3 15 3Z" />
+</svg>
--- a/src/livekit/MatrixAudioRenderer.tsx
+++ b/src/livekit/MatrixAudioRenderer.tsx
@@ -14,13 +14,12 @@ import {
  type AudioTrackProps,
 } from "@livekit/components-react";
 import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
+import { logger } from "matrix-js-sdk/lib/logger";

 import { useEarpieceAudioConfig } from "../MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import * as controls from "../controls";

-const logger = rootLogger.getChild("[MatrixAudioRenderer]");
 export interface MatrixAudioRendererProps {
  /**
   * The list of participants to render audio for.
@@ -72,7 +71,7 @@ export function MatrixAudioRenderer({
  const logInvalid = (identity: string, validIdentities: Set<string>): void => {
    if (loggedInvalidIdentities.current.has(identity)) return;
    logger.warn(
-      `Audio track ${identity} has no matching matrix call member`,
+      `[MatrixAudioRenderer] Audio track ${identity} has no matching matrix call member`,
      `current members: ${Array.from(validIdentities.values())}`,
      `track will not get rendered`,
    );
@@ -102,7 +101,7 @@ export function MatrixAudioRenderer({
  useEffect(() => {
    if (!tracks.some((t) => !validIdentities.has(t.participant.identity))) {
      logger.debug(
-        `All audio tracks have a matching matrix call member identity.`,
+        `[MatrixAudioRenderer] All audio tracks have a matching matrix call member identity.`,
      );
      loggedInvalidIdentities.current.clear();
    }
@@ -182,7 +181,7 @@ interface StereoPanAudioTrackProps {
 /**
 * This wraps `livekit.AudioTrack` to allow adding audio nodes to a track.
 * It main purpose is to remount the AudioTrack component when switching from
- * audiooContext to normal audio playback.
+ * audioContext to normal audio playback.
 * As of now the AudioTrack component does not support adding audio nodes while being mounted.
 * @param param0
 * @returns
@@ -202,7 +201,7 @@ function AudioTrackWithAudioNodes({
  const [trackReady, setTrackReady] = useReactiveState(
    () => false,
    // We only want the track to reset once both (audioNodes and audioContext) are set.
-    // for unsetting the audioContext its enough if one of the the is undefined.
+    // for unsetting the audioContext its enough if one of the two is undefined.
    [audioContext && audioNodes],
  );

--- a/src/livekit/useECConnectionState.ts
+++ b/src/livekit/useECConnectionState.ts
@@ -22,17 +22,11 @@ import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import {
  ElementCallError,
  InsufficientCapacityError,
+  SFURoomCreationRestrictedError,
  UnknownCallError,
 } from "../utils/errors.ts";
 import { AbortHandle } from "../utils/abortHandle.ts";

-declare global {
-  interface Window {
-    peerConnectionTimeout?: number;
-    websocketTimeout?: number;
-  }
-}
-
 /*
 * Additional values for states that a call can be in, beyond what livekit
 * provides in ConnectionState. Also reconnects the call if the SFU Config
@@ -169,12 +163,7 @@ async function connectAndPublish(

  try {
    logger.info(`[Lifecycle] Connecting to livekit room ${sfuConfig!.url} ...`);
-    await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt, {
-      // Due to stability issues on Firefox we are testing the effect of different
-      // timeouts, and allow these values to be set through the console
-      peerConnectionTimeout: window.peerConnectionTimeout ?? 45000,
-      websocketTimeout: window.websocketTimeout ?? 45000,
-    });
+    await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt);
    logger.info(`[Lifecycle] ... connected to livekit room`);
  } catch (e) {
    logger.error("[Lifecycle] Failed to connect", e);
@@ -184,11 +173,19 @@ async function connectAndPublish(
    // participant limits.
    // LiveKit Cloud uses 429 for connection limits.
    // Either way, all these errors can be explained as "insufficient capacity".
-    if (
-      e instanceof ConnectionError &&
-      (e.status === 503 || e.status === 200 || e.status === 429)
-    )
-      throw new InsufficientCapacityError();
+    if (e instanceof ConnectionError) {
+      if (e.status === 503 || e.status === 200 || e.status === 429) {
+        throw new InsufficientCapacityError();
+      }
+      if (e.status === 404) {
+        // error msg is "Could not establish signal connection: requested room does not exist"
+        // The room does not exist. There are two different modes of operation for the SFU:
+        // - the room is created on the fly when connecting (livekit `auto_create` option)
+        // - Only authorized users can create rooms, so the room must exist before connecting (done by the auth jwt service)
+        // In the first case there will not be a 404, so we are in the second case.
+        throw new SFURoomCreationRestrictedError();
+      }
+    }
    throw e;
  }

--- a/src/room/GroupCallErrorBoundary.tsx
+++ b/src/room/GroupCallErrorBoundary.tsx
@@ -21,6 +21,7 @@ import {
  OfflineIcon,
  WebBrowserIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Button } from "@vector-im/compound-web";

 import {
  ConnectionLostError,
@@ -93,9 +94,13 @@ const ErrorPage: FC<ErrorPageProps> = ({
        </p>
        {actions &&
          actions.map((action, index) => (
-            <button onClick={action.onClick} key={`action${index}`}>
+            <Button
+              kind="secondary"
+              onClick={action.onClick}
+              key={`action${index}`}
+            >
              {action.label}
-            </button>
+            </Button>
          ))}
      </ErrorView>
    </FullScreenView>
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -150,7 +150,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
        ?.disconnect()
        .then(() => {
          logger.info(
-            `[Lifecycle] Disconnected from livekite room, state:${livekitRoom?.state}`,
+            `[Lifecycle] Disconnected from livekit room, state:${livekitRoom?.state}`,
          );
        })
        .catch((e) => {
--- a/src/room/MuteStates.test.tsx
+++ b/src/room/MuteStates.test.tsx
@@ -191,7 +191,11 @@ describe("useMuteStates", () => {
    mockConfig();

    render(
-      <MemoryRouter initialEntries={["/room/?skipLobby=true"]}>
+      <MemoryRouter
+        initialEntries={[
+          "/room/?skipLobby=true&widgetId=1234&parentUrl=www.parent.org",
+        ]}
+      >
        <MediaDevicesContext value={mockMediaDevices()}>
          <TestComponent />
        </MediaDevicesContext>
--- a/src/room/snapshots/GroupCallErrorBoundary.test.tsx.snap
+++ b/src/room/snapshots/GroupCallErrorBoundary.test.tsx.snap
@@ -132,7 +132,13 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
          <p>
            You were disconnected from the call.
          </p>
-          <button>
+          <button
+            class="_button_vczzf_8"
+            data-kind="secondary"
+            data-size="lg"
+            role="button"
+            tabindex="0"
+          >
            Reconnect
          </button>
          <button
@@ -742,7 +748,13 @@ exports[`should report correct error for 'Connection lost' 1`] = `
          <p>
            You were disconnected from the call.
          </p>
-          <button>
+          <button
+            class="_button_vczzf_8"
+            data-kind="secondary"
+            data-size="lg"
+            role="button"
+            tabindex="0"
+          >
            Reconnect
          </button>
          <button
--- a/src/rtcSessionHelpers.test.ts
+++ b/src/rtcSessionHelpers.test.ts
@@ -70,6 +70,12 @@ test("It joins the correct Session", async () => {
      roomId: "roomId",
      client: {
        getDomain: vi.fn().mockReturnValue("example.org"),
+        getOpenIdToken: vi.fn().mockResolvedValue({
+          access_token: "ACCCESS_TOKEN",
+          token_type: "Bearer",
+          matrix_server_name: "localhost",
+          expires_in: 10000,
+        }),
      },
    },
    memberships: [],
@@ -195,6 +201,12 @@ test("It should not fail with configuration error if homeserver config has livek
      roomId: "roomId",
      client: {
        getDomain: vi.fn().mockReturnValue("example.org"),
+        getOpenIdToken: vi.fn().mockResolvedValue({
+          access_token: "ACCCESS_TOKEN",
+          token_type: "Bearer",
+          matrix_server_name: "localhost",
+          expires_in: 10000,
+        }),
      },
    },
    memberships: [],
--- a/src/rtcSessionHelpers.ts
+++ b/src/rtcSessionHelpers.ts
@@ -5,14 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
-import { logger } from "matrix-js-sdk/lib/logger";
 import {
  isLivekitFocus,
  isLivekitFocusConfig,
  type LivekitFocus,
  type LivekitFocusActive,
+  type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
+import { logger } from "matrix-js-sdk/lib/logger";
 import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";

 import { PosthogAnalytics } from "./analytics/PosthogAnalytics";
@@ -20,6 +20,7 @@ import { Config } from "./config/Config";
 import { ElementWidgetActions, widget, type WidgetHelpers } from "./widget";
 import { MatrixRTCFocusMissingError } from "./utils/errors";
 import { getUrlParams } from "./UrlParams";
+import { getSFUConfigWithOpenID } from "./livekit/openIDSFU.ts";

 const FOCI_WK_KEY = "org.matrix.msc4143.rtc_foci";

@@ -46,6 +47,9 @@ async function makePreferredLivekitFoci(
    preferredFoci.push(focusInUse);
  }

+  // Warm up the first focus we owned, to ensure livekit room is created before any state event sent.
+  let toWarmUp: LivekitFocus | undefined;
+
  // Prioritize the .well-known/matrix/client, if available, over the configured SFU
  const domain = rtcSession.room.client.getDomain();
  if (domain) {
@@ -55,18 +59,17 @@ async function makePreferredLivekitFoci(
      FOCI_WK_KEY
    ];
    if (Array.isArray(wellKnownFoci)) {
-      preferredFoci.push(
-        ...wellKnownFoci
-          .filter((f) => !!f)
-          .filter(isLivekitFocusConfig)
-          .map((wellKnownFocus) => {
-            logger.log(
-              "Adding livekit focus from well known: ",
-              wellKnownFocus,
-            );
-            return { ...wellKnownFocus, livekit_alias: livekitAlias };
-          }),
-      );
+      const validWellKnownFoci = wellKnownFoci
+        .filter((f) => !!f)
+        .filter(isLivekitFocusConfig)
+        .map((wellKnownFocus) => {
+          logger.log("Adding livekit focus from well known: ", wellKnownFocus);
+          return { ...wellKnownFocus, livekit_alias: livekitAlias };
+        });
+      if (validWellKnownFoci.length > 0) {
+        toWarmUp = validWellKnownFoci[0];
+      }
+      preferredFoci.push(...validWellKnownFoci);
    }
  }

@@ -77,10 +80,15 @@ async function makePreferredLivekitFoci(
      livekit_service_url: urlFromConf,
      livekit_alias: livekitAlias,
    };
+    toWarmUp = toWarmUp ?? focusFormConf;
    logger.log("Adding livekit focus from config: ", focusFormConf);
    preferredFoci.push(focusFormConf);
  }

+  if (toWarmUp) {
+    // this will call the jwt/sfu/get endpoint to pre create the livekit room.
+    await getSFUConfigWithOpenID(rtcSession.room.client, toWarmUp);
+  }
  if (preferredFoci.length === 0)
    throw new MatrixRTCFocusMissingError(domain ?? "");
  return Promise.resolve(preferredFoci);
@@ -123,15 +131,13 @@ export async function enterRTCSession(
        useLegacyMemberEvents: !useDeviceSessionMemberEvents,
      }),
      delayedLeaveEventRestartMs:
-        matrixRtcSessionConfig?.delayed_leave_event_restart_ms ??
-        matrixRtcSessionConfig?.membership_keep_alive_period,
+        matrixRtcSessionConfig?.delayed_leave_event_restart_ms,
      delayedLeaveEventDelayMs:
-        matrixRtcSessionConfig?.delayed_leave_event_delay_ms ??
-        matrixRtcSessionConfig?.membership_server_side_expiry_timeout,
+        matrixRtcSessionConfig?.delayed_leave_event_delay_ms,
+      delayedLeaveEventRestartLocalTimeoutMs:
+        matrixRtcSessionConfig?.delayed_leave_event_restart_local_timeout_ms,
      networkErrorRetryMs: matrixRtcSessionConfig?.network_error_retry_ms,
-      makeKeyDelay:
-        matrixRtcSessionConfig?.wait_for_key_rotation_ms ??
-        matrixRtcSessionConfig?.key_rotation_on_leave_delay,
+      makeKeyDelay: matrixRtcSessionConfig?.wait_for_key_rotation_ms,
      membershipEventExpiryMs:
        matrixRtcSessionConfig?.membership_event_expiry_ms,
      useExperimentalToDeviceTransport,
--- a/src/state/MediaDevices.ts
+++ b/src/state/MediaDevices.ts
@@ -17,7 +17,7 @@ import {
  type Observable,
 } from "rxjs";
 import { createMediaDeviceObserver } from "@livekit/components-core";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
+import { type Logger, logger as rootLogger } from "matrix-js-sdk/lib/logger";

 import {
  audioInput as audioInputSetting,
@@ -38,7 +38,6 @@ import { type Behavior, constant } from "./Behavior";
 // This hardcoded id is used in EX ios! It can only be changed in coordination with
 // the ios swift team.
 const EARPIECE_CONFIG_ID = "earpiece-id";
-const logger = rootLogger.getChild("[MediaDevices]");

 export type DeviceLabel =
  | { type: "name"; name: string }
@@ -100,6 +99,7 @@ function availableRawDevices$(
  kind: MediaDeviceKind,
  usingNames$: Behavior<boolean>,
  scope: ObservableScope,
+  logger: Logger,
 ): Behavior<MediaDeviceInfo[]> {
  const logError = (e: Error): void =>
    logger.error("Error creating MediaDeviceObserver", e);
@@ -162,8 +162,15 @@ function selectDevice$<Label>(
 }

 class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
+  private logger = rootLogger.getChild("[MediaDevices AudioInput]");
+
  private readonly availableRaw$: Behavior<MediaDeviceInfo[]> =
-    availableRawDevices$("audioinput", this.usingNames$, this.scope);
+    availableRawDevices$(
+      "audioinput",
+      this.usingNames$,
+      this.scope,
+      this.logger,
+    );

  public readonly available$ = this.scope.behavior(
    this.availableRaw$.pipe(map(buildDeviceMap)),
@@ -200,7 +207,7 @@ class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
    private readonly scope: ObservableScope,
  ) {
    this.available$.subscribe((available) => {
-      logger.info("[audio-input] available devices:", available);
+      this.logger.info("[audio-input] available devices:", available);
    });
  }
 }
@@ -208,10 +215,16 @@ class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
 class AudioOutput
  implements MediaDevice<AudioOutputDeviceLabel, SelectedAudioOutputDevice>
 {
+  private logger = rootLogger.getChild("[MediaDevices AudioOutput]");
  public readonly available$ = this.scope.behavior(
-    availableRawDevices$("audiooutput", this.usingNames$, this.scope).pipe(
+    availableRawDevices$(
+      "audiooutput",
+      this.usingNames$,
+      this.scope,
+      this.logger,
+    ).pipe(
      map((availableRaw) => {
-        const available: Map<string, AudioOutputDeviceLabel> =
+        let available: Map<string, AudioOutputDeviceLabel> =
          buildDeviceMap(availableRaw);
        // Create a virtual default audio output for browsers that don't have one.
        // Its device ID must be the empty string because that's what setSinkId
@@ -221,6 +234,12 @@ class AudioOutput
            type: "default",
            name: availableRaw[0]?.label || null,
          });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const isSafari = !!(window as any).GestureEvent; // non standard api only found on Safari. https://developer.mozilla.org/en-US/docs/Web/API/GestureEvent#browser_compatibility
+        if (isSafari) {
+          // set to empty map if we are on Safari, because it does not support setSinkId
+          available = new Map();
+        }
        // Note: creating virtual default input devices would be another problem
        // entirely, because requesting a media stream from deviceId "" won't
        // automatically track the default device.
@@ -250,7 +269,7 @@ class AudioOutput
    private readonly scope: ObservableScope,
  ) {
    this.available$.subscribe((available) => {
-      logger.info("[audio-output] available devices:", available);
+      this.logger.info("[audio-output] available devices:", available);
    });
  }
 }
@@ -258,6 +277,7 @@ class AudioOutput
 class ControlledAudioOutput
  implements MediaDevice<AudioOutputDeviceLabel, SelectedAudioOutputDevice>
 {
+  private logger = rootLogger.getChild("[MediaDevices ControlledAudioOutput]");
  // We need to subscribe to the raw devices so that the OS does update the input
  // back to what it was before. otherwise we will switch back to the default
  // whenever we allocate a new stream.
@@ -265,6 +285,7 @@ class ControlledAudioOutput
    "audiooutput",
    this.usingNames$,
    this.scope,
+    this.logger,
  );

  public readonly available$ = this.scope.behavior(
@@ -328,26 +349,37 @@ class ControlledAudioOutput
      // been selected - for example, Element X iOS listens to this to determine
      // whether it should enable the proximity sensor.
      if (device !== undefined) {
-        logger.info("[controlled-output] onAudioDeviceSelect called:", device);
+        this.logger.info(
+          "[controlled-output] onAudioDeviceSelect called:",
+          device,
+        );
        window.controls.onAudioDeviceSelect?.(device.id);
        // Also invoke the deprecated callback for backward compatibility
        window.controls.onOutputDeviceSelect?.(device.id);
      }
    });
    this.available$.subscribe((available) => {
-      logger.info("[controlled-output] available devices:", available);
+      this.logger.info("[controlled-output] available devices:", available);
    });
    this.availableRaw$.subscribe((availableRaw) => {
-      logger.info("[controlled-output] available raw devices:", availableRaw);
+      this.logger.info(
+        "[controlled-output] available raw devices:",
+        availableRaw,
+      );
    });
  }
 }

 class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
+  private logger = rootLogger.getChild("[MediaDevices VideoInput]");
+
  public readonly available$ = this.scope.behavior(
-    availableRawDevices$("videoinput", this.usingNames$, this.scope).pipe(
-      map(buildDeviceMap),
-    ),
+    availableRawDevices$(
+      "videoinput",
+      this.usingNames$,
+      this.scope,
+      this.logger,
+    ).pipe(map(buildDeviceMap)),
  );
  public readonly selected$ = this.scope.behavior(
    selectDevice$(this.available$, videoInputSetting.value$).pipe(
@@ -364,7 +396,7 @@ class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
  ) {
    // This also has the purpose of subscribing to the available devices
    this.available$.subscribe((available) => {
-      logger.info("[video-input] available devices:", available);
+      this.logger.info("[video-input] available devices:", available);
    });
  }
 }
--- a/src/tile/SpotlightTile.module.css
+++ b/src/tile/SpotlightTile.module.css
@@ -88,40 +88,48 @@ Please see LICENSE in the repository root for full details.
  padding: var(--cpd-space-2x);
  border: none;
  border-radius: var(--cpd-radius-pill-effect);
-  background: var(--cpd-color-alpha-gray-1400);
+  background: rgba(from var(--cpd-color-gray-100) r g b / 0.6);
  box-shadow: var(--small-drop-shadow);
  transition:
    opacity 0.15s,
    background-color 0.1s;
-  position: absolute;
  z-index: 1;
  --inset: 6px;
  inset-block-end: var(--inset);
  inset-inline-end: var(--inset);
 }

+.bottomRightButtons {
+  display: flex;
+  gap: var(--cpd-space-2x);
+  position: absolute;
+  inset-block-end: var(--cpd-space-1x);
+  inset-inline-end: var(--cpd-space-1x);
+  z-index: 1;
+}
+
 .expand > svg {
  display: block;
-  color: var(--cpd-color-icon-on-solid-primary);
+  color: var(--cpd-color-icon-primary);
 }

@media (hover) {
  .expand:hover {
-    background: var(--cpd-color-bg-action-primary-hovered);
+    background: var(--cpd-color-gray-400);
  }
 }

 .expand:active {
-  background: var(--cpd-color-bg-action-primary-pressed);
+  background: var(--cpd-color-gray-100);
 }

@media (hover) {
-  .tile:hover > button {
+  .tile:hover > div > button {
    opacity: 1;
  }
 }

-.tile:has(:focus-visible) > button {
+.tile:has(:focus-visible) > div > button {
  opacity: 1;
 }

--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -29,6 +29,8 @@ import classNames from "classnames";
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
 import { type RoomMember } from "matrix-js-sdk";

+import FullScreenMaximiseIcon from "../icons/FullScreenMaximise.svg?react";
+import FullScreenMinimiseIcon from "../icons/FullScreenMinimise.svg?react";
 import { MediaView } from "./MediaView";
 import styles from "./SpotlightTile.module.css";
 import {
@@ -210,6 +212,26 @@ export const SpotlightTile: FC<Props> = ({
  const canGoBack = visibleIndex > 0;
  const canGoToNext = visibleIndex !== -1 && visibleIndex < media.length - 1;

+  const isFullscreen = useCallback((): boolean => {
+    const rootElement = document.body;
+    if (rootElement && document.fullscreenElement) return true;
+    return false;
+  }, []);
+
+  const FullScreenIcon = isFullscreen()
+    ? FullScreenMinimiseIcon
+    : FullScreenMaximiseIcon;
+
+  const onToggleFullscreen = useCallback(() => {
+    const rootElement = document.body;
+    if (!rootElement) return;
+    if (isFullscreen()) {
+      void document?.exitFullscreen();
+    } else {
+      void rootElement.requestFullscreen();
+    }
+  }, [isFullscreen]);
+
  // To keep track of which item is visible, we need an intersection observer
  // hooked up to the root element and the items. Because the items will run
  // their effects before their parent does, we need to do this dance with an
@@ -292,17 +314,28 @@ export const SpotlightTile: FC<Props> = ({
          />
        ))}
      </div>
-      {onToggleExpanded && (
+      <div className={styles.bottomRightButtons}>
        <button
          className={classNames(styles.expand)}
-          aria-label={
-            expanded ? t("video_tile.collapse") : t("video_tile.expand")
-          }
-          onClick={onToggleExpanded}
+          aria-label={"maximise"}
+          onClick={onToggleFullscreen}
        >
-          <ToggleExpandIcon aria-hidden width={20} height={20} />
+          <FullScreenIcon aria-hidden width={20} height={20} />
        </button>
-      )}
+
+        {onToggleExpanded && (
+          <button
+            className={classNames(styles.expand)}
+            aria-label={
+              expanded ? t("video_tile.collapse") : t("video_tile.expand")
+            }
+            onClick={onToggleExpanded}
+          >
+            <ToggleExpandIcon aria-hidden width={20} height={20} />
+          </button>
+        )}
+      </div>
+
      {canGoToNext && (
        <button
          className={classNames(styles.advance, styles.next)}
--- a/src/utils/errors.ts
+++ b/src/utils/errors.ts
@@ -17,6 +17,7 @@ export enum ErrorCode {
  INSUFFICIENT_CAPACITY_ERROR = "INSUFFICIENT_CAPACITY_ERROR",
  E2EE_NOT_SUPPORTED = "E2EE_NOT_SUPPORTED",
  OPEN_ID_ERROR = "OPEN_ID_ERROR",
+  SFU_ERROR = "SFU_ERROR",
  UNKNOWN_ERROR = "UNKNOWN_ERROR",
 }

@@ -129,3 +130,14 @@ export class InsufficientCapacityError extends ElementCallError {
    );
  }
 }
+
+export class SFURoomCreationRestrictedError extends ElementCallError {
+  public constructor() {
+    super(
+      t("error.room_creation_restricted"),
+      ErrorCode.SFU_ERROR,
+      ErrorCategory.CONFIGURATION_ISSUE,
+      t("error.room_creation_restricted_description"),
+    );
+  }
+}
--- a/src/widget.ts
+++ b/src/widget.ts
@@ -106,6 +106,10 @@ export const widget = ((): WidgetHelpers | null => {
      if (!baseUrl) throw new Error("Base URL must be supplied");

      // These are all the event types the app uses
+      const sendEvent = [
+        EventType.CallNotify, // Sent as a deprecated fallback
+        EventType.RTCNotification,
+      ];
      const sendRecvEvent = [
        "org.matrix.rageshake_request",
        EventType.CallEncryptionKeysPrefix,
@@ -129,6 +133,7 @@ export const widget = ((): WidgetHelpers | null => {
        { eventType: EventType.RoomEncryption },
        { eventType: EventType.GroupCallMemberPrefix },
      ];
+
      const sendRecvToDevice = [
        EventType.CallInvite,
        EventType.CallCandidates,
@@ -146,7 +151,7 @@ export const widget = ((): WidgetHelpers | null => {
      const client = createRoomWidgetClient(
        api,
        {
-          sendEvent: sendRecvEvent,
+          sendEvent: [...sendEvent, ...sendRecvEvent],
          receiveEvent: sendRecvEvent,
          sendState,
          receiveState,
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Timo K	708581ea38	use body instead of root node Signed-off-by: Timo K <toger5@hotmail.de>	2025-08-08 15:37:55 +02:00
Timo K	eaa7020911	Add a fullscreen button that uses the element request Fullscreen browser api Signed-off-by: Timo K <toger5@hotmail.de>	2025-08-08 14:47:39 +02:00
Timo	c0aab96968	Add intents for DM (#3445 ) * Add intents for DM Signed-off-by: Timo K <toger5@hotmail.de> * review Signed-off-by: Timo K <toger5@hotmail.de> --------- Signed-off-by: Timo K <toger5@hotmail.de>	2025-08-07 15:16:41 +02:00
Valere Fedronic	610032ad1d	Merge pull request #3444 from element-hq/valere/force_jwt_service_before_start Ensure that the jwt service is called before starting a call	2025-08-06 14:54:24 +02:00
Valere Fedronic	e4d14b4892	Update src/rtcSessionHelpers.ts Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>	2025-08-06 14:22:10 +02:00
Valere	8509efb48b	review	2025-08-06 13:59:53 +02:00
Valere	6dcc44b631	comment	2025-08-06 09:26:07 +02:00
Valere	fce7b6d456	refactor: move warmup to makePreferredLivekitFoci	2025-08-05 17:44:22 +02:00
Valere	ef7c9a166a	fix eslint	2025-08-05 15:58:46 +02:00
Valere	dba8a43495	fixup test mock	2025-08-05 15:30:15 +02:00
Valere	1a3e88c19a	Ensure that the the jwt service is called before starting a call	2025-08-05 15:13:04 +02:00
renovate[bot]	955c22c8dc	Update dependency @vector-im/compound-design-tokens to v6 (#3438 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-05 11:34:24 +02:00
ElementRobot	518039f7c3	Merge pull request #3441 from element-hq/actions/localazy-download Localazy Download	2025-08-04 17:13:41 +01:00
fkwp	f5094be194	Translations updates	2025-08-04 16:01:34 +00:00
Timo	fd426191af	Stop reading deprecated config options (DONT USE: `membership_keep_alive_period`, `membership_server_side_expiry_timeout`, `key_rotation_on_leave_delay`) (#3416 ) * Stop reading deprecated config options * add PR-Breaking-Change as one of the possible PR- prefix labels Signed-off-by: Timo K <toger5@hotmail.de> --------- Signed-off-by: Timo K <toger5@hotmail.de>	2025-08-04 17:59:04 +02:00
renovate[bot]	f9d87ea934	Update dependency livekit-client to v2.15.4 (#3425 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-04 17:56:33 +02:00
Timo	77ba88b76c	Set available devices to empty map on safari. Safari does not allow changing output devices so the output device dialog is confusing. (#3426 ) * Set available devices to empty map on safari. Signed-off-by: Timo K <toger5@hotmail.de> * better safari check Signed-off-by: Timo K <toger5@hotmail.de> --------- Signed-off-by: Timo K <toger5@hotmail.de>	2025-08-04 17:46:56 +02:00
fkwp	8615d3adb0	improve web endpoint routing details (#3440 )	2025-08-04 17:14:29 +02:00
Timo	7971ea76cd	Dont construct logger before rageshake initialization (#3434 ) Signed-off-by: Timo K <toger5@hotmail.de>	2025-08-04 16:43:08 +02:00
Robin	5d992a398d	Merge pull request #3437 from element-hq/fkwp/doc/self-hosting_cleanup_backend_announcement Cleanup self-hosting guide	2025-08-01 17:47:22 +02:00
fkwp	1aa76925f7	removing nextgen_new_foci_type item from foci array since it introduces confusion	2025-08-01 15:39:58 +02:00
Robin	4888efe2f7	Merge pull request #3436 from robintown/default-timeout Reset LiveKit connection timeouts to their defaults	2025-08-01 15:13:41 +02:00
Robin	879816ac6d	Reset LiveKit connection timeouts to their defaults I believe that the issue we were originally investigating using these increased timeouts was the fault of my earlier ISP in SW Virginia. I can't recall reproducing the exact issue on other networks.	2025-08-01 14:52:47 +02:00
Robin	6de8820590	Merge pull request #3432 from element-hq/renovate/embedded-package-dependencies Update embedded package dependencies	2025-08-01 14:03:45 +02:00
Valere Fedronic	415f83ace5	Merge pull request #3428 from element-hq/valere/restricted_room_creation_error Display a custom error for restricted SFU config error	2025-08-01 13:04:27 +02:00
Robin	c9fb80f702	Migrate away from Sonatype repo for embedded builds It's been shut down and we can no longer publish to it.	2025-08-01 12:38:41 +02:00
Valere	9bf63cce25	fix the test to properly fail	2025-08-01 11:58:05 +02:00
renovate[bot]	16947e7c39	Update all non-major dependencies (#3433 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-01 11:07:01 +02:00
renovate[bot]	b84c8ab82b	Update embedded package dependencies	2025-08-01 02:31:35 +00:00
Valere	078c67bfb2	fix bad copy paste comment	2025-07-31 17:47:13 +02:00
Valere	81555c8d51	add a playwright test	2025-07-31 17:46:09 +02:00
Valere	d294be8bd4	custom error for restricted SFU config error	2025-07-31 17:18:02 +02:00
Timo	51672599ba	Patch `base-x` and `undici` to versions without known vulnerabilities (#3431 ) Signed-off-by: Timo K <toger5@hotmail.de>	2025-07-31 17:16:49 +02:00
Valere Fedronic	2ade9b5c1e	Merge pull request #3429 from element-hq/valere/devx/update_dev_config DevX: update dev backend to support jwt-token v3	2025-07-31 17:15:44 +02:00
Valere	b0503f41ef	use latest lk-jwt-service for CI	2025-07-31 17:10:40 +02:00
fkwp	d59e794bdf	add alias to nginx	2025-07-31 17:05:57 +02:00
Valere	b35fcf9076	DevX: update dev backend to support jwt-token v3	2025-07-31 17:05:57 +02:00
Valere Fedronic	029827488c	Merge pull request #3430 from element-hq/valere/fix_snapshot fix snapshot test following commit `007a50d`	2025-07-31 17:04:51 +02:00
Valere	4ee67fa4e5	keep lk-jwt-service on 0.2.3 for now	2025-07-31 16:58:14 +02:00
Valere	446a2d4080	fix snapshot test following commit `007a50d`	2025-07-31 16:37:09 +02:00
Valere	007a50d0f1	Fix missing button styling on error dialog	2025-07-31 15:00:21 +02:00
Timo	c7b0f9783d	expose `delayed_leave_event_restart_local_timeout_ms` to `config.json` (#3415 )	2025-07-30 14:58:45 +02:00
Valere Fedronic	391ca63b7e	Merge pull request #3422 from element-hq/valere/bump-js-sdk-28-07-2025 bump js-sdk version 28/07/2025	2025-07-28 17:59:56 +02:00
Valere	5dfa420135	bump js-sdk version	2025-07-28 17:45:38 +02:00
Robin	ff3f727c80	Merge pull request #3418 from element-hq/robin/notification-capability Request capability to send call notifications	2025-07-28 16:04:21 +02:00
Robin	f7565ef104	Request capability to send call notifications `0e0fba6575` added the ability to send call notification events when starting a call, but I forgot to give the widget the right capabilities to do this. The effect was that notifications just wouldn't send in widget mode.	2025-07-24 18:50:03 +02:00
Timo	2f55d8e30c	UrlParams: Intent system update, split into configuration and propreties (#3376 ) * refactor UrlParams to use a preset intent system * change defaults for intend headers * add: getEnumParam to ParamParser * remove deprecated url params * only allow skip lobby in widget (more strict needs test adjustment) * fix tests that now require the url to be a widget url Co-authored-by: Robin <robin@robin.town> --------- Co-authored-by: Robin <robin@robin.town>	2025-07-24 17:46:26 +02:00
Will Hunt	3145bafd5e	Trim extra characters from roomId parameter in URL (#3412 ) * Trim roomId when parsing from URL * fix char * fixup * limit to roomId * Add a comment	2025-07-22 20:11:53 +01:00