Switch to 🛎️

Update dependency @vector-im/compound-design-tokens to v11

docker-compose-playwright.yml

@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6
+    image: ghcr.io/element-hq/element-web:develop@sha256:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6
+    image: ghcr.io/element-hq/element-web:develop@sha256:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167

package.json

@@ -83,7 +83,7 @@
     "@types/sdp-transform": "^2.4.5",
     "@typescript-eslint/utils": "^8.61.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^10.0.0",
+    "@vector-im/compound-design-tokens": "^11.0.0",
     "@vector-im/compound-web": "^10.0.0",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.5",

playwright/fixtures/widget-user.ts

@@ -109,10 +109,15 @@ export const widgetTest = test.extend<MyFixtures>({
       await TestHelpers.dismissInviteUnknownUserModal(ewPage1);
 
       // Accept the invite
+      await TestHelpers.closeReleaseAnnouncement(
+        ewPage2,
+        "Introducing Sections",
+      );
+      await TestHelpers.expandAllSections(ewPage2);
       await expect(
-        ewPage2.getByRole("option", { name: "Welcome Room" }),
+        TestHelpers.roomListItem(ewPage2, "Welcome Room"),
       ).toBeVisible();
-      await ewPage2.getByRole("option", { name: "Welcome Room" }).click();
+      await TestHelpers.roomListItem(ewPage2, "Welcome Room").click();
       await ewPage2.getByRole("button", { name: "Accept" }).click();
       await expect(
         ewPage2
@@ -152,8 +157,12 @@ export const widgetTest = test.extend<MyFixtures>({
       ).toBeVisible();
 
       // Accept the DM invite from brooks
-      // This how playwright record selects the DM invite in the room list
-      await ewPage2.getByRole("button", { name: "Open room" }).click();
+      await TestHelpers.closeReleaseAnnouncement(
+        ewPage2,
+        "Introducing Sections",
+      );
+      await TestHelpers.expandAllSections(ewPage2);
+      await TestHelpers.roomListItem(ewPage2, brooksDisplayName).click();
       await ewPage2.getByRole("button", { name: "Start chatting" }).click();
     }
 

playwright/widget/test-helpers.ts

@@ -11,6 +11,7 @@ import {
   type JSHandle,
   type Page,
   type FrameLocator,
+  type Locator,
 } from "@playwright/test";
 import { type MatrixClient } from "matrix-js-sdk";
 
@@ -203,6 +204,16 @@ export class TestHelpers {
     }
   }
 
+  public static async expandAllSections(page: Page): Promise<void> {
+    try {
+      await page
+        .getByRole("button", { name: "Expand all sections" })
+        .click({ timeout: 2000 });
+    } catch {
+      // Already expanded or button not present
+    }
+  }
+
   public static async createRoom(
     name: string,
     page: Page,
@@ -253,9 +264,9 @@ export class TestHelpers {
     roomName: string,
     page: Page,
   ): Promise<void> {
-    await page.getByRole("option", { name: roomName }).click({
-      timeout: 10000,
-    });
+    await TestHelpers.closeReleaseAnnouncement(page, "Introducing Sections");
+    await TestHelpers.expandAllSections(page);
+    await TestHelpers.roomListItem(page, roomName).click({ timeout: 10000 });
     await page.getByRole("button", { name: "Accept" }).click({
       timeout: 5000,
     });
@@ -350,6 +361,17 @@ export class TestHelpers {
       .click();
   }
 
+  /**
+   * Locates a room in the room list by its name.
+   *
+   * Matches on the aria-label prefix because the item's role differs between
+   * the flat room list (`option`) and the sectioned room list (`button`), and
+   * the label may carry a suffix such as " invitation.".
+   */
+  public static roomListItem(page: Page, roomName: string): Locator {
+    return page.locator(`[aria-label^="Open room ${roomName}"]`);
+  }
+
   /**
    * Switches to a room in the room list by its name.
    * @param page - The EW page
@@ -359,7 +381,8 @@ export class TestHelpers {
     page: Page,
     roomName: string,
   ): Promise<void> {
-    await page.getByRole("option", { name: `Open room ${roomName}` }).click();
+    await TestHelpers.expandAllSections(page);
+    await TestHelpers.roomListItem(page, roomName).click();
   }
 
   public static async dismissInviteUnknownUserModal(page: Page): Promise<void> {

pnpm-lock.yaml

@@ -131,11 +131,11 @@ importers:
         specifier: ^10.2.11
         version: 10.3.1(react@19.2.8)
       '@vector-im/compound-design-tokens':
-        specifier: ^10.0.0
-        version: 10.2.4(@types/react@19.2.18)(react@19.2.8)
+        specifier: ^11.0.0
+        version: 11.0.0(@types/react@19.2.18)(react@19.2.8)
       '@vector-im/compound-web':
         specifier: ^10.0.0
-        version: 10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@vitejs/plugin-react':
         specifier: ^6.0.2
         version: 6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
@@ -3229,8 +3229,8 @@ packages:
     peerDependencies:
       react: '>= 16.8.0'
 
-  '@vector-im/compound-design-tokens@10.2.4':
-    resolution: {integrity: sha512-2aCjhSvJxktPWnvh5s9Xdc0Rd76AfHqbDbN4QjOxo2VIac6zYdLyQbxMUQ5ZeoR9G3vAxILd0H1UvApRfMilpQ==}
+  '@vector-im/compound-design-tokens@11.0.0':
+    resolution: {integrity: sha512-pWz0Q67Xbo8gwzaTeFbTTcM6i29ju6PR7SqyuExr2nIV3j9K785cOInft8FA2CM7PEapkr6TRtJKR/4xtWh2RA==}
     peerDependencies:
       '@adobe/leonardo-contrast-colors': ^1.0.0
       '@types/react': '*'
@@ -8695,12 +8695,12 @@ snapshots:
       '@use-gesture/core': 10.3.1
       react: 19.2.8
 
-  '@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8)':
+  '@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8)':
     optionalDependencies:
       '@types/react': 19.2.18
       react: 19.2.8
 
-  '@vector-im/compound-web@10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@vector-im/compound-web@10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -8712,7 +8712,7 @@ snapshots:
       '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@vector-im/compound-design-tokens': 10.2.4(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-design-tokens': 11.0.0(@types/react@19.2.18)(react@19.2.8)
       classnames: 2.5.1
       react: 19.2.8
       vaul: 1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)

src/button/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Can close reaction dialog 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby="_r_bb_"
+    aria-labelledby="_r_bh_"
     class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
     data-kind="primary"
     data-size="lg"

src/reactions/index.ts

@@ -29,6 +29,8 @@ import waveSoundOgg from "../sound/reactions/wave.ogg?url";
 import waveSoundMp3 from "../sound/reactions/wave.mp3?url";
 import baduntssSoundOgg from "../sound/reactions/baduntss.ogg?url";
 import baduntssSoundMp3 from "../sound/reactions/baduntss.mp3?url";
+import bellSoundOgg from "../sound/reactions/bell.ogg?url";
+import bellSoundMp3 from "../sound/reactions/bell.mp3?url";
 
 export const ElementCallReactionEventType = "io.element.call.reaction";
 
@@ -202,6 +204,15 @@ export const ReactionSet: ReactionOption[] = [
       mp3: baduntssSoundMp3,
     },
   },
+  {
+    emoji: "🛎️",
+    name: "bell",
+    alias: ["ding"],
+    sound: {
+      ogg: bellSoundOgg,
+      mp3: bellSoundMp3,
+    },
+  },
 ];
 
 export interface RaisedHandInfo {

src/sound/LICENCE.md

@@ -10,6 +10,7 @@ The following sound effects have been licensed from Pixabay, under https://pixab
 - `reactions/generic`
 - `reactions/lightbulb`
 - `reactions/party`
+- `reactions/bell`
 
 ### Other
 

src/state/AudioOutput.test.ts

@@ -10,6 +10,7 @@ import * as ComponentsCore from "@livekit/components-core";
 
 import { ObservableScope } from "./ObservableScope";
 import { AudioOutput } from "./MediaDevices";
+import { audioOutput as audioOutputSetting } from "../settings/settings";
 import { withTestScheduler } from "../utils/test";
 
 const BT_SPEAKER = {
@@ -93,6 +94,8 @@ describe("AudioOutput Tests", () => {
 
   beforeEach(() => {
     testScope = new ObservableScope();
+    // Device preferences persist in localStorage across tests
+    audioOutputSetting.setValue(undefined);
   });
 
   afterEach(() => {
@@ -150,7 +153,9 @@ describe("AudioOutput Tests", () => {
 
       expectObservable(audioOutput.selected$).toBe("abcde", {
         a: undefined,
-        b: { id: LAPTOP_SPEAKER.deviceId, virtualEarpiece: false },
+        // No "default" pseudo-device (Firefox): the virtual browser default is
+        // selected until the user picks something.
+        b: { id: "", virtualEarpiece: false },
         c: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
         d: { id: LAPTOP_SPEAKER.deviceId, virtualEarpiece: false },
         e: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
@@ -158,6 +163,61 @@ describe("AudioOutput Tests", () => {
     });
   });
 
+  it("falls back to the browser default when the selected device disappears", () => {
+    withTestScheduler(({ behavior, cold, schedule, expectObservable }) => {
+      vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
+        cold("a---b", {
+          a: DEVICE_LIST_B,
+          // The monitor is unplugged (or a Bluetooth sink changes profile)
+          b: [LAPTOP_SPEAKER],
+        }),
+      );
+
+      const audioOutput = new AudioOutput(
+        behavior("a", { a: true }),
+        testScope,
+      );
+
+      schedule("--a", {
+        a: () => audioOutput.select(MONITOR_SPEAKER.deviceId),
+      });
+
+      expectObservable(audioOutput.selected$).toBe("a-b-c", {
+        a: { id: "", virtualEarpiece: false },
+        b: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
+        // Rather than pinning some other physical device, let the browser route
+        c: { id: "", virtualEarpiece: false },
+      });
+    });
+  });
+
+  it("lists the virtual browser default first when there is no default pseudo-device", () => {
+    withTestScheduler(({ behavior, cold, expectObservable }) => {
+      vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
+        cold("a", { a: DEVICE_LIST_B }),
+      );
+
+      const audioOutput = new AudioOutput(
+        behavior("a", { a: true }),
+        testScope,
+      );
+
+      expectObservable(audioOutput.available$).toBe("a", {
+        a: new Map([
+          ["", { type: "default", name: null }],
+          [
+            LAPTOP_SPEAKER.deviceId,
+            { type: "name", name: LAPTOP_SPEAKER.label },
+          ],
+          [
+            MONITOR_SPEAKER.deviceId,
+            { type: "name", name: MONITOR_SPEAKER.label },
+          ],
+        ]),
+      });
+    });
+  });
+
   it("Test mappings", () => {
     // In a real life setup there would be first a blanked list
     // then the real one.

src/state/CallViewModel/CallViewModel.ts

@@ -563,8 +563,14 @@ export function createCallViewModel$(
   const ownMembershipIdentity: CallMembershipIdentityParts = {
     userId,
     deviceId,
-    // This will only be consumed by the sticky membership manager. So it has no impact on legacy calls.
-    memberId: uuidv4(),
+    // Consumed by the sticky membership manager as `member.id`, *and* stamped
+    // into every to-device key event by the key transport. A pre-sticky
+    // membership advertises `${userId}:${deviceId}` as its `membershipID`
+    // instead, so a uuid there names a member no peer can resolve.
+    memberId:
+      matrixRTCMode === MatrixRTCMode.Matrix_2_0
+        ? uuidv4()
+        : `${userId}:${deviceId}`,
   };
 
   const localTransport =

src/state/MediaDevices.ts

@@ -257,14 +257,21 @@ export class AudioOutput implements MediaDevice<
       map((availableRaw) => {
         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
-        // recognizes.
+        // Create a virtual default audio output for browsers that don't have one
+        // (Firefox, Safari). Its device ID must be the empty string because
+        // that's what setSinkId recognizes. It goes first so that it is the
+        // fallback when no output has been explicitly chosen (or the chosen
+        // one disappears), rather than pinning the first physical device
+        // with setSinkId: pinned sinks are not re-routed by the browser, and
+        // Firefox leaves the audio elements silent when a pinned sink goes
+        // away (e.g. a Bluetooth headset switching profile when its
+        // microphone is opened). We can't know which physical device the
+        // browser default resolves to, so the entry carries no name.
         if (available.size && !available.has("") && !available.has("default"))
-          available.set("", {
-            type: "default",
-            name: availableRaw[0]?.label || null,
-          });
+          available = new Map<string, AudioOutputDeviceLabel>([
+            ["", { type: "default", name: null }],
+            ...available,
+          ]);
         // 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) {