typo

Co-authored-by: Gaël Goinvic <97093369+gaelgatelement@users.noreply.github.com>

.github/workflows/blocked.yaml

@@ -1,16 +1,7 @@
 name: Prevent blocked
 on:
-  # zizmor: ignore[dangerous-triggers]
-  # Reason: This workflow does not checkout code or use secrets.
-  # It only reads labels to set a failure status on the PR.
   pull_request_target:
     types: [opened, labeled, unlabeled, synchronize]
-
-permissions:
-  pull-requests: read
-  # Required to fail the check on the PR
-  statuses: write
-
 jobs:
   prevent-blocked:
     name: Prevent blocked

.github/workflows/build-and-publish-docker.yaml

@@ -44,7 +44,7 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Connect to Tailscale
-        uses: tailscale/github-action@306e68a486fd2350f2bfc3b19fcd143891a4a2d8 # v4
+        uses: tailscale/github-action@53acf823325fe9ca47f4cdaa951f90b4b0de5bb9 # v4
         if: github.event_name != 'pull_request'
         with:
           oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}

.github/workflows/build-element-call.yaml

@@ -45,7 +45,7 @@ jobs:
       - name: Install dependencies
         run: "yarn install --immutable"
       - name: Build Element Call
-        run: yarn run build:"$PACKAGE":"$BUILD_MODE"
+        run: ${{ format('yarn run build:{0}:{1}', inputs.package, inputs.build_mode) }}
         env:
           SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
@@ -54,8 +54,6 @@ jobs:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
           VITE_APP_VERSION: ${{ inputs.vite_app_version }}
           NODE_OPTIONS: "--max-old-space-size=4096"
-          PACKAGE: ${{ inputs.package }}
-          BUILD_MODE: ${{ inputs.build_mode }}
       - name: Upload Artifact
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
         with:

.github/workflows/changelog-label.yml

@@ -1,16 +1,8 @@
 name: PR changelog label
 
 on:
-  # zizmor: ignore[dangerous-triggers]
-  # This is safe because we do not use actions/checkout or execute untrusted code.
-  # Using pull_request_target is necessary to allow status writes for PRs from forks.
   pull_request_target:
     types: [labeled, unlabeled, opened]
-
-permissions:
-  pull-requests: read
-  statuses: write
-
 jobs:
   pr-changelog-label:
     runs-on: ubuntu-latest

.github/workflows/pr-deploy.yaml

@@ -1,7 +1,5 @@
 name: Deploy previews for PRs
 on:
-  # zizmor: ignore[dangerous-triggers]
-  # Reason: This is now restricted to internal PRs only using the 'if' condition below.
   workflow_run:
     workflows: ["Build"]
     types:
@@ -9,14 +7,7 @@ on:
 
 jobs:
   prdetails:
-    # Logic:
-    # 1. Build must be successful
-    # 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.event == 'pull_request' &&
-      github.event.workflow_run.head_repository.full_name == github.repository
+    if: ${{ github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request' }}
     runs-on: ubuntu-latest
     outputs:
       pr_number: ${{ steps.prdetails.outputs.pr_id }}

.github/workflows/publish-embedded-packages.yaml

@@ -22,18 +22,8 @@ jobs:
       TAG: ${{ steps.tag.outputs.TAG }}
     steps:
       - name: Calculate VERSION
-        # Safely store dynamic values in environment variables
-        # to prevent shell injection (template-injection)
-        run: |
-          # The logic is executed within the shell using the env variables
-          if [ "$EVENT_NAME" = "release" ]; then
-            echo "VERSION=$RELEASE_TAG" >> "$GITHUB_ENV"
-          else
-            echo "VERSION=v0.0.0-pre.0" >> "$GITHUB_ENV"
-          fi
-        env:
-          RELEASE_TAG: ${{ github.event.release.tag_name }}
-          EVENT_NAME: ${{ github.event_name }}
+        # We should only use the hard coded test value for a dry run
+        run: echo "VERSION=${{ github.event_name == 'release' && github.event.release.tag_name || 'v0.0.0-pre.0' }}" >> "$GITHUB_ENV"
       - id: dry_run
         name: Set DRY_RUN
         # We perform a dry run for all events except releases.

.github/workflows/zizmor.yml

@@ -20,4 +20,4 @@ jobs:
           persist-credentials: false
 
       - name: Run zizmor 🌈
-        uses: zizmorcore/zizmor-action@71321a20a9ded102f6e9ce5718a2fcec2c4f70d8 # v0.5.2
+        uses: zizmorcore/zizmor-action@0dce2577a4760a2749d8cfb7a84b7d5585ebcb7d # v0.5.0

package.json

@@ -79,7 +79,7 @@
     "@vector-im/compound-design-tokens": "^6.0.0",
     "@vector-im/compound-web": "^8.0.0",
     "@vitejs/plugin-react": "^4.0.1",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/coverage-v8": "^3.0.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.3",
@@ -128,22 +128,17 @@
     "unique-names-generator": "^4.6.0",
     "uuid": "^13.0.0",
     "vaul": "^1.0.0",
-    "vite": "^7.3.0",
+    "vite": "^7.0.0",
     "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-node-stdlib-browser": "^0.2.1",
     "vite-plugin-svgr": "^4.0.0",
-    "vitest": "^4.0.18",
+    "vitest": "^3.0.0",
     "vitest-axe": "^1.0.0-pre.3"
   },
   "resolutions": {
     "@livekit/components-core/rxjs": "^7.8.1",
-    "@livekit/track-processors/@mediapipe/tasks-vision": "^0.10.18",
-    "minimatch": "^10.2.3",
-    "tar": "^7.5.11",
-    "glob": "^10.5.0",
-    "qs": "^6.14.1",
-    "js-yaml": "^4.1.1"
+    "@livekit/track-processors/@mediapipe/tasks-vision": "^0.10.18"
   },
   "packageManager": "yarn@4.7.0"
 }

