Merge branch 'livekit' into hs/compound-switch

Update dependency @livekit/components-react to v2.9.21 (#3957 )
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2026-10-16 23:45:50 +00:00 · 2026-05-11 09:36:08 +02:00 · 2026-05-11 09:05:59 +02:00 · 2026-05-11 08:35:17 +02:00 · 2026-05-07 14:16:21 +02:00 · 2026-05-07 12:25:17 +02:00
17 changed files with 353 additions and 327 deletions
@@ -85,3 +85,31 @@ jobs:
      SENTRY_URL: ${{ secrets.SENTRY_URL }}
      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+  build_storybook:
+    name: Build Storybook
+    if: contains(github.event.pull_request.labels.*.name, 'storybook build')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false
+      - name: Enable Corepack
+        run: corepack enable
+      - name: pnpm cache
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          cache: "pnpm"
+          node-version-file: ".node-version"
+      - name: Install dependencies
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+      - name: Build Storybook
+        run: pnpm run build-storybook
+      - name: Upload Artifact
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        with:
+          name: build-output-storybook
+          path: storybook-static
+          # We'll only use this in a triggered job, then we're done with it
+          retention-days: 1
@@ -17,7 +17,7 @@ on:
      package:
        required: true
        type: string
-        description: Which package to deploy - 'full', 'embedded', or 'sdk'
+        description: Which package to deploy - 'full', 'embedded', 'sdk', or 'storybook'
      artifact_run_id:
        required: false
        type: string
@@ -43,7 +43,7 @@ jobs:
        with:
          step: start
          token: ${{ secrets.GITHUB_TOKEN }}
-          env: Netlify
+          env: ${{ inputs.package}}
          ref: ${{ inputs.deployment_ref }}
          desc: |
            Do you trust the author of this PR? Maybe this build will steal your keys or give you malware.
@@ -59,9 +59,13 @@ jobs:

      - name: Add redirects file
        # We fetch from github directly as we don't bother checking out the repo
+        # Not needed for storybook deployments
+        if: inputs.package != 'storybook'
        run: curl -s https://raw.githubusercontent.com/element-hq/element-call/main/config/netlify_redirects > webapp/_redirects

      - name: Add config file
+        # Not needed for storybook deployments
+        if: inputs.package != 'storybook'
        run: |
          if [ "${INPUTS_PACKAGE}" = "full" ]; then
            curl -s "https://raw.githubusercontent.com/${INPUTS_PR_HEAD_FULL_NAME}/${INPUTS_PR_HEAD_REF}/config/config_netlify_preview.json" > webapp/config.json
@@ -78,7 +82,7 @@ jobs:
        with:
          publish-dir: webapp
          deploy-message: "Deploy from GitHub Actions"
-          alias: ${{ inputs.package == 'sdk' && format('pr{0}-sdk', inputs.pr_number) || format('pr{0}', inputs.pr_number) }}
+          alias: ${{ inputs.package == 'sdk' && format('pr{0}-sdk', inputs.pr_number) || inputs.package == 'storybook' && format('pr{0}-storybook', inputs.pr_number) || format('pr{0}', inputs.pr_number) }}
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
@@ -14,7 +14,7 @@ jobs:
    # 2. Event must be a pull_request
    # 3. Head repository must be the SAME as the base repository (No Forks!)
    if: >
-      github.event.workflow_run.conclusion == 'success' && 
+      github.event.workflow_run.conclusion == 'success' &&
      github.event.workflow_run.event == 'pull_request' &&
      github.event.workflow_run.head_repository.full_name == github.repository
    runs-on: ubuntu-latest
@@ -63,6 +63,24 @@ jobs:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

+  netlify-storybook:
+    needs: prdetails
+    if: ${{ needs.prdetails.outputs.pr_data_json && contains(fromJSON(needs.prdetails.outputs.pr_data_json).labels.*.name, 'storybook build') }}
+    permissions:
+      deployments: write
+    uses: ./.github/workflows/deploy-to-netlify.yaml
+    with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
+      pr_number: ${{ needs.prdetails.outputs.pr_number }}
+      pr_head_full_name: ${{ github.event.workflow_run.head_repository.full_name }}
+      pr_head_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.ref }}
+      deployment_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.sha || github.ref || github.head_ref }}
+      package: storybook
+    secrets:
+      ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+
  docker:
    if: ${{ needs.prdetails.outputs.pr_data_json && contains(fromJSON(needs.prdetails.outputs.pr_data_json).labels.*.name, 'docker build') }}
    needs: prdetails
@@ -42,8 +42,6 @@ server {
        proxy_set_header Host $host;
    }

-    error_page   500 502 503 504  /50x.html;
-
 }

 # Synapse reverse proxy including .well-known/matrix/client
@@ -91,8 +89,6 @@ server {
        proxy_set_header Host $host;
    }

-    error_page   500 502 503 504  /50x.html;
-
 }

 # MatrixRTC reverse proxy
@@ -144,8 +140,6 @@ server {
      proxy_pass http://livekit-sfu:7880/;
    }

-    error_page   500 502 503 504  /50x.html;
-
 }

 # MatrixRTC reverse proxy
@@ -192,8 +186,6 @@ server {
      proxy_pass http://livekit-sfu-1:17880/;
    }

-    error_page   500 502 503 504  /50x.html;
-
 }

 # Convenience reverse proxy for the call.m.localhost domain to element call
@@ -243,7 +235,6 @@ server {
      proxy_pass http://host.docker.internal:8080;

    }
-    error_page   500 502 503 504  /50x.html;

 }

@@ -276,8 +267,6 @@ server {

    }

-    error_page   500 502 503 504  /50x.html;
-
 }

 # Convenience reverse proxy app.othersite.m.localhost for element web
@@ -309,6 +298,4 @@ server {

    }

-    error_page   500 502 503 504  /50x.html;
-
 }
@@ -145,6 +145,7 @@
  },
  "layout_grid_label": "Grid",
  "layout_spotlight_label": "Spotlight",
+  "layout_switch_label": "Layout",
  "lobby": {
    "ask_to_join": "Request to join call",
    "join_as_guest": "Join as guest",
@@ -142,9 +142,7 @@ export class TestHelpers {
      timeout: 15000,
    });

-    await this.maybeDismissBrowserNotSupportedToast(page);
-    await this.maybeDismissServiceWorkerWarningToast(page);
-    await this.maybeDismissBackupChat(page);
+    await this.dismissStartupToasts(page);

    await TestHelpers.setDevToolElementCallDevUrl(page);

@@ -155,73 +153,39 @@ export class TestHelpers {
    return { page, clientHandle, mxId };
  }

-  private static async maybeDismissBrowserNotSupportedToast(
-    page: Page,
-  ): Promise<void> {
-    const browserUnsupportedToast = page
-      .getByText("Element does not support this browser")
-      .locator("..")
-      .locator("..");
+  // Dismisses any toasts that appear on startup, such as "Failed to load service worker" or "Back up your chats".
+  // Toast can be stacked, and only the top one can be dismiss, so just look at what is on top and
+  // dismiss (if part of expected toats)
+  public static async dismissStartupToasts(page: Page): Promise<void> {
+    const expectedToasts = [
+      { title: "Failed to load service worker", button: "OK" },
+      { title: "Back up your chats", button: "Dismiss" },
+      { title: "Element does not support this browser", button: "Dismiss" },
+    ];

-    // Dismiss incompatible browser toast
-    const dismissButton = browserUnsupportedToast.getByRole("button", {
-      name: "Dismiss",
-    });
-    try {
-      await expect(dismissButton).toBeVisible({ timeout: 700 });
-      await dismissButton.click();
-    } catch {
-      // dismissButton not visible, continue as normal
-    }
-  }
+    const toast = page.locator(".mx_Toast_toast");

-  private static async maybeDismissServiceWorkerWarningToast(
-    page: Page,
-  ): Promise<void> {
-    const toast = page
-      .locator(".mx_Toast_toast")
-      .getByText("Failed to load service worker");
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      try {
+        await toast.waitFor({ state: "visible", timeout: 700 });
+        const title = await toast.locator(".mx_Toast_title h2").textContent();

-    try {
-      await expect(toast).toBeVisible({ timeout: 700 });
-      await page
-        .locator(".mx_Toast_toast")
-        .getByRole("button", { name: "OK" })
-        .click();
-    } catch {
-      // toast not visible, continue as normal
-    }
-  }
+        // Find the matching toast config
+        const toastConfig = expectedToasts.find((t) =>
+          title?.includes(t.title),
+        );

-  private static async maybeDismissBackupChat(page: Page): Promise<void> {
-    const toast = page
-      .locator(".mx_Toast_toast")
-      .getByText("Back up your chats");
-
-    try {
-      await expect(toast).toBeVisible({ timeout: 700 });
-      await page
-        .locator(".mx_Toast_toast")
-        .getByRole("button", { name: "Dismiss" })
-        .click();
-    } catch {
-      // toast not visible, continue as normal
-    }
-  }
-
-  public static async maybeDismissKeyBackupToast(page: Page): Promise<void> {
-    const toast = page
-      .locator(".mx_Toast_toast")
-      .getByText("Back up your chats");
-
-    try {
-      await expect(toast).toBeVisible({ timeout: 700 });
-      await page
-        .locator(".mx_Toast_toast")
-        .getByRole("button", { name: "Dismiss" })
-        .click();
-    } catch {
-      // toast not visible, continue as normal
+        if (toastConfig) {
+          await toast.getByRole("button", { name: toastConfig.button }).click();
+        } else {
+          // Unknown toast. We don't want to act on unknown toasts
+          break;
+        }
+      } catch {
+        // No toast visible, exit loop
+        break;
+      }
    }
  }

@@ -244,7 +208,7 @@ export class TestHelpers {
      timeout: 10000,
    });
    await expect(page.getByText("Encryption enabled")).toBeVisible();