playwright/create-call.spec.ts

@@ -22,8 +22,8 @@ test("Start a new call then leave and show the feedback screen", async ({
   await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
 
   // Check the button toolbar
-  // await expect(page.getByRole('switch', { name: 'Mute microphone' })).toBeVisible();
-  // await expect(page.getByRole('switch', { name: 'Stop video' })).toBeVisible();
+  // await expect(page.getByRole('button', { name: 'Mute microphone' })).toBeVisible();
+  // await expect(page.getByRole('button', { name: 'Stop video' })).toBeVisible();
   await expect(page.getByRole("button", { name: "Settings" })).toBeVisible();
   await expect(page.getByRole("button", { name: "End call" })).toBeVisible();
 

playwright/reconnect.spec.ts

@@ -49,12 +49,12 @@ test("can only interact with header and footer while reconnecting", async ({
   ).toBeVisible();
 
   // Tab order should jump directly from header to footer, skipping media tiles
-  await page.getByRole("switch", { name: "Mute microphone" }).focus();
+  await page.getByRole("button", { name: "Mute microphone" }).focus();
   await expect(
-    page.getByRole("switch", { name: "Mute microphone" }),
+    page.getByRole("button", { name: "Mute microphone" }),
   ).toBeFocused();
   await page.keyboard.press("Tab");
-  await expect(page.getByRole("switch", { name: "Stop video" })).toBeFocused();
+  await expect(page.getByRole("button", { name: "Stop video" })).toBeFocused();
   // Most critically, we should be able to press the hangup button
   await page.getByRole("button", { name: "End call" }).click();
 });

playwright/widget/huddle-call.test.ts

@@ -55,10 +55,13 @@ widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
     const frame = user.page
       .locator('iframe[title="Element Call"]')
       .contentFrame();
+
     // No lobby, should start with video on
-    await expect(
-      frame.getByRole("switch", { name: "Stop video", checked: true }),
-    ).toBeVisible();
+    // The only way to know if it is muted or not is to look at the data-kind attribute..
+    const videoButton = frame.getByTestId("incall_videomute");
+    await expect(videoButton).toBeVisible();
+    // video should be on
+    await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
   }
 
   // We should see 5 video tiles everywhere now
@@ -98,15 +101,13 @@ widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
   const florianFrame = florian.page
     .locator('iframe[title="Element Call"]')
     .contentFrame();
-  const florianVideoButton = florianFrame.getByRole("switch", {
-    name: /video/,
-  });
-  await expect(florianVideoButton).toHaveAccessibleName("Stop video");
-  await expect(florianVideoButton).toBeChecked();
-  await florianVideoButton.click();
+  const florianMuteButton = florianFrame.getByTestId("incall_videomute");
+  await florianMuteButton.click();
   // Now the button should indicate we can start video
-  await expect(florianVideoButton).toHaveAccessibleName("Start video");
-  await expect(florianVideoButton).not.toBeChecked();
+  await expect(florianMuteButton).toHaveAttribute(
+    "aria-label",
+    /^Start video$/,
+  );
 
   // wait a bit for the state to propagate
   await valere.page.waitForTimeout(3000);

playwright/widget/pip-call-button-interaction.test.ts

@@ -1,73 +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 { expect, test } from "@playwright/test";
-
-import { widgetTest } from "../fixtures/widget-user.ts";
-import { HOST1, TestHelpers } from "./test-helpers.ts";
-
-widgetTest("Footer interaction in PiP", async ({ addUser, browserName }) => {
-  test.skip(
-    browserName === "firefox",
-    "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
-  );
-
-  test.slow();
-
-  const valere = await addUser("Valere", HOST1);
-
-  const callRoom = "CallRoom";
-  await TestHelpers.createRoom("CallRoom", valere.page);
-
-  await TestHelpers.createRoom("OtherRoom", valere.page);
-
-  await TestHelpers.switchToRoomNamed(valere.page, callRoom);
-
-  // Start the call as Valere
-  await TestHelpers.startCallInCurrentRoom(valere.page, false);
-  await expect(
-    valere.page.locator('iframe[title="Element Call"]'),
-  ).toBeVisible();
-
-  await TestHelpers.joinCallFromLobby(valere.page);
-  // wait a bit so that the PIP has rendered
-  await valere.page.waitForTimeout(600);
-
-  // Switch to the other room, the call should go to PIP
-  await TestHelpers.switchToRoomNamed(valere.page, "OtherRoom");
-
-  // We should see the PIP overlay
-  const iFrame = valere.page
-    .locator('iframe[title="Element Call"]')
-    .contentFrame();
-
-  {
-    // Check for a bug where the video had the wrong fit in PIP
-    const audioBtn = iFrame.getByRole("switch", { name: /microphone/ });
-    const videoBtn = iFrame.getByRole("switch", { name: /video/ });
-    await expect(
-      iFrame.getByRole("button", { name: "End call" }),
-    ).toBeVisible();
-    await expect(audioBtn).toBeVisible();
-    await expect(videoBtn).toBeVisible();
-    await expect(audioBtn).toHaveAccessibleName("Mute microphone");
-    await expect(audioBtn).toBeChecked();
-    await expect(videoBtn).toHaveAccessibleName("Stop video");
-    await expect(videoBtn).toBeChecked();
-
-    await videoBtn.click();
-    await audioBtn.click();
-
-    // stop hovering on any of the buttons
-    await iFrame.getByTestId("videoTile").hover();
-
-    await expect(audioBtn).toHaveAccessibleName("Unmute microphone");
-    await expect(audioBtn).toBeChecked();
-    await expect(videoBtn).toHaveAccessibleName("Start video");
-    await expect(videoBtn).not.toBeChecked();
-  }
-});

playwright/widget/pip-call.test.ts

@@ -40,20 +40,22 @@ widgetTest("Put call in PIP", async ({ addUser, browserName }) => {
 
   await TestHelpers.joinCallInCurrentRoom(timo.page);
 
-  const frame = timo.page
-    .locator('iframe[title="Element Call"]')
-    .contentFrame();
+  {
+    const frame = timo.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
 
-  // check that the video is on
-  await expect(
-    frame.getByRole("switch", { name: "Stop video", checked: true }),
-  ).toBeVisible();
+    const videoButton = frame.getByTestId("incall_videomute");
+    await expect(videoButton).toBeVisible();
+    // check that the video is on
+    await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
+  }
 
   // Switch to the other room, the call should go to PIP
   await TestHelpers.switchToRoomNamed(valere.page, "DoubleTask");
 
   // We should see the PIP overlay
-  await expect(valere.page.getByTestId("widget-pip-container")).toBeVisible();
+  await expect(valere.page.locator(".mx_WidgetPip_overlay")).toBeVisible();
 
   {
     // wait a bit so that the PIP has rendered the video

playwright/widget/voice-call-dm.spec.ts

@@ -51,36 +51,34 @@ widgetTest(
       .contentFrame();
 
     // ASSERT the button states for whistler (the callee)
-    // video should be off by default in a voice call
-    await expect(
-      whistlerFrame.getByRole("switch", {
-        name: "Start video",
-        checked: false,
-      }),
-    ).toBeVisible();
-    // audio should be on for the voice call
-    await expect(
-      whistlerFrame.getByRole("switch", {
-        name: "Mute microphone",
-        checked: true,
-      }),
-    ).toBeVisible();
+    {
+      // The only way to know if it is muted or not is to look at the data-kind attribute..
+      const videoButton = whistlerFrame.getByTestId("incall_videomute");
+      // video should be off by default in a voice call
+      await expect(videoButton).toHaveAttribute("aria-label", /^Start video$/);
+
+      const audioButton = whistlerFrame.getByTestId("incall_mute");
+      // audio should be on for the voice call
+      await expect(audioButton).toHaveAttribute(
+        "aria-label",
+        /^Mute microphone$/,
+      );
+    }
 
     // ASSERT the button states for brools (the caller)
-    // video should be off by default in a voice call
-    await expect(
-      whistlerFrame.getByRole("switch", {
-        name: "Start video",
-        checked: false,
-      }),
-    ).toBeVisible();
-    // audio should be on for the voice call
-    await expect(
-      whistlerFrame.getByRole("switch", {
-        name: "Mute microphone",
-        checked: true,
-      }),
-    ).toBeVisible();
+    {
+      // The only way to know if it is muted or not is to look at the data-kind attribute..
+      const videoButton = brooksFrame.getByTestId("incall_videomute");
+      // video should be off by default in a voice call
+      await expect(videoButton).toHaveAttribute("aria-label", /^Start video$/);
+
+      const audioButton = brooksFrame.getByTestId("incall_mute");
+      // audio should be on for the voice call
+      await expect(audioButton).toHaveAttribute(
+        "aria-label",
+        /^Mute microphone$/,
+      );
+    }
 
     // In order to confirm that the call is disconnected we will check that the message composer is shown again.
     // So first we need to confirm that it is hidden when in the call.
@@ -92,7 +90,10 @@ widgetTest(
     ).not.toBeVisible();
 
     // ASSERT hanging up on one side ends the call for both
-    await brooksFrame.getByRole("button", { name: "End call" }).click();
+    {
+      const hangupButton = brooksFrame.getByTestId("incall_leave");
+      await hangupButton.click();
+    }
 
     // The widget should be closed on both sides and the timeline should be back on screen
     await expect(
@@ -141,30 +142,34 @@ widgetTest(
       .contentFrame();
 
     // ASSERT the button states for whistler (the callee)
-    // video should be off by default in a video call
-    await expect(
-      whistlerFrame.getByRole("switch", { name: "Stop video", checked: true }),
-    ).toBeVisible();
-    // audio should be on too
-    await expect(
-      whistlerFrame.getByRole("switch", {
-        name: "Mute microphone",
-        checked: true,
-      }),
-    ).toBeVisible();
+    {
+      // The only way to know if it is muted or not is to look at the data-kind attribute..
+      const videoButton = whistlerFrame.getByTestId("incall_videomute");
+      // video should be on by default in a voice call
+      await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
+
+      const audioButton = whistlerFrame.getByTestId("incall_mute");
+      // audio should be on for the voice call
+      await expect(audioButton).toHaveAttribute(
+        "aria-label",
+        /^Mute microphone$/,
+      );
+    }
 
     // ASSERT the button states for brools (the caller)
-    // video should be off by default in a video call
-    await expect(
-      whistlerFrame.getByRole("switch", { name: "Stop video", checked: true }),
-    ).toBeVisible();
-    // audio should be on too
-    await expect(
-      whistlerFrame.getByRole("switch", {
-        name: "Mute microphone",
-        checked: true,
-      }),
-    ).toBeVisible();
+    {
+      // The only way to know if it is muted or not is to look at the data-kind attribute..
+      const videoButton = brooksFrame.getByTestId("incall_videomute");
+      // video should be on by default in a voice call
+      await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
+
+      const audioButton = brooksFrame.getByTestId("incall_mute");
+      // audio should be on for the voice call
+      await expect(audioButton).toHaveAttribute(
+        "aria-label",
+        /^Mute microphone$/,
+      );
+    }
 
     // In order to confirm that the call is disconnected we will check that the message composer is shown again.
     // So first we need to confirm that it is hidden when in the call.
@@ -176,7 +181,10 @@ widgetTest(
     ).not.toBeVisible();
 
     // ASSERT hanging up on one side ends the call for both
-    await brooksFrame.getByRole("button", { name: "End call" }).click();
+    {
+      const hangupButton = brooksFrame.getByTestId("incall_leave");
+      await hangupButton.click();
+    }
 
     // The widget should be closed on both sides and the timeline should be back on screen
     await expect(

src/button/Button.tsx

@@ -22,25 +22,23 @@ import {
 import styles from "./Button.module.css";
 
 interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
-  enabled: boolean;
-  size?: "sm" | "lg";
+  muted: boolean;
 }
 
-export const MicButton: FC<MicButtonProps> = ({ enabled, ...props }) => {
+export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
   const { t } = useTranslation();
-  const Icon = enabled ? MicOnSolidIcon : MicOffSolidIcon;
-  const label = enabled
-    ? t("mute_microphone_button_label")
-    : t("unmute_microphone_button_label");
+  const Icon = muted ? MicOffSolidIcon : MicOnSolidIcon;
+  const label = muted
+    ? t("unmute_microphone_button_label")
+    : t("mute_microphone_button_label");
 
   return (
     <Tooltip label={label}>
       <CpdButton
         iconOnly
+        aria-label={label}
         Icon={Icon}
-        kind={enabled ? "primary" : "secondary"}
-        role="switch"
-        aria-checked={enabled}
+        kind={muted ? "primary" : "secondary"}
         {...props}
       />
     </Tooltip>
@@ -48,25 +46,23 @@ export const MicButton: FC<MicButtonProps> = ({ enabled, ...props }) => {
 };
 
 interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> {
-  enabled: boolean;
-  size?: "sm" | "lg";
+  muted: boolean;
 }
 
-export const VideoButton: FC<VideoButtonProps> = ({ enabled, ...props }) => {
+export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
   const { t } = useTranslation();
-  const Icon = enabled ? VideoCallSolidIcon : VideoCallOffSolidIcon;
-  const label = enabled
-    ? t("stop_video_button_label")
-    : t("start_video_button_label");
+  const Icon = muted ? VideoCallOffSolidIcon : VideoCallSolidIcon;
+  const label = muted
+    ? t("start_video_button_label")
+    : t("stop_video_button_label");
 
   return (
     <Tooltip label={label}>
       <CpdButton
         iconOnly
+        aria-label={label}
         Icon={Icon}
-        kind={enabled ? "primary" : "secondary"}
-        role="switch"
-        aria-checked={enabled}
+        kind={muted ? "primary" : "secondary"}
         {...props}
       />
     </Tooltip>
@@ -75,7 +71,6 @@ export const VideoButton: FC<VideoButtonProps> = ({ enabled, ...props }) => {
 
 interface ShareScreenButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
-  size: "sm" | "lg";
 }
 
 export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
@@ -93,19 +88,13 @@ export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
         iconOnly
         Icon={ShareScreenSolidIcon}
         kind={enabled ? "primary" : "secondary"}
-        role="switch"
-        aria-checked={enabled}
         {...props}
       />
     </Tooltip>
   );
 };
 
-interface EndCallButtonProps extends ComponentPropsWithoutRef<"button"> {
-  size?: "sm" | "lg";
-}
-
-export const EndCallButton: FC<EndCallButtonProps> = ({
+export const EndCallButton: FC<ComponentPropsWithoutRef<"button">> = ({
   className,
   ...props
 }) => {
@@ -116,6 +105,7 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
       <CpdButton
         className={classNames(className, styles.endCall)}
         iconOnly
+        aria-label={t("hangup_button_label")}
         Icon={EndCallIcon}
         destructive
         {...props}
@@ -124,10 +114,9 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
   );
 };
 
-interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
-  size?: "sm" | "lg";
-}
-export const SettingsButton: FC<SettingsButtonProps> = (props) => {
+export const SettingsButton: FC<ComponentPropsWithoutRef<"button">> = (
+  props,
+) => {
   const { t } = useTranslation();
 
   return (

src/button/ReactionToggleButton.tsx

@@ -166,7 +166,6 @@ export function ReactionPopupMenu({
 interface ReactionToggleButtonProps extends ComponentPropsWithoutRef<"button"> {
   identifier: string;
   vm: CallViewModel;
-  size?: "sm" | "lg";
 }
 
 export function ReactionToggleButton({

src/livekit/MatrixAudioRenderer.test.tsx

@@ -30,13 +30,7 @@ import {
 } from "../utils/test";
 import { initializeWidget } from "../widget";
 initializeWidget();
-export const TestAudioContextConstructor = vi.fn(
-  class {
-    public constructor() {
-      return testAudioContext;
-    }
-  },
-);
+export const TestAudioContextConstructor = vi.fn(() => testAudioContext);
 
 const MediaDevicesProvider = MediaDevicesContext.MediaDevicesContext.Provider;
 

src/room/InCallView.module.css

@@ -108,9 +108,22 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
-@media (max-height: 800px) {
-  .footer {
-    padding-block: var(--cpd-space-8x);
+@media (max-width: 370px) {
+  .shareScreen {
+    display: none;
+  }
+
+  @media (max-height: 400px) {
+    .footer {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: 320px) {
+  .invite,
+  .raiseHand {
+    display: none;
   }
 }
 
@@ -120,27 +133,9 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
-@media (max-width: 370px) {
-  .shareScreen {
-    display: none;
-  }
-
-  /* PIP custom css */
-  @media (max-height: 400px) {
-    .shareScreen {
-      display: flex;
-    }
-    .footer {
-      padding-block-start: var(--cpd-space-3x);
-      padding-block-end: var(--cpd-space-2x);
-    }
-  }
-}
-
-@media (max-width: 320px) {
-  .invite,
-  .raiseHand {
-    display: none;
+@media (max-height: 800px) {
+  .footer {
+    padding-block: var(--cpd-space-8x);
   }
 }
 

src/room/InCallView.tsx

@@ -640,20 +640,17 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const buttons: JSX.Element[] = [];
 
-  const buttonSize = layout.type === "pip" ? "sm" : "lg";
   buttons.push(
     <MicButton
-      size={buttonSize}
       key="audio"
-      enabled={audioEnabled}
+      muted={!audioEnabled}
       onClick={toggleAudio ?? undefined}
       disabled={toggleAudio === null}
       data-testid="incall_mute"
     />,
     <VideoButton
-      size={buttonSize}
       key="video"
-      enabled={videoEnabled}
+      muted={!videoEnabled}
       onClick={toggleVideo ?? undefined}
       disabled={toggleVideo === null}
       data-testid="incall_videomute"
@@ -662,7 +659,6 @@ export const InCallView: FC<InCallViewProps> = ({
   if (vm.toggleScreenSharing !== null) {
     buttons.push(
       <ShareScreenButton
-        size={buttonSize}
         key="share_screen"
         className={styles.shareScreen}
         enabled={sharingScreen}
@@ -674,7 +670,6 @@ export const InCallView: FC<InCallViewProps> = ({
   if (supportsReactions) {
     buttons.push(
       <ReactionToggleButton
-        size={buttonSize}
         vm={vm}
         key="raise_hand"
         className={styles.raiseHand}
@@ -683,17 +678,10 @@ export const InCallView: FC<InCallViewProps> = ({
     );
   }
   if (layout.type !== "pip")
-    buttons.push(
-      <SettingsButton
-        size={buttonSize}
-        key="settings"
-        onClick={openSettings}
-      />,
-    );
+    buttons.push(<SettingsButton key="settings" onClick={openSettings} />);
 
   buttons.push(
     <EndCallButton
-      size={buttonSize}
       key="end_call"
       onClick={function (): void {
         vm.hangup();

src/room/LobbyView.tsx

@@ -230,12 +230,12 @@ export const LobbyView: FC<Props> = ({
           {recentsButtonInFooter && recentsButton}
           <div className={inCallStyles.buttons}>
             <MicButton
-              enabled={audioEnabled}
+              muted={!audioEnabled}
               onClick={toggleAudio ?? undefined}
               disabled={toggleAudio === null}
             />
             <VideoButton
-              enabled={videoEnabled}
+              muted={!videoEnabled}
               onClick={toggleVideo ?? undefined}
               disabled={toggleVideo === null}
             />

src/room/__snapshots__/InCallView.test.tsx.snap

@@ -285,14 +285,14 @@ exports[`InCallView > rendering > renders 1`] = `
         class="buttons"
       >
         <button
-          aria-checked="false"
           aria-disabled="true"
+          aria-label="Unmute microphone"
           aria-labelledby="_r_8_"
           class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
-          data-kind="secondary"
+          data-kind="primary"
           data-size="lg"
           data-testid="incall_mute"
-          role="switch"
+          role="button"
           tabindex="0"
         >
           <svg
@@ -309,14 +309,14 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-checked="false"
           aria-disabled="true"
+          aria-label="Start video"
           aria-labelledby="_r_d_"
           class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
-          data-kind="secondary"
+          data-kind="primary"
           data-size="lg"
           data-testid="incall_videomute"
-          role="switch"
+          role="button"
           tabindex="0"
         >
           <svg
@@ -354,6 +354,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
+          aria-label="End call"
           aria-labelledby="_r_n_"
           class="_button_13vu4_8 endCall _has-icon_13vu4_60 _icon-only_13vu4_53 _destructive_13vu4_110"
           data-kind="primary"

src/settings/DeveloperSettingsTab.test.tsx

@@ -5,16 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { afterEach, describe, expect, it, type Mock, vi } from "vitest";
-import { render, waitFor, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { TooltipProvider } from "@vector-im/compound-web";
+import { describe, expect, it, vi } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+import { type Room as LivekitRoom } from "livekit-client";
 
 import type { MatrixClient } from "matrix-js-sdk";
-import type { Room as LivekitRoom } from "livekit-client";
 import { DeveloperSettingsTab } from "./DeveloperSettingsTab";
-import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
-import { customLivekitUrl as customLivekitUrlSetting } from "./settings";
+
 // Mock url params hook to avoid environment-dependent snapshot churn.
 vi.mock("../UrlParams", () => ({
   useUrlParams: (): { mocked: boolean; answer: number } => ({
@@ -23,14 +20,6 @@ vi.mock("../UrlParams", () => ({
   }),
 }));
 
-// IMPORTANT: mock the same specifier used by DeveloperSettingsTab
-vi.mock("../livekit/openIDSFU", () => ({
-  getSFUConfigWithOpenID: vi.fn().mockResolvedValue({
-    url: "mock-url",
-    jwt: "mock-jwt",
-  }),
-}));
-
 // Provide a minimal mock of a Livekit Room structure used by the component.
 function createMockLivekitRoom(
   wsUrl: string,
@@ -97,7 +86,6 @@ describe("DeveloperSettingsTab", () => {
     const { container } = render(
       <DeveloperSettingsTab
         client={client}
-        roomId={"#room:example.org"}
         livekitRooms={livekitRooms}
         env={{ MY_MOCK_ENV: 10, ENV: "test" } as unknown as ImportMetaEnv}
       />,
@@ -111,141 +99,4 @@ describe("DeveloperSettingsTab", () => {
 
     expect(container).toMatchSnapshot();
   });
-  describe("custom livekit url", () => {
-    afterEach(() => {
-      customLivekitUrlSetting.setValue(null);
-    });
-    const client = {
-      doesServerSupportUnstableFeature: vi.fn().mockResolvedValue(true),
-      getCrypto: () => ({ getVersion: (): string => "x" }),
-      getUserId: () => "@u:hs",
-      getDeviceId: () => "DEVICE",
-    } as unknown as MatrixClient;
-    it("will not update custom livekit url without roomId", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TooltipProvider>
-          <DeveloperSettingsTab
-            client={client}
-            env={{} as unknown as ImportMetaEnv}
-          />
-        </TooltipProvider>,
-      );
-
-      const input = screen.getByLabelText("Custom Livekit-url");
-      await user.clear(input);
-      await user.type(input, "wss://example.livekit.invalid");
-
-      const saveButton = screen.getByRole("button", { name: "Save" });
-      await user.click(saveButton);
-      expect(getSFUConfigWithOpenID).not.toHaveBeenCalled();
-
-      expect(customLivekitUrlSetting.getValue()).toBe(null);
-    });
-    it("will not update custom livekit url without text in input", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TooltipProvider>
-          <DeveloperSettingsTab
-            client={client}
-            roomId="#testRoom"
-            env={{} as unknown as ImportMetaEnv}
-          />
-        </TooltipProvider>,
-      );
-
-      const input = screen.getByLabelText("Custom Livekit-url");
-      await user.clear(input);
-
-      const saveButton = screen.getByRole("button", { name: "Save" });
-      await user.click(saveButton);
-      expect(getSFUConfigWithOpenID).not.toHaveBeenCalled();
-
-      expect(customLivekitUrlSetting.getValue()).toBe(null);
-    });
-    it("will not update custom livekit url when pressing cancel", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TooltipProvider>
-          <DeveloperSettingsTab
-            client={client}
-            roomId="#testRoom"
-            env={{} as unknown as ImportMetaEnv}
-          />
-        </TooltipProvider>,
-      );
-
-      const input = screen.getByLabelText("Custom Livekit-url");
-      await user.clear(input);
-      await user.type(input, "wss://example.livekit.invalid");
-
-      const cancelButton = screen.getByRole("button", {
-        name: "Reset overwrite",
-      });
-      await user.click(cancelButton);
-      expect(getSFUConfigWithOpenID).not.toHaveBeenCalled();
-
-      expect(customLivekitUrlSetting.getValue()).toBe(null);
-    });
-    it("will update custom livekit url", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TooltipProvider>
-          <DeveloperSettingsTab
-            client={client}
-            roomId="#testRoom"
-            env={{} as unknown as ImportMetaEnv}
-          />
-        </TooltipProvider>,
-      );
-
-      const input = screen.getByLabelText("Custom Livekit-url");
-      await user.clear(input);
-      await user.type(input, "wss://example.livekit.valid");
-
-      const saveButton = screen.getByRole("button", { name: "Save" });
-      await user.click(saveButton);
-      expect(getSFUConfigWithOpenID).toHaveBeenCalledWith(
-        expect.anything(),
-        expect.anything(),
-        "wss://example.livekit.valid",
-        "#testRoom",
-      );
-
-      expect(customLivekitUrlSetting.getValue()).toBe(
-        "wss://example.livekit.valid",
-      );
-    });
-    it("will show error on invalid url", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TooltipProvider>
-          <DeveloperSettingsTab
-            client={client}
-            roomId="#testRoom"
-            env={{} as unknown as ImportMetaEnv}
-          />
-        </TooltipProvider>,
-      );
-
-      const input = screen.getByLabelText("Custom Livekit-url");
-      await user.clear(input);
-      await user.type(input, "wss://example.livekit.valid");
-
-      const saveButton = screen.getByRole("button", { name: "Save" });
-      (getSFUConfigWithOpenID as Mock).mockImplementation(() => {
-        throw new Error("Invalid URL");
-      });
-      await user.click(saveButton);
-      expect(
-        screen.getByText("invalid URL (did not update)"),
-      ).toBeInTheDocument();
-      expect(customLivekitUrlSetting.getValue()).toBe(null);
-    });
-  });
 });

src/settings/DeveloperSettingsTab.tsx

@@ -22,7 +22,6 @@ import {
 import { logger } from "matrix-js-sdk/lib/logger";
 import {
   EditInPlace,
-  ErrorMessage,
   Root as Form,
   Heading,
   HelpMessage,
@@ -46,11 +45,9 @@ import {
 } from "./settings";
 import styles from "./DeveloperSettingsTab.module.css";
 import { useUrlParams } from "../UrlParams";
-import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
 
 interface Props {
   client: MatrixClient;
-  roomId?: string;
   livekitRooms?: {
     room: LivekitRoom;
     url: string;
@@ -63,7 +60,6 @@ interface Props {
 export const DeveloperSettingsTab: FC<Props> = ({
   client,
   livekitRooms,
-  roomId,
   env,
 }) => {
   const { t } = useTranslation();
@@ -101,8 +97,6 @@ export const DeveloperSettingsTab: FC<Props> = ({
     alwaysShowIphoneEarpieceSetting,
   );
 
-  const [customLivekitUrlUpdateError, setCustomLivekitUrlUpdateError] =
-    useState<string | null>(null);
   const [customLivekitUrl, setCustomLivekitUrl] = useSetting(
     customLivekitUrlSetting,
   );
@@ -240,36 +234,14 @@ export const DeveloperSettingsTab: FC<Props> = ({
         savingLabel={t("developer_mode.custom_livekit_url.saving")}
         cancelButtonLabel={t("developer_mode.custom_livekit_url.reset")}
         onSave={useCallback(
-          async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
-            if (
-              roomId === undefined ||
-              customLivekitUrlTextBuffer === "" ||
-              customLivekitUrlTextBuffer === null
-            ) {
-              setCustomLivekitUrl(null);
-              return;
-            }
-
-            try {
-              const userId = client.getUserId();
-              const deviceId = client.getDeviceId();
-
-              if (userId === null || deviceId === null) {
-                throw new Error("Invalid user or device ID");
-              }
-              await getSFUConfigWithOpenID(
-                client,
-                { userId, deviceId, memberId: "" },
-                customLivekitUrlTextBuffer,
-                roomId,
-              );
-              setCustomLivekitUrlUpdateError(null);
-              setCustomLivekitUrl(customLivekitUrlTextBuffer);
-            } catch {
-              setCustomLivekitUrlUpdateError("invalid URL (did not update)");
-            }
+          (e: React.FormEvent<HTMLFormElement>) => {
+            setCustomLivekitUrl(
+              customLivekitUrlTextBuffer === ""
+                ? null
+                : customLivekitUrlTextBuffer,
+            );
           },
-          [customLivekitUrlTextBuffer, setCustomLivekitUrl, client, roomId],
+          [setCustomLivekitUrl, customLivekitUrlTextBuffer],
         )}
         value={customLivekitUrlTextBuffer ?? ""}
         onChange={useCallback(
@@ -284,12 +256,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
           },
           [setCustomLivekitUrl],
         )}
-        serverInvalid={customLivekitUrlUpdateError !== null}
-      >
-        {customLivekitUrlUpdateError !== null && (
-          <ErrorMessage>{customLivekitUrlUpdateError}</ErrorMessage>
-        )}
-      </EditInPlace>
+      />
       <Heading as="h3" type="body" weight="semibold" size="lg">
         {t("developer_mode.matrixRTCMode.title")}
       </Heading>

src/settings/SettingsModal.tsx

@@ -213,7 +213,6 @@ export const SettingsModal: FC<Props> = ({
         env={import.meta.env}
         client={client}
         livekitRooms={livekitRooms}
-        roomId={roomId}
       />
     ),
   };

src/settings/settings.ts

@@ -34,20 +34,15 @@ export class Setting<T> {
 
     this._value$ = new BehaviorSubject(initialValue);
     this.value$ = this._value$;
-    this._lastUpdateReason$ = new BehaviorSubject<string | null>(null);
-    this.lastUpdateReason$ = this._lastUpdateReason$;
   }
 
   private readonly key: string;
 
   private readonly _value$: BehaviorSubject<T>;
-  private readonly _lastUpdateReason$: BehaviorSubject<string | null>;
   public readonly value$: Behavior<T>;
-  public readonly lastUpdateReason$: Behavior<string | null>;
 
-  public readonly setValue = (value: T, reason?: string): void => {
+  public readonly setValue = (value: T): void => {
     this._value$.next(value);
-    this._lastUpdateReason$.next(reason ?? null);
     localStorage.setItem(this.key, JSON.stringify(value));
   };
   public readonly getValue = (): T => {

src/state/CallViewModel/CallViewModel.ts

@@ -63,7 +63,7 @@ import {
   playReactionsSound,
   showReactions,
 } from "../../settings/settings";
-import { isFirefox, platform } from "../../Platform";
+import { isFirefox } from "../../Platform";
 import { setPipEnabled$ } from "../../controls";
 import { TileStore } from "../TileStore";
 import { gridLikeLayout } from "../GridLikeLayout";
@@ -1271,7 +1271,7 @@ export function createCallViewModel$(
       switchMap((mode) => {
         switch (mode) {
           case "pip":
-            return of(platform === "desktop" ? true : false);
+            return of(false);
           case "normal":
           case "narrow":
             return of(true);

src/state/PipLayout.ts

@@ -5,7 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { platform } from "../Platform.ts";
 import { type PipLayout, type PipLayoutMedia } from "./layout-types.ts";
 import { type TileStore } from "./TileStore";
 
@@ -17,11 +16,7 @@ export function pipLayout(
   prevTiles: TileStore,
 ): [PipLayout, TileStore] {
   const update = prevTiles.from(0);
-  // Dont maximise in pip on EW since we want the rounded corners and the footer
-  update.registerSpotlight(
-    media.spotlight,
-    platform === "desktop" ? false : true,
-  );
+  update.registerSpotlight(media.spotlight, true);
   const tiles = update.build();
   return [
     {

src/useAudioContext.test.tsx

@@ -90,18 +90,11 @@ export const testAudioContext = {
   createStereoPanner: vi.fn().mockReturnValue(panNode),
   close: vi.fn().mockResolvedValue(undefined),
 };
-
-const TestAudioContext = vi.fn(
-  class {
-    public constructor() {
-      return testAudioContext;
-    }
-  },
-);
+export const TestAudioContextConstructor = vi.fn(() => testAudioContext);
 
 let user: UserEvent;
 beforeEach(() => {
-  vi.stubGlobal("AudioContext", TestAudioContext);
+  vi.stubGlobal("AudioContext", TestAudioContextConstructor);
   user = userEvent.setup();
 });
 

src/utils/test.ts

@@ -443,10 +443,10 @@ export class MockRTCSession extends TypedEventEmitter<
   public asMockedSession(): MockedObject<MatrixRTCSession> {
     const session = this as unknown as MockedObject<MatrixRTCSession>;
 
-    session.reemitEncryptionKeys = vi
+    vi.mocked(session).reemitEncryptionKeys = vi
       .fn<() => void>()
       .mockReturnValue(undefined);
-    session.getOldestMembership = vi
+    vi.mocked(session).getOldestMembership = vi
       .fn<() => CallMembership | undefined>()
       .mockReturnValue(this.memberships[0]);