-    await TestHelpers.maybeDismissKeyBackupToast(page);
+    await TestHelpers.dismissStartupToasts(page);

    // Invite users if any
    if (andInvite.length > 0) {
@@ -283,7 +247,7 @@ export class TestHelpers {
    await expect(
      page.getByRole("main").getByRole("heading", { name: roomName }),
    ).toBeVisible();
-    await TestHelpers.maybeDismissKeyBackupToast(page);
+    await TestHelpers.dismissStartupToasts(page);
  }

  /**
@@ -217,7 +217,7 @@ widgetTest(
    ).toBeVisible();

    await expect(whistler.page.getByText("Incoming video call")).toBeVisible();
-    await whistler.page.getByRole("button", { name: "Ignore" }).click();
+    await whistler.page.getByRole("button", { name: "Decline" }).click();

    await expect(
      whistler.page.locator('iframe[title="Element Call"]'),
@@ -47,16 +47,16 @@ importers:
        version: 11.7.12
      '@livekit/components-core':
        specifier: ^0.12.0
-        version: 0.12.13(livekit-client@2.18.8(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
+        version: 0.12.13(livekit-client@2.18.9(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
      '@livekit/components-react':
        specifier: ^2.0.0
-        version: 2.9.20(livekit-client@2.18.8(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(tslib@2.8.1)
+        version: 2.9.21(livekit-client@2.18.9(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(tslib@2.8.1)
      '@livekit/protocol':
        specifier: ^1.42.2
        version: 1.45.6
      '@livekit/track-processors':
        specifier: ^0.7.1
-        version: 0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.18.8(@types/dom-mediacapture-record@1.0.22))
+        version: 0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.18.9(@types/dom-mediacapture-record@1.0.22))
      '@mediapipe/tasks-vision':
        specifier: ^0.10.18
        version: 0.10.34
@@ -227,7 +227,7 @@ importers:
        version: 5.88.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@types/node@24.12.2)(typescript@5.9.3)
      livekit-client:
        specifier: ^2.18.1
-        version: 2.18.8(@types/dom-mediacapture-record@1.0.22)
+        version: 2.18.9(@types/dom-mediacapture-record@1.0.22)
      lodash-es:
        specifier: ^4.17.21
        version: 4.18.1
@@ -236,7 +236,7 @@ importers:
        version: 1.9.2
      matrix-js-sdk:
        specifier: matrix-org/matrix-js-sdk#develop
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/69985ee350a33ba75f1ad11f96468344f0c92a8d
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/349e8c5023b74b7ee17b2e9a0cba6dfce6818d68
      matrix-widget-api:
        specifier: ^1.16.1
        version: 1.17.0
@@ -1556,12 +1556,12 @@ packages:
      livekit-client: ^2.17.2
      tslib: ^2.6.2

-  '@livekit/components-react@2.9.20':
-    resolution: {integrity: sha512-hjkYOsJj9Jbghb7wM5cI8HoVisKeL6Zcy1VnRWTLm0sqVbto8GJp/17T4Udx85mCPY6Jgh8I1Cv0yVzgz7CQtg==}
+  '@livekit/components-react@2.9.21':
+    resolution: {integrity: sha512-6hU9VucJJL+gAhilNGe4MBCDCZVk64qyjP9Ck86krvOIdVU76WeWksddg1MYUP10AlUwwrfD7davz41pJTcMJw==}
    engines: {node: '>=18'}
    peerDependencies:
      '@livekit/krisp-noise-filter': ^0.2.12 || ^0.3.0
-      livekit-client: ^2.17.2
+      livekit-client: ^2.18.2
      react: '>=18'
      react-dom: '>=18'
      tslib: ^2.6.2
@@ -2995,8 +2995,8 @@ packages:
    peerDependencies:
      typescript: '>=4.8.4 <6.1.0'

-  '@typescript-eslint/project-service@8.59.1':
-    resolution: {integrity: sha512-+MuHQlHiEr00Of/IQbE/MmEoi44znZHbR/Pz7Opq4HryUOlRi+/44dro9Ycy8Fyo+/024IWtw8m4JUMCGTYxDg==}
+  '@typescript-eslint/project-service@8.59.2':
+    resolution: {integrity: sha512-+2hqvEkeyf/0FBor67duF0Ll7Ot8jyKzDQOSrxazF/danillRq2DwR9dLptsXpoZQqxE1UisSmoZewrlPas9Vw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      typescript: '>=4.8.4 <6.1.0'
@@ -3013,8 +3013,8 @@ packages:
    resolution: {integrity: sha512-UzR16Ut8IpA3Mc4DbgAShlPPkVm8xXMWafXxB0BocaVRHs8ZGakAxGRskF7FId3sdk9lgGD73GSFaWmWFDE4dg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@typescript-eslint/scope-manager@8.59.1':
-    resolution: {integrity: sha512-LwuHQI4pDOYVKvmH2dkaJo6YZCSgouVgnS/z7yBPKBMvgtBvyLqiLy9Z6b7+m/TRcX1NFYUqZetI5Y+aT4GEfg==}
+  '@typescript-eslint/scope-manager@8.59.2':
+    resolution: {integrity: sha512-JzfyEpEtOU89CcFSwyNS3mu4MLvLSXqnmX05+aKBDM+TdR5jzcGOEBwxwGNxrEQ7p/z6kK2WyioCGBf2zZBnvg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

  '@typescript-eslint/tsconfig-utils@8.58.2':
@@ -3029,8 +3029,8 @@ packages:
    peerDependencies:
      typescript: '>=4.8.4 <6.1.0'

-  '@typescript-eslint/tsconfig-utils@8.59.1':
-    resolution: {integrity: sha512-/0nEyPbX7gRsk0Uwfe4ALwwgxuA66d/l2mhRDNlAvaj4U3juhUtJNq0DsY8M2AYwwb9rEq2hrC3IcIcEt++iJA==}
+  '@typescript-eslint/tsconfig-utils@8.59.2':
+    resolution: {integrity: sha512-BKK4alN7oi4C/zv4VqHQ+uRU+lTa6JGIZ7s1juw7b3RHo9OfKB+bKX3u0iVZetdsUCBBkSbdWbarJbmN0fTeSw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      typescript: '>=4.8.4 <6.1.0'
@@ -3058,6 +3058,10 @@ packages:
    resolution: {integrity: sha512-ZDCjgccSdYPw5Bxh+my4Z0lJU96ZDN7jbBzvmEn0FZx3RtU1C7VWl6NbDx94bwY3V5YsgwRzJPOgeY2Q/nLG8A==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@typescript-eslint/types@8.59.2':
+    resolution: {integrity: sha512-e82GVOE8Ps3E++Egvb6Y3Dw0S10u8NkQ9KXmtRhCWJJ8kDhOJTvtMAWnFL16kB1583goCWXsr0NieKCZMs2/0Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
  '@typescript-eslint/typescript-estree@5.62.0':
    resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3079,8 +3083,8 @@ packages:
    peerDependencies:
      typescript: '>=4.8.4 <6.1.0'

-  '@typescript-eslint/typescript-estree@8.59.1':
-    resolution: {integrity: sha512-OUd+vJS05sSkOip+BkZ/2NS8RMxrAAJemsC6vU3kmfLyeaJT0TftHkV9mcx2107MmsBVXXexhVu4F0TZXyMl4g==}
+  '@typescript-eslint/typescript-estree@8.59.2':
+    resolution: {integrity: sha512-o0XPGNwcWw+FIwStOWn+BwBuEmL6QXP0rsvAFg7ET1dey1Nr6Wb1ac8p5HEsK0ygO/6mUxlk+YWQD9xcb/nnXg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      typescript: '>=4.8.4 <6.1.0'
@@ -3105,8 +3109,8 @@ packages:
      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
      typescript: '>=4.8.4 <6.1.0'

-  '@typescript-eslint/utils@8.59.1':
-    resolution: {integrity: sha512-3pIeoXhCeYH9FSCBI8P3iNwJlGuzPlYKkTlen2O9T1DSeeg8UG8jstq6BLk+Mda0qup7mgk4z4XL4OzRaxZ8LA==}
+  '@typescript-eslint/utils@8.59.2':
+    resolution: {integrity: sha512-Juw3EinkXqjaffxz6roowvV7GZT/kET5vSKKZT6upl5TXdWkLkYmNPXwDDL2Vkt2DPn0nODIS4egC/0AGxKo/Q==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
@@ -3124,12 +3128,13 @@ packages:
    resolution: {integrity: sha512-/uejZt4dSere1bx12WLlPfv8GktzcaDtuJ7s42/HEZ5zGj9oxRaD4bj7qwSunXkf+pbAhFt2zjpHYUiT5lHf0Q==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@typescript-eslint/visitor-keys@8.59.1':
-    resolution: {integrity: sha512-LdDNl6C5iJExcM0Yh0PwAIBb9PrSiCsWamF/JyEZawm3kFDnRoaq3LGE4bpyRao/fWeGKKyw7icx0YxrLFC5Cg==}
+  '@typescript-eslint/visitor-keys@8.59.2':
+    resolution: {integrity: sha512-NwjLUnGy8/Zfx23fl50tRC8rYaYnM52xNRYFAXvmiil9yh1+K6aRVQMnzW6gQB/1DLgWt977lYQn7C+wtgXZiA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

  '@ungap/structured-clone@1.3.0':
    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher

  '@use-gesture/core@10.3.1':
    resolution: {integrity: sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==}
@@ -4837,9 +4842,6 @@ packages:
    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
    hasBin: true

-  jose@6.2.2:
-    resolution: {integrity: sha512-d7kPDd34KO/YnzaDOlikGpOurfF0ByC2sEV4cANCtdqLlTfBlw2p14O/5d/zv40gJPbIQxfES3nSx1/oYNyuZQ==}
-
  jose@6.2.3:
    resolution: {integrity: sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw==}

@@ -5021,8 +5023,8 @@ packages:
  lines-and-columns@1.2.4:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}

-  livekit-client@2.18.8:
-    resolution: {integrity: sha512-E+bSpnBVng/1xG4RfL1Q51dHUpBwL14Wix4sR5bS0djEzKMEtrxcUyhWLltdwQ0USf1t0PaxW6WL4oVb2s4Fsw==}
+  livekit-client@2.18.9:
+    resolution: {integrity: sha512-l0cADcxxBCWCBMtU9eWY6RpdbRfgA5c1/05yngQXo08mcy3VOttmSE2pNZ74k2B2zQym149g5/Y1B3vq2FWwlw==}
    peerDependencies:
      '@types/dom-mediacapture-record': ^1

@@ -5096,8 +5098,8 @@ packages:
  matrix-events-sdk@0.0.1:
    resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==}

-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/69985ee350a33ba75f1ad11f96468344f0c92a8d:
-    resolution: {tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/69985ee350a33ba75f1ad11f96468344f0c92a8d}
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/349e8c5023b74b7ee17b2e9a0cba6dfce6818d68:
+    resolution: {tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/349e8c5023b74b7ee17b2e9a0cba6dfce6818d68}
    version: 41.4.0
    engines: {node: '>=22.0.0'}

@@ -5995,6 +5997,11 @@ packages:
    engines: {node: '>=10'}
    hasBin: true

+  semver@7.8.0:
+    resolution: {integrity: sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
  set-blocking@2.0.0:
    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}

@@ -8204,21 +8211,21 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.5

-  '@livekit/components-core@0.12.13(livekit-client@2.18.8(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)':
+  '@livekit/components-core@0.12.13(livekit-client@2.18.9(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)':
    dependencies:
      '@floating-ui/dom': 1.7.4
-      livekit-client: 2.18.8(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.18.9(@types/dom-mediacapture-record@1.0.22)
      loglevel: 1.9.1
      rxjs: 7.8.2
      tslib: 2.8.1

-  '@livekit/components-react@2.9.20(livekit-client@2.18.8(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(tslib@2.8.1)':
+  '@livekit/components-react@2.9.21(livekit-client@2.18.9(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(tslib@2.8.1)':
    dependencies:
-      '@livekit/components-core': 0.12.13(livekit-client@2.18.8(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
+      '@livekit/components-core': 0.12.13(livekit-client@2.18.9(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
      clsx: 2.1.1
      events: 3.3.0
-      jose: 6.2.2
-      livekit-client: 2.18.8(@types/dom-mediacapture-record@1.0.22)
+      jose: 6.2.3
+      livekit-client: 2.18.9(@types/dom-mediacapture-record@1.0.22)
      react: 19.2.5
      react-dom: 19.2.5(react@19.2.5)
      tslib: 2.8.1
@@ -8234,11 +8241,11 @@ snapshots:
    dependencies:
      '@bufbuild/protobuf': 1.10.1

-  '@livekit/track-processors@0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.18.8(@types/dom-mediacapture-record@1.0.22))':
+  '@livekit/track-processors@0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.18.9(@types/dom-mediacapture-record@1.0.22))':
    dependencies:
      '@mediapipe/tasks-vision': 0.10.34
      '@types/dom-mediacapture-transform': 0.1.11
-      livekit-client: 2.18.8(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.18.9(@types/dom-mediacapture-record@1.0.22)

  '@matrix-org/matrix-sdk-crypto-wasm@18.2.0': {}

@@ -9501,10 +9508,10 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/project-service@8.59.1(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.59.2(typescript@5.9.3)':
    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.59.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.59.1
+      '@typescript-eslint/tsconfig-utils': 8.59.2(typescript@5.9.3)
+      '@typescript-eslint/types': 8.59.2
      debug: 4.4.3
      typescript: 5.9.3
    transitivePeerDependencies:
@@ -9525,10 +9532,10 @@ snapshots:
      '@typescript-eslint/types': 8.59.0
      '@typescript-eslint/visitor-keys': 8.59.0

-  '@typescript-eslint/scope-manager@8.59.1':
+  '@typescript-eslint/scope-manager@8.59.2':
    dependencies:
-      '@typescript-eslint/types': 8.59.1
-      '@typescript-eslint/visitor-keys': 8.59.1
+      '@typescript-eslint/types': 8.59.2
+      '@typescript-eslint/visitor-keys': 8.59.2

  '@typescript-eslint/tsconfig-utils@8.58.2(typescript@5.9.3)':
    dependencies:
@@ -9538,7 +9545,7 @@ snapshots:
    dependencies:
      typescript: 5.9.3

-  '@typescript-eslint/tsconfig-utils@8.59.1(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.59.2(typescript@5.9.3)':
    dependencies:
      typescript: 5.9.3

@@ -9562,6 +9569,8 @@ snapshots:

  '@typescript-eslint/types@8.59.1': {}

+  '@typescript-eslint/types@8.59.2': {}
+
  '@typescript-eslint/typescript-estree@5.62.0(typescript@5.9.3)':
    dependencies:
      '@typescript-eslint/types': 5.62.0
@@ -9606,15 +9615,15 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/typescript-estree@8.59.1(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.59.2(typescript@5.9.3)':
    dependencies:
-      '@typescript-eslint/project-service': 8.59.1(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.59.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.59.1
-      '@typescript-eslint/visitor-keys': 8.59.1
+      '@typescript-eslint/project-service': 8.59.2(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.59.2(typescript@5.9.3)
+      '@typescript-eslint/types': 8.59.2
+      '@typescript-eslint/visitor-keys': 8.59.2
      debug: 4.4.3
      minimatch: 10.2.5
-      semver: 7.7.4
+      semver: 7.8.0
      tinyglobby: 0.2.16
      ts-api-utils: 2.5.0(typescript@5.9.3)
      typescript: 5.9.3
@@ -9658,12 +9667,12 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/utils@8.59.1(eslint@8.57.1)(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.59.2(eslint@8.57.1)(typescript@5.9.3)':
    dependencies:
      '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
-      '@typescript-eslint/scope-manager': 8.59.1
-      '@typescript-eslint/types': 8.59.1
-      '@typescript-eslint/typescript-estree': 8.59.1(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.59.2
+      '@typescript-eslint/types': 8.59.2
+      '@typescript-eslint/typescript-estree': 8.59.2(typescript@5.9.3)
      eslint: 8.57.1
      typescript: 5.9.3
    transitivePeerDependencies:
@@ -9684,9 +9693,9 @@ snapshots:
      '@typescript-eslint/types': 8.59.0
      eslint-visitor-keys: 5.0.1

-  '@typescript-eslint/visitor-keys@8.59.1':
+  '@typescript-eslint/visitor-keys@8.59.2':
    dependencies:
-      '@typescript-eslint/types': 8.59.1
+      '@typescript-eslint/types': 8.59.2
      eslint-visitor-keys: 5.0.1

  '@ungap/structured-clone@1.3.0': {}
@@ -10847,7 +10856,7 @@ snapshots:

  eslint-plugin-jest@29.15.2(@typescript-eslint/eslint-plugin@8.59.0(@typescript-eslint/parser@8.59.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3):
    dependencies:
-      '@typescript-eslint/utils': 8.59.1(eslint@8.57.1)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.59.2(eslint@8.57.1)(typescript@5.9.3)
      eslint: 8.57.1
    optionalDependencies:
      '@typescript-eslint/eslint-plugin': 8.59.0(@typescript-eslint/parser@8.59.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3)
@@ -11736,8 +11745,6 @@ snapshots:

  jiti@2.6.1: {}

-  jose@6.2.2: {}
-
  jose@6.2.3: {}

  js-tokens@10.0.0: {}
@@ -11907,7 +11914,7 @@ snapshots:

  lines-and-columns@1.2.4: {}

-  livekit-client@2.18.8(@types/dom-mediacapture-record@1.0.22):
+  livekit-client@2.18.9(@types/dom-mediacapture-record@1.0.22):
    dependencies:
      '@livekit/mutex': 1.1.1
      '@livekit/protocol': 1.45.3
@@ -11983,7 +11990,7 @@ snapshots:

  matrix-events-sdk@0.0.1: {}

-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/69985ee350a33ba75f1ad11f96468344f0c92a8d:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/349e8c5023b74b7ee17b2e9a0cba6dfce6818d68:
    dependencies:
      '@babel/runtime': 7.29.2
      '@matrix-org/matrix-sdk-crypto-wasm': 18.2.0
@@ -13060,6 +13067,8 @@ snapshots:

  semver@7.7.4: {}

+  semver@7.8.0: {}
+
  set-blocking@2.0.0: {}

  set-cookie-parser@2.7.2: {}
@@ -8,6 +8,12 @@ Please see LICENSE in the repository root for full details.
 import { type FC, type JSX, type Ref, useMemo } from "react";
 import classNames from "classnames";
 import { BehaviorSubject } from "rxjs";
+import { Switch } from "@vector-im/compound-web";
+import { t } from "i18next";
+import {
+  SpotlightIcon,
+  GridIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";

 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -23,7 +29,6 @@ import {
  type ReactionData,
 } from "../button";
 import styles from "./CallFooter.module.css";
-import { LayoutToggle } from "../room/LayoutToggle";
 import { type GridMode } from "../state/CallViewModel/CallViewModel";

 export interface AudioOutputSwitcher {
@@ -232,10 +237,18 @@ export const CallFooter: FC<FooterProps> = ({
      </div>
      {!hideControls && <div className={styles.buttons}>{buttons}</div>}
      {setLayoutMode && layoutMode && showLayoutSwitcher && (
-        <LayoutToggle
+        <Switch<"spotlight", "grid">
+          name="layoutMode"
+          aria-label={t("layout_switch_label")}
+          leftLabel={t("layout_spotlight_label")}
+          leftValue="spotlight"
+          leftIcon={SpotlightIcon}
+          rightLabel={t("layout_grid_label")}
+          rightValue="grid"
+          rightIcon={GridIcon}
          className={styles.layout}
-          layout={layoutMode}
-          setLayout={setLayoutMode}
+          value={layoutMode}
+          onChange={setLayoutMode}
        />
      )}
    </div>
@@ -164,6 +164,14 @@ export interface ResolvedConfigOptions extends ConfigOptions {
  };
  sync_disconnect_grace_period_ms: number;
  ssla: string;
+  matrix_rtc_session: {
+    wait_for_key_rotation_ms?: number;
+    delayed_leave_event_delay_ms: number;
+    delayed_leave_event_restart_local_timeout_ms?: number;
+    delayed_leave_event_restart_ms?: number;
+    network_error_retry_ms: number;
+    membership_event_expiry_ms?: number;
+  };
 }

 export const DEFAULT_CONFIG: ResolvedConfigOptions = {
@@ -178,4 +186,8 @@ export const DEFAULT_CONFIG: ResolvedConfigOptions = {
  },
  sync_disconnect_grace_period_ms: 10000,
  ssla: "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
+  matrix_rtc_session: {
+    delayed_leave_event_delay_ms: 10000,
+    network_error_retry_ms: 1000,
+  },
 };
@@ -84,6 +84,99 @@ describe("getSFUConfigWithOpenID", () => {
    expect.fail("Expected test to throw;");
  });

+  it("should retry without delay params if the JWT service legacy endpoint returns M_BAD_JSON 400", async () => {
+    let callCount = 0;
+
+    fetchMock.post(
+      "https://sfu.example.org/sfu/get",
+      (url, opts) => {
+        callCount++;
+        const body = JSON.parse(opts.body as string);
+
+        // First call: check if it has delay parts and return 400
+        if (callCount === 1) {
+          expect(body).toHaveProperty("delay_id", "mock_delay_id");
+          return {
+            status: 400,
+            body: { errcode: "M_BAD_JSON", error: "Unsupported parameters" },
+          };
+        }
+
+        // Second call: check if delay parts were stripped and return success
+        expect(body).not.toHaveProperty("delay_id");
+        expect(body).not.toHaveProperty("delay_timeout");
+        expect(body).not.toHaveProperty("delay_cs_api_url");
+
+        return {
+          status: 200,
+          body: { url: sfuUrl, jwt: testJWTToken },
+        };
+      },
+      { overwriteRoutes: true },
+    );
+
+    // Note: Assuming getSFUConfigWithOpenID eventually calls getLiveKitJWT
+    const config = await getSFUConfigWithOpenID(
+      matrixClient,
+      ownMemberMock,
+      "https://sfu.example.org",
+      "!example_room_id",
+      {
+        delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
+        delayId: "mock_delay_id",
+      },
+    );
+
+    expect(config.jwt).toBe(testJWTToken);
+    expect(callCount).toBe(2);
+    void (await fetchMock.flush());
+  });
+
+  it("should successfully send delay parameters to the JWT service legacy endpoint", async () => {
+    fetchMock.post(
+      "https://sfu.example.org/sfu/get",
+      (url, opts) => {
+        const body = JSON.parse(opts.body as string);
+
+        // Verify, that the request contains the expected delay parameters
+        if (
+          body.delay_id === "mock_delay_id" &&
+          body.delay_timeout === 10000 &&
+          body.delay_cs_api_url === "https://homeserverserver.org/cs_api"
+        ) {
+          return {
+            status: 200,
+            body: { url: sfuUrl, jwt: testJWTToken },
+          };
+        }
+        return {
+          status: 400,
+          body: { error: "Missing expected delay params" },
+        };
+      },
+      { overwriteRoutes: true },
+    );
+
+    const config = await getSFUConfigWithOpenID(
+      matrixClient,
+      ownMemberMock,
+      "https://sfu.example.org",
+      "!example_room_id",
+      {
+        delayEndpointBaseUrl: "https://homeserverserver.org/cs_api",
+        delayId: "mock_delay_id",
+      },
+    );
+
+    // Prüfe das Ergebnis
+    expect(config).toMatchObject({
+      jwt: testJWTToken,
+      url: sfuUrl,
+    });
+
+    void (await fetchMock.flush());
+  });
+
  it("should try legacy and then new endpoint with delay delegation", async () => {
    fetchMock.post("https://sfu.example.org/get_token", () => {
      return {
@@ -121,7 +214,7 @@ describe("getSFUConfigWithOpenID", () => {
    expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
    expect(calls[0][1]).toStrictEqual({
      // check if it uses correct delayID!
-      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":1000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@@ -131,7 +224,7 @@ describe("getSFUConfigWithOpenID", () => {
    expect(calls[1][0]).toStrictEqual("https://sfu.example.org/sfu/get");

    expect(calls[1][1]).toStrictEqual({
-      body: '{"room":"!example_room_id","device_id":"DEVICE"}',
+      body: '{"room":"!example_room_id","device_id":"DEVICE","delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
      headers: {
        "Content-Type": "application/json",
      },
@@ -176,7 +269,7 @@ describe("getSFUConfigWithOpenID", () => {
    expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
    expect(calls[0][1]).toStrictEqual({
      // check if it uses correct delayID!
-      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":1000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@@ -155,6 +155,8 @@ export async function getSFUConfigWithOpenID(
      serviceUrl,
      roomId,
      openIdToken,
+      opts?.delayEndpointBaseUrl,
+      opts?.delayId,
    );
    logger?.info(`Got JWT from call's active focus URL.`);
    return extractFullConfigFromToken(sfuConfig);
@@ -187,20 +189,62 @@ async function getLiveKitJWT(
  livekitServiceURL: string,
  matrixRoomId: string,
  openIDToken: IOpenIDToken,
+  delayEndpointBaseUrl?: string,
+  delayId?: string,
 ): Promise<{ url: string; jwt: string }> {
-  const res = await doNetworkOperationWithRetry(async () => {
+  interface IDelayParams {
+    delay_id?: string;
+    delay_timeout?: number;
+    delay_cs_api_url?: string;
+  }
+  let bodyDalayParts: IDelayParams = {};
+  // Also check for empty string
+  if (delayId && delayEndpointBaseUrl) {
+    const delayTimeoutMs =
+      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms;
+    bodyDalayParts = {
+      delay_id: delayId,
+      delay_timeout: delayTimeoutMs,
+      delay_cs_api_url: delayEndpointBaseUrl,
+    };
+  }
+
+  const makeRequest = async (delayParts: IDelayParams): Promise<Response> => {
    return await fetch(livekitServiceURL + "/sfu/get", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
-        // This is the actual livekit room alias. For the legacy jwt endpoint simply the room id was used.
+        // The legacy JWT endpoint uses only the matrix room id to calculate the livekit room alias.
+        // However, the livekit room alias is provided as part of the JWT payload.
        room: matrixRoomId,
        openid_token: openIDToken,
        device_id: deviceId,
+        ...delayParts,
      }),
    });
+  };
+
+  const res = await doNetworkOperationWithRetry(async () => {
+    let response = await makeRequest(bodyDalayParts);
+
+    // Old service compatibility check
+    const oldServiceDoesNotSupportDelayParts =
+      response.status === 400 && Object.keys(bodyDalayParts).length > 0;
+    // If http status 400 with M_BAD_JSON and we sent delay parts, retry without them
+    if (oldServiceDoesNotSupportDelayParts) {
+      try {
+        const errorBody = await response.json();
+        if (errorBody.errcode === "M_BAD_JSON") {
+          response = await makeRequest({});
+        }
+      } catch {
+        // If we can't parse the error, treat as real error
+      }
+    }
+
+    return response;
  });

  if (!res.ok) {
@@ -241,7 +285,7 @@ export async function getLiveKitJWTWithDelayDelegation(
  // Also check for empty string
  if (delayId && delayEndpointBaseUrl) {
    const delayTimeoutMs =
-      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms ?? 1000;
+      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms;
    bodyDalayParts = {
      delay_id: delayId,
      delay_timeout: delayTimeoutMs,
@@ -1,79 +0,0 @@
-/*
-Copyright 2023, 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-.toggle {
-  padding: 2px;
-  border: 1px solid var(--cpd-color-border-interactive-secondary);
-  border-radius: var(--cpd-radius-pill-effect);
-  background: var(--cpd-color-bg-canvas-default);
-  display: flex;
-  position: relative;
-}
-
-.toggle input {
-  appearance: none;
-  /* Safari puts a margin on these, which is not removed via appearance: none */
-  margin: 0;
-  block-size: var(--cpd-space-11x);
-  inline-size: var(--cpd-space-11x);
-  cursor: pointer;
-  border-radius: var(--cpd-radius-pill-effect);
-  background: var(--cpd-color-bg-action-secondary-rest);
-  box-shadow: var(--small-drop-shadow);
-  transition: background-color 0.1s;
-}
-
-.toggle svg {
-  display: block;
-  position: absolute;
-  padding: calc(2.5 * var(--cpd-space-1x));
-  pointer-events: none;
-  color: var(--cpd-color-icon-primary);
-  transition: color 0.1s;
-}
-
-.toggle svg:nth-child(2) {
-  inset-inline-start: 2px;
-}
-
-.toggle svg:nth-child(4) {
-  inset-inline-end: 2px;
-}
-
-@media (hover: hover) {
-  .toggle input:hover {
-    background: var(--cpd-color-bg-action-secondary-hovered);
-    box-shadow: none;
-  }
-}
-
-.toggle input:active {
-  background: var(--cpd-color-bg-action-secondary-pressed);
-  box-shadow: none;
-}
-
-.toggle input:checked {
-  background: var(--cpd-color-bg-action-primary-rest);
-}
-
-.toggle input:checked + svg {
-  color: var(--cpd-color-icon-on-solid-primary);
-}
-
-@media (hover: hover) {
-  .toggle input:checked:hover {
-    background: var(--cpd-color-bg-action-primary-hovered);
-  }
-}
-
-.toggle input:checked:active {
-  background: var(--cpd-color-bg-action-primary-pressed);
-}
-
-.toggle input:first-child {
-  margin-inline-end: 5px;
-}
@@ -1,25 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { fn } from "storybook/test";
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { LayoutToggle } from "./LayoutToggle";
-
-const meta = {
-  component: LayoutToggle,
-} satisfies Meta<typeof LayoutToggle>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    layout: "grid",
-    setLayout: fn(),
-  },
-};
@@ -1,59 +0,0 @@
-/*
-Copyright 2023, 2024 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 { type ChangeEvent, type FC, useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { Tooltip } from "@vector-im/compound-web";
-import {
-  SpotlightIcon,
-  GridIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
-import classNames from "classnames";
-
-import styles from "./LayoutToggle.module.css";
-
-export type Layout = "spotlight" | "grid";
-
-type Props = {
-  layout: Layout;
-  setLayout: (layout: Layout) => void;
-  className?: string;
-};
-
-export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
-  const { t } = useTranslation();
-
-  const onChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => setLayout(e.target.value as Layout),
-    [setLayout],
-  );
-
-  return (
-    <form className={classNames(styles.toggle, className)}>
-      <Tooltip label={t("layout_spotlight_label")}>
-        <input
-          type="radio"
-          name="layout"
-          value="spotlight"
-          checked={layout === "spotlight"}
-          onChange={onChange}
-        />
-      </Tooltip>
-      <SpotlightIcon aria-hidden width={24} height={24} />
-      <Tooltip label={t("layout_grid_label")}>
-        <input
-          type="radio"
-          name="layout"
-          value="grid"
-          checked={layout === "grid"}
-          onChange={onChange}
-        />
-      </Tooltip>
-      <GridIcon aria-hidden width={24} height={24} />
-    </form>
-  );
-};
@@ -396,21 +396,23 @@ exports[`InCallView > rendering > renders 1`] = `
          </svg>
        </button>
      </div>
-      <form
-        class="toggle layout"
+      <fieldset
+        aria-label="Layout"
+        class="_toggle_13rnk_9 layout"
+        data-size="lg"
      >
        <input
          aria-labelledby="_r_11_"
-          name="layout"
+          name="layoutMode"
          type="radio"
          value="spotlight"
        />
        <svg
          aria-hidden="true"
          fill="currentColor"
-          height="24"
+          height="1em"
          viewBox="0 0 24 24"
-          width="24"
+          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
@@ -420,23 +422,23 @@ exports[`InCallView > rendering > renders 1`] = `
        <input
          aria-labelledby="_r_16_"
          checked=""
-          name="layout"
+          name="layoutMode"
          type="radio"
          value="grid"
        />
        <svg
          aria-hidden="true"
          fill="currentColor"
-          height="24"
+          height="1em"
          viewBox="0 0 24 24"
-          width="24"
+          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M4 11a.97.97 0 0 1-.712-.287A.97.97 0 0 1 3 10V4q0-.424.288-.712A.97.97 0 0 1 4 3h6q.424 0 .713.288Q11 3.575 11 4v6q0 .424-.287.713A.97.97 0 0 1 10 11zm5-2V5H5v4zm5 12a.97.97 0 0 1-.713-.288A.97.97 0 0 1 13 20v-6q0-.424.287-.713A.97.97 0 0 1 14 13h6q.424 0 .712.287.288.288.288.713v6q0 .424-.288.712A.97.97 0 0 1 20 21zm5-2v-4h-4v4zM4 21a.97.97 0 0 1-.712-.288A.97.97 0 0 1 3 20v-6q0-.424.288-.713A.97.97 0 0 1 4 13h6q.424 0 .713.287.287.288.287.713v6q0 .424-.287.712A.97.97 0 0 1 10 21zm5-2v-4H5v4zm5-8a.97.97 0 0 1-.713-.287A.97.97 0 0 1 13 10V4q0-.424.287-.712A.97.97 0 0 1 14 3h6q.424 0 .712.288Q21 3.575 21 4v6q0 .424-.288.713A.97.97 0 0 1 20 11zm5-2V5h-4v4z"
          />
        </svg>
-      </form>
+      </fieldset>
    </div>
  </div>
 </div>
@@ -778,6 +778,19 @@ export function enterRTCSession(
    };
  }

+  // Calculates `maximumNetworkErrorRetryCount`. The connection is failed if EITHER:
+  // - The /sync loop is unresponsive for > `gracePeriod` ms, or
+  // - A delayed leave event is emitted (after `leaveDelay` ms period).
+  // Note: Use leaveDelay >> gracePeriod for delegated leave events.
+  const gracePeriod = Config.get().sync_disconnect_grace_period_ms;
+  const leaveDelay = matrixRtcSessionConfig?.delayed_leave_event_delay_ms;
+  const retryInterval = matrixRtcSessionConfig?.network_error_retry_ms;
+
+  // Math.min is used to account for the respective worst case: /sync not available or leave event emitted.
+  const maxWaitTime = Math.min(gracePeriod, leaveDelay);
+  const maximumNetworkErrorRetryCount =
+    Math.ceil(maxWaitTime / retryInterval) + 1;
+
  // Multi-sfu does not need a preferred foci list. just the focus that is actually used.
  // TODO where/how do we track errors originating from the ongoing rtcSession?

@@ -803,6 +816,7 @@ export function enterRTCSession(
      membershipEventExpiryMs:
        matrixRtcSessionConfig?.membership_event_expiry_ms,
      unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
+      maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
    },
  );
 }
Author	SHA1	Message	Date
Robin	069074d241	Merge branch 'livekit' into hs/compound-switch	2026-05-11 09:36:08 +02:00
renovate[bot]	78417ff2cb	Update dependency @livekit/components-react to v2.9.21 (#3957 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-05-11 09:05:59 +02:00
renovate[bot]	1025d23ac7	Update dependency livekit-client to v2.18.9 (#3958 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-05-11 08:35:17 +02:00
Valere Fedronic	7010d546bc	Merge pull request #3954 from element-hq/valere/playwright_toast_fixture playwrigth: make dismiss toast more reliable	2026-05-07 14:16:21 +02:00
Valere Fedronic	85bdb007fc	Merge pull request #3952 from element-hq/decline-call Update Playwright test to look for 'Decline' button	2026-05-07 12:25:17 +02:00
Valere	e06f717156	playwrigth: make dismiss toast more reliable	2026-05-07 11:23:59 +02:00
Robin	d50c8e0ca9	Update Playwright test to look for 'Decline' button Since the label of this button is changing in Element Web.	2026-05-06 12:37:31 +02:00
fkwp	147d0f96e0	[Feature] Support delayed event delegation for legacy JWT request (#3946 ) * make `delayed_leave_event_delay_ms` and `network_error_retry_ms` mandatory * Support delegation for legacy jwt request * Calculate `maximumNetworkErrorRetryCount` based on timeouts	2026-05-05 17:33:39 +02:00
Timo	95f772df2b	Add storybook to CI (#3948 ) * add storybook to CI only add storybook with storybook label test names another env name test TestName new default name remove label condition Update pr-deploy.yaml * rename things to check if we actually run the latests ci * cleanup things used for testing * Update deploy-to-netlify.yaml * use package instead of custom environment_name * final cleanup	2026-05-05 15:46:11 +02:00
fkwp	667723aa92	fix nginx config as the missing 50x.html escalates 502 errors to 404 errors (#3947 )	2026-05-05 14:43:03 +02:00
Half-Shot	5db1a20f9f	update snap	2026-04-28 09:29:12 +01:00
Half-Shot	c196e9ea10	Add name	2026-04-27 14:01:04 +01:00
Half-Shot	ef1e8b5d3f	Merge remote-tracking branch 'origin/livekit' into hs/compound-switch	2026-04-27 13:54:46 +01:00
Half-Shot	e3edf3a696	Merge remote-tracking branch 'origin/livekit' into hs/compound-switch	2026-04-27 10:03:41 +01:00
Half-Shot	5aa45714bf	Snap updates	2026-04-27 09:34:46 +01:00
Half-Shot	62751787ca	Use actual package	2026-04-24 13:02:47 +01:00
Half-Shot	9b71070ef8	publish lock changes	2026-04-24 11:57:13 +01:00
Half-Shot	d8be069747	Fix type	2026-04-24 11:54:24 +01:00
Half-Shot	44b6db6ff1	Replace LayoutToggle with compound-web Switch component	2026-04-24 11:47:24 +01:00