test(room view): add test for enableReadReceiptsAndMarkersOnActivity

For the multiroom module, we display several room views at the same
time. In order to avoid all the rooms to send read receipts and markers
automatically when we are interacting with the UI, we add
`enableReadReceiptsAndMarkersOnActivity`props.

When at false, the timeline doesn't listen to user activity to send
these receipts. Only when the room is focused, marker and read receipts
are updated.

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
     parserOptions: {
         project: ["./tsconfig.json"],
+        tsconfigRootDir: __dirname,
     },
     env: {
         browser: true,

.github/labels.yml

@@ -279,3 +279,6 @@
 - name: "Z-Flaky-Test-Disabled"
   description: "The flaking test has been disabled"
   color: "ededed"
+- name: "Z-Skip-Sonar"
+  description: "Skip SonarQube analysis for this PR"
+  color: "ededed"

.github/workflows/tests.yml

@@ -103,7 +103,7 @@ jobs:
               run: exit 1
 
             - name: Skip SonarCloud in merge queue
-              if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
+              if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true' || contains(github.event.pull_request.labels.*.name, 'Z-Skip-Sonar')
               uses: guibranco/github-status-action-v2@5530c593759f489bba08272e96986ffc571c1ea1
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/update-topics.yaml

@@ -26,13 +26,13 @@ jobs:
               env:
                   HS_URL: ${{ secrets.BETABOT_HS_URL }}
                   LOBBY_ROOM_ID: ${{ secrets.ROOM_ID }}
-                  PUBLIC_ROOM_ID: "!IemiTbwVankHTFiEoh:matrix.org"
-                  ANNOUNCEMENT_ROOM_ID: "!bijaLdadorKgNGtHdA:matrix.org"
+                  PUBLIC_DISCUSSION_ROOM_ID: "!xUW4PpAe1CmThA3r2wI8IrgwwsK006-zqWdJCljpd10"
+                  ANNOUNCEMENT_ROOM_ID: "!ars5ndgI6IIYZXECiJ-u8YljHNzShJn3nHdB-3rYI2M"
                   TOKEN: ${{ secrets.BETABOT_ACCESS_TOKEN }}
                   RELEASE_STATUS: "Release status: ${{ inputs.expected_status }} expected ${{ inputs.expected_date }}"
               with:
                   script: |
-                      const { HS_URL, TOKEN, RELEASE_STATUS, LOBBY_ROOM_ID, PUBLIC_ROOM_ID, ANNOUNCEMENT_ROOM_ID } = process.env;
+                      const { HS_URL, TOKEN, RELEASE_STATUS, LOBBY_ROOM_ID, PUBLIC_DISCUSSION_ROOM_ID, ANNOUNCEMENT_ROOM_ID } = process.env;
 
                       const repo = context.repo;
                       const { data } = await github.rest.repos.getLatestRelease({
@@ -71,18 +71,23 @@ jobs:
                           const data = await res.json();
                           console.log(roomId, "got event", data);
 
+                          if (!regex.test(data.topic)) {
+                              core.setFailed("Topic format is incorrect for room " + roomId);
+                              return;
+                          }
+
                           const topic = data.topic.replace(regex, releaseTopic);
                           if (topic === data.topic) {
                               console.log(roomId, "nothing to do");
                               return;
                           }
                           if (data["org.matrix.msc3765.topic"]) {
-                              data["org.matrix.msc3765.topic"].forEach(d => {
+                              data["org.matrix.msc3765.topic"]?.["m.text"].forEach(d => {
                                   d.body = d.body.replace(regex, releaseTopic);
                               });
                           }
                           if (data["m.topic"]) {
-                              data["m.topic"].forEach(d => {
+                              data["m.topic"]?.["m.text"].forEach(d => {
                                   d.body = d.body.replace(regex, releaseTopic);
                               });
                           }
@@ -97,12 +102,18 @@ jobs:
                           });
 
                           if (res.ok) {
-                              console.log(roomId, "topic updated:", topic);
+                              const resJson = res.json();
+                              if (resJson.errcode) {
+                                  core.setFailed(`Error updating ${roomId}: ${resJson.error}`);
+                              } else {
+                                  console.log(roomId, "topic updated:", topic);
+                              }
                           } else {
-                              console.log(roomId, await res.text());
+                              const errText = await res.text();
+                              core.setFailed(`Error updating ${roomId}: ${errText}`);
                           }
                       }
 
                       await updateReleaseInTopic(LOBBY_ROOM_ID);
-                      await updateReleaseInTopic(PUBLIC_ROOM_ID);
+                      await updateReleaseInTopic(PUBLIC_DISCUSSION_ROOM_ID);
                       await updateReleaseInTopic(ANNOUNCEMENT_ROOM_ID);

CHANGELOG.md

@@ -1,3 +1,39 @@
+Changes in [1.12.6](https://github.com/element-hq/element-web/releases/tag/v1.12.6) (2025-12-03)
+================================================================================================
+This release fixes a bug where 1:1 calling was incorrectly not available if no Element Call focus was set.
+
+## 🐛 Bug Fixes
+
+* Add option to pick call options for voice calls. ([#31413](https://github.com/element-hq/element-web/pull/31413)).
+
+Changes in [1.12.5](https://github.com/element-hq/element-web/releases/tag/v1.12.5) (2025-12-02)
+================================================================================================
+## ✨ Features
+
+* Update Emojibase to v17 ([#31307](https://github.com/element-hq/element-web/pull/31307)). Contributed by @t3chguy.
+* Adds tooltip for compose menu ([#31122](https://github.com/element-hq/element-web/pull/31122)). Contributed by @byteplow.
+* Add option to hide pinned message banner in room view ([#31296](https://github.com/element-hq/element-web/pull/31296)). Contributed by @florianduros.
+* update twemoji to not monochromise emoji with BLACK in their name ([#31281](https://github.com/element-hq/element-web/pull/31281)). Contributed by @ara4n.
+* upgrade to twemoji 17.0.2 and fix #14695 ([#31267](https://github.com/element-hq/element-web/pull/31267)). Contributed by @ara4n.
+* Add options to hide right panel in room view ([#31252](https://github.com/element-hq/element-web/pull/31252)). Contributed by @florianduros.
+* Delayed event management: split endpoints, no auth  ([#31183](https://github.com/element-hq/element-web/pull/31183)). Contributed by @AndrewFerr.
+* Support using Element Call for voice calls in DMs ([#30817](https://github.com/element-hq/element-web/pull/30817)). Contributed by @Half-Shot.
+* Improve screen reader accessibility of auth pages ([#31236](https://github.com/element-hq/element-web/pull/31236)). Contributed by @t3chguy.
+* Add posthog tracking for key backup toasts ([#31195](https://github.com/element-hq/element-web/pull/31195)). Contributed by @Half-Shot.
+
+## 🐛 Bug Fixes
+
+* Return to using Fira Code as the default monospace font ([#31302](https://github.com/element-hq/element-web/pull/31302)). Contributed by @ara4n.
+* Fix case of home screen being displayed erroneously  ([#31301](https://github.com/element-hq/element-web/pull/31301)). Contributed by @langleyd.
+* Fix message edition and reply when multiple rooms at displayed the same moment ([#31280](https://github.com/element-hq/element-web/pull/31280)). Contributed by @florianduros.
+* Key storage out of sync: reset key backup when needed ([#31279](https://github.com/element-hq/element-web/pull/31279)). Contributed by @uhoreg.
+* Fix invalid events crashing entire room rather than just their tile ([#31256](https://github.com/element-hq/element-web/pull/31256)). Contributed by @t3chguy.
+* Fix expand button of space panel getting cut off at the edges ([#31259](https://github.com/element-hq/element-web/pull/31259)). Contributed by @MidhunSureshR.
+* Fix pill buttons in dialogs ([#31246](https://github.com/element-hq/element-web/pull/31246)). Contributed by @dbkr.
+* Fix blank sections at the top and bottom of the member list when scrolling ([#31198](https://github.com/element-hq/element-web/pull/31198)). Contributed by @langleyd.
+* Fix emoji category selection with keyboard ([#31162](https://github.com/element-hq/element-web/pull/31162)). Contributed by @langleyd.
+
+
 Changes in [1.12.4](https://github.com/element-hq/element-web/releases/tag/v1.12.4) (2025-11-18)
 ================================================================================================
 ## ✨ Features

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.12.4",
+    "version": "1.12.6",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -70,7 +70,6 @@
     },
     "resolutions": {
         "**/pretty-format/react-is": "19.2.0",
-        "@playwright/test": "1.56.1",
         "@types/react": "19.2.6",
         "@types/react-dom": "19.2.3",
         "oidc-client-ts": "3.4.1",
@@ -82,7 +81,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@element-hq/element-web-module-api": "1.6.0",
+        "@element-hq/element-web-module-api": "1.8.0",
         "@element-hq/web-shared-components": "link:packages/shared-components",
         "@fontsource/fira-code": "^5",
         "@fontsource/inter": "^5",
@@ -93,8 +92,8 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^10.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@vector-im/compound-design-tokens": "^6.0.0",
-        "@vector-im/compound-web": "^8.1.2",
+        "@vector-im/compound-design-tokens": "6.4.1",
+        "@vector-im/compound-web": "^8.3.1",
         "@vector-im/matrix-wysiwyg": "2.40.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
@@ -185,7 +184,7 @@
         "@element-hq/element-call-embedded": "0.16.1",
         "@element-hq/element-web-playwright-common": "^2.0.0",
         "@peculiar/webcrypto": "^1.4.3",
-        "@playwright/test": "^1.50.1",
+        "@playwright/test": "1.57.0",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
         "@sentry/webpack-plugin": "^4.0.0",
         "@storybook/react-vite": "^10.0.7",

packages/shared-components/.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     ],
     parserOptions: {
         project: ["./tsconfig.json"],
+        tsconfigRootDir: __dirname,
     },
     env: {
         browser: true,

packages/shared-components/.storybook/preview.tsx

@@ -6,6 +6,7 @@ import React, { useLayoutEffect } from "react";
 import { setLanguage } from "../src/utils/i18n";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { StoryContext } from "storybook/internal/csf";
+import { I18nApi, I18nContext } from "../src";
 
 export const globalTypes = {
     theme: {
@@ -70,9 +71,17 @@ const withTooltipProvider: Decorator = (Story) => {
     );
 };
 
+const withI18nProvider: Decorator = (Story) => {
+    return (
+        <I18nContext.Provider value={new I18nApi()}>
+            <Story />
+        </I18nContext.Provider>
+    );
+};
+
 const preview: Preview = {
     tags: ["autodocs"],
-    decorators: [withThemeProvider, withTooltipProvider],
+    decorators: [withThemeProvider, withTooltipProvider, withI18nProvider],
     parameters: {
         options: {
             storySort: {

packages/shared-components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@element-hq/web-shared-components",
-    "version": "0.0.0-test.8",
+    "version": "0.0.0-test.11",
     "description": "Shared components for Element",
     "author": "New Vector Ltd.",
     "repository": {
@@ -45,7 +45,11 @@
         "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"",
         "test:storybook:update": "playwright-screenshots --entrypoint yarn --with-node-modules && playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
     },
+    "resolutions": {
+        "playwright": "1.57.0"
+    },
     "dependencies": {
+        "@element-hq/element-web-module-api": "^1.8.0",
         "@vector-im/compound-design-tokens": "^6.3.0",
         "classnames": "^2.5.1",
         "counterpart": "^0.18.6",
@@ -57,7 +61,7 @@
     },
     "devDependencies": {
         "@element-hq/element-web-playwright-common": "^2.0.0",
-        "@playwright/test": "^1.50.1",
+        "@playwright/test": "1.57.0",
         "@storybook/addon-a11y": "^10.0.7",
         "@storybook/addon-designs": "^11.0.1",
         "@storybook/addon-docs": "^10.0.7",

packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.test.tsx

@@ -14,6 +14,8 @@ import { fireEvent } from "@testing-library/dom";
 import * as stories from "./AudioPlayerView.stories.tsx";
 import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView";
 import { MockViewModel } from "../../viewmodel/MockViewModel.ts";
+import { I18nContext } from "../../utils/i18nContext.ts";
+import { I18nApi } from "../../index.ts";
 
 const { Default, NoMediaName, NoSize, HasError } = composeStories(stories);
 
@@ -64,7 +66,9 @@ describe("AudioPlayerView", () => {
             error: false,
         });
 
-        render(<AudioPlayerView vm={vm} />);
+        render(<AudioPlayerView vm={vm} />, {
+            wrapper: ({ children }) => <I18nContext.Provider value={new I18nApi()}>{children}</I18nContext.Provider>,
+        });
         await user.click(screen.getByRole("button", { name: "Play" }));
         expect(togglePlay).toHaveBeenCalled();
 

packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.tsx

@@ -14,7 +14,7 @@ import { Flex } from "../../utils/Flex";
 import styles from "./AudioPlayerView.module.css";
 import { PlayPauseButton } from "../PlayPauseButton";
 import { type PlaybackState } from "../playback";
-import { _t } from "../../utils/i18n";
+import { useI18n } from "../../utils/i18nContext";
 import { formatBytes } from "../../utils/FormattingUtils";
 import { Clock } from "../Clock";
 import { SeekBar } from "../SeekBar";
@@ -90,6 +90,8 @@ interface AudioPlayerViewProps {
  * ```
  */
 export function AudioPlayerView({ vm }: Readonly<AudioPlayerViewProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+
     const {
         playbackState,
         mediaName = _t("timeline|m.audio|unnamed_audio"),

packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`AudioPlayerView renders the audio player in default state 1`] = `
         tabindex="-1"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -114,7 +114,7 @@ exports[`AudioPlayerView renders the audio player in error state 1`] = `
         tabindex="-1"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -210,7 +210,7 @@ exports[`AudioPlayerView renders the audio player without media name 1`] = `
         tabindex="-1"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -301,7 +301,7 @@ exports[`AudioPlayerView renders the audio player without size 1`] = `
         tabindex="-1"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg

packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.tsx

@@ -11,7 +11,7 @@ import Play from "@vector-im/compound-design-tokens/assets/web/icons/play-solid"
 import Pause from "@vector-im/compound-design-tokens/assets/web/icons/pause-solid";
 
 import styles from "./PlayPauseButton.module.css";
-import { _t } from "../../utils/i18n";
+import { useI18n } from "../../utils/i18nContext";
 
 export interface PlayPauseButtonProps extends HTMLAttributes<HTMLButtonElement> {
     /**
@@ -46,6 +46,8 @@ export function PlayPauseButton({
     togglePlay,
     ...rest
 }: Readonly<PlayPauseButtonProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+
     const label = playing ? _t("action|pause") : _t("action|play");
 
     return (

packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`PlayPauseButton renders the button in default state 1`] = `
     tabindex="0"
   >
     <div
-      class="_indicator-icon_zr2a0_17"
+      class="_indicator-icon_147l5_17"
       style="--cpd-icon-button-size: 100%;"
     >
       <svg
@@ -45,7 +45,7 @@ exports[`PlayPauseButton renders the button in playing state 1`] = `
     tabindex="0"
   >
     <div
-      class="_indicator-icon_zr2a0_17"
+      class="_indicator-icon_147l5_17"
       style="--cpd-icon-button-size: 100%;"
     >
       <svg

packages/shared-components/src/audio/SeekBar/SeekBar.tsx

@@ -10,7 +10,7 @@ import { throttle } from "lodash";
 import classNames from "classnames";
 
 import style from "./SeekBar.module.css";
-import { _t } from "../../utils/i18n";
+import { useI18n } from "../../utils/i18nContext";
 
 export interface SeekBarProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /**
@@ -33,6 +33,8 @@ interface ISeekCSS extends CSSProperties {
  * ```
  */
 export function SeekBar({ value = 0, className, ...rest }: Readonly<SeekBarProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+
     const [newValue, setNewValue] = useState(value);
     // Throttle the value setting to avoid excessive re-renders
     const setThrottledValue = useMemo(() => throttle(setNewValue, 10), []);

packages/shared-components/src/composer/Banner/Banner.stories.tsx

@@ -65,3 +65,9 @@ export const WithAvatarImage: Story = {
         avatar: <img alt="Example" src="https://picsum.photos/32/32" />,
     },
 };
+
+export const WithoutClose: Story = {
+    args: {
+        onClose: undefined,
+    },
+};

packages/shared-components/src/composer/Banner/Banner.tsx

@@ -41,7 +41,7 @@ interface BannerProps {
     /**
      * Called when the user presses the "dismiss" button.
      */
-    onClose: MouseEventHandler<HTMLButtonElement>;
+    onClose?: MouseEventHandler<HTMLButtonElement>;
 }
 
 /**
@@ -82,9 +82,11 @@ export function Banner({
             <span className={styles.content}>{children}</span>
             <div className={styles.actions}>
                 {actions}
-                <Button kind="secondary" size="sm" onClick={onClose}>
-                    {_t("action|dismiss")}
-                </Button>
+                {onClose && (
+                    <Button kind="secondary" size="sm" onClick={onClose}>
+                        {_t("action|dismiss")}
+                    </Button>
+                )}
             </div>
         </div>
     );

packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap

@@ -37,7 +37,7 @@ exports[`AvatarWithDetails renders a banner with an action 1`] = `
       class="actions"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -46,7 +46,7 @@ exports[`AvatarWithDetails renders a banner with an action 1`] = `
         encryption|withdraw_verification_action
       </button>
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -83,7 +83,7 @@ exports[`AvatarWithDetails renders a banner with an avatar iamge 1`] = `
       class="actions"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -129,7 +129,7 @@ exports[`AvatarWithDetails renders a critical banner 1`] = `
       class="actions"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -179,7 +179,7 @@ exports[`AvatarWithDetails renders a default banner 1`] = `
       class="actions"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -230,7 +230,7 @@ exports[`AvatarWithDetails renders a info banner 1`] = `
       class="actions"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -276,7 +276,7 @@ exports[`AvatarWithDetails renders a success banner 1`] = `
       class="actions"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="secondary"
         data-size="sm"
         role="button"

packages/shared-components/src/index.ts

@@ -23,10 +23,12 @@ export * from "./utils/Flex";
 
 // Utils
 export * from "./utils/i18n";
+export * from "./utils/i18nContext";
 export * from "./utils/humanize";
 export * from "./utils/DateUtils";
 export * from "./utils/numbers";
 export * from "./utils/FormattingUtils";
+export * from "./utils/I18nApi";
 
 // MVVM
 export * from "./viewmodel";

packages/shared-components/src/pill-input/Pill/Pill.tsx

@@ -12,7 +12,7 @@ import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"
 
 import { Flex } from "../../utils/Flex";
 import styles from "./Pill.module.css";
-import { _t } from "../../utils/i18n";
+import { useI18n } from "../../utils/i18nContext";
 
 export interface PillProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
     /**
@@ -39,6 +39,7 @@ export interface PillProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick
  */
 export function Pill({ className, children, label, onClick, ...props }: PropsWithChildren<PillProps>): JSX.Element {
     const id = useId();
+    const { translate: _t } = useI18n();
 
     return (
         <Flex

packages/shared-components/src/pill-input/Pill/__snapshots__/Pill.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`Pill renders the pill 1`] = `
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg

packages/shared-components/src/rich-list/RichItem/RichItem.stories.tsx

@@ -8,8 +8,8 @@
 import React from "react";
 import { fn } from "storybook/test";
 
-import { RichItem } from "./RichItem";
 import type { Meta, StoryFn } from "@storybook/react-vite";
+import { RichItem } from "./RichItem";
 
 const currentTimestamp = new Date("2025-03-09T12:00:00Z").getTime();
 

packages/shared-components/src/rich-list/RichItem/RichItem.tsx

@@ -9,8 +9,8 @@ import React, { type HTMLAttributes, type JSX, memo } from "react";
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 
 import styles from "./RichItem.module.css";
-import { humanizeTime } from "../../utils/humanize";
 import { Flex } from "../../utils/Flex";
+import { useI18n } from "../../utils/i18nContext";
 
 export interface RichItemProps extends HTMLAttributes<HTMLLIElement> {
     /**
@@ -63,6 +63,8 @@ export const RichItem = memo(function RichItem({
     selected,
     ...props
 }: RichItemProps): JSX.Element {
+    const i18n = useI18n();
+
     return (
         <li
             className={styles.richItem}
@@ -77,7 +79,7 @@ export const RichItem = memo(function RichItem({
             <span className={styles.description}>{description}</span>
             {timestamp && (
                 <span role="timer" className={styles.timestamp}>
-                    {humanizeTime(timestamp)}
+                    {i18n.humanizeTime(timestamp)}
                 </span>
             )}
         </li>

packages/shared-components/src/test/utils/jest-matrix-react.tsx

@@ -16,16 +16,24 @@ import React, { type ReactElement } from "react";
 import { render, type RenderOptions } from "@testing-library/react";
 import { TooltipProvider } from "@vector-im/compound-web";
 
+import { I18nApi, I18nContext } from "../..";
+
 const wrapWithTooltipProvider = (Wrapper: RenderOptions["wrapper"]) => {
     return ({ children }: { children: React.ReactNode }) => {
         if (Wrapper) {
             return (
-                <Wrapper>
-                    <TooltipProvider>{children}</TooltipProvider>
-                </Wrapper>
+                <I18nContext.Provider value={new I18nApi()}>
+                    <Wrapper>
+                        <TooltipProvider>{children}</TooltipProvider>
+                    </Wrapper>
+                </I18nContext.Provider>
             );
         } else {
-            return <TooltipProvider>{children}</TooltipProvider>;
+            return (
+                <I18nContext.Provider value={new I18nApi()}>
+                    <TooltipProvider>{children}</TooltipProvider>
+                </I18nContext.Provider>
+            );
         }
     };
 };

packages/shared-components/src/utils/I18nApi.test.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type TranslationKey } from "../i18nKeys";
+import { I18nApi } from "./I18nApi";
+
+describe("I18nApi", () => {
+    it("can register a translation and use it", () => {
+        const i18n = new I18nApi();
+        i18n.register({
+            "hello.world": {
+                en: "Hello, World!",
+            },
+        });
+
+        expect(i18n.translate("hello.world" as TranslationKey)).toBe("Hello, World!");
+    });
+});

packages/shared-components/src/utils/I18nApi.ts

@@ -6,16 +6,17 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type I18nApi as II18nApi, type Variables, type Translations } from "@element-hq/element-web-module-api";
-import { registerTranslations } from "@element-hq/web-shared-components";
 
-import { _t, getCurrentLanguage, type TranslationKey } from "../languageHandler.tsx";
+import { humanizeTime } from "./humanize";
+import { _t, getLocale, registerTranslations } from "./i18n";
+import { type TranslationKey } from "../i18nKeys";
 
 export class I18nApi implements II18nApi {
     /**
      * Read the current language of the user in IETF Language Tag format
      */
     public get language(): string {
-        return getCurrentLanguage();
+        return getLocale();
     }
 
     /**
@@ -44,4 +45,8 @@ export class I18nApi implements II18nApi {
     public translate(key: TranslationKey, variables?: Variables): string {
         return _t(key, variables);
     }
+
+    public humanizeTime(timeMillis: number): string {
+        return humanizeTime(timeMillis, this);
+    }
 }

packages/shared-components/src/utils/humanize.ts

@@ -6,7 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { _t } from "./i18n";
+import { type I18nApi } from "@element-hq/element-web-module-api";
+
+import { _t as _tFromModule } from "./i18n";
 
 // These are the constants we use for when to break the text
 const MILLISECONDS_RECENT = 15000;
@@ -21,13 +23,15 @@ const HOURS_1_DAY = 26;
  * @param {number} timeMillis The time in millis to compare against.
  * @returns {string} The humanized time.
  */
-export function humanizeTime(timeMillis: number): string {
+export function humanizeTime(timeMillis: number, i18nApi?: I18nApi): string {
     const now = Date.now();
     let msAgo = now - timeMillis;
     const minutes = Math.abs(Math.ceil(msAgo / 60000));
     const hours = Math.ceil(minutes / 60);
     const days = Math.ceil(hours / 24);
 
+    const _t = i18nApi?.translate ?? _tFromModule;
+
     if (msAgo >= 0) {
         // Past
         if (msAgo <= MILLISECONDS_RECENT) return _t("time|few_seconds_ago");

packages/shared-components/src/utils/i18nContext.ts

@@ -0,0 +1,27 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { createContext, useContext } from "react";
+import { type I18nApi } from "@element-hq/element-web-module-api";
+
+export const I18nContext = createContext<I18nApi | null>(null);
+I18nContext.displayName = "I18nContext";
+
+/**
+ * A hook to get the i18n API from the context. Will throw if no i18n context is found.
+ * @throws If no i18n context is found
+ * @returns The i18n API from the context
+ */
+export function useI18n(): I18nApi {
+    const i18n = useContext(I18nContext);
+
+    if (!i18n) {
+        throw new Error("useI18n must be used within an I18nContext.Provider");
+    }
+
+    return i18n;
+}

packages/shared-components/yarn.lock

@@ -352,6 +352,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@element-hq/element-web-module-api@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@element-hq/element-web-module-api/-/element-web-module-api-1.8.0.tgz#95aa4ec22609cf0f4a7f24274473af0645a16f2a"
+  integrity sha512-lMiDA9ubP3mZZupIMT8T3wS0riX30rYZj3pFpdP4cfZhkWZa3FJFStokAy5OnaHyENC7Px1cqkBGqilOWewY/A==
+
 "@element-hq/element-web-playwright-common@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@element-hq/element-web-playwright-common/-/element-web-playwright-common-2.0.0.tgz#30cf741a33c69540b4bc434f5349d0fe900bc611"
@@ -1046,12 +1051,12 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.2.9.tgz#d229a7b7f9dac167a156992ef23c7f023653f53b"
   integrity sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==
 
-"@playwright/test@^1.50.1":
-  version "1.56.1"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.56.1.tgz#6e3bf3d0c90c5cf94bf64bdb56fd15a805c8bd3f"
-  integrity sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==
+"@playwright/test@1.57.0":
+  version "1.57.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.57.0.tgz#a14720ffa9ed7ef7edbc1f60784fc6134acbb003"
+  integrity sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==
   dependencies:
-    playwright "1.56.1"
+    playwright "1.57.0"
 
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
@@ -5771,31 +5776,17 @@ pkg-types@^2.3.0:
     exsolve "^1.0.7"
     pathe "^2.0.3"
 
-playwright-core@1.56.0, playwright-core@>=1.2.0:
-  version "1.56.0"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.56.0.tgz#14b40ea436551b0bcefe19c5bfb8d1804c83739c"
-  integrity sha512-1SXl7pMfemAMSDn5rkPeZljxOCYAmQnYLBTExuh6E8USHXGSX3dx6lYZN/xPpTz1vimXmPA9CDnILvmJaB8aSQ==
+playwright-core@1.57.0, playwright-core@>=1.2.0:
+  version "1.57.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.57.0.tgz#3dcc9a865af256fa9f0af0d67fc8dd54eecaebf5"
+  integrity sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==
 
-playwright-core@1.56.1:
-  version "1.56.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.56.1.tgz#24a66481e5cd33a045632230aa2c4f0cb6b1db3d"
-  integrity sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==
-
-playwright@1.56.1:
-  version "1.56.1"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.56.1.tgz#62e3b99ddebed0d475e5936a152c88e68be55fbf"
-  integrity sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==
+playwright@1.57.0, playwright@^1.14.0:
+  version "1.57.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.57.0.tgz#74d1dacff5048dc40bf4676940b1901e18ad0f46"
+  integrity sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==
   dependencies:
-    playwright-core "1.56.1"
-  optionalDependencies:
-    fsevents "2.3.2"
-
-playwright@^1.14.0:
-  version "1.56.0"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.56.0.tgz#71c533c61da33e95812f8c6fa53960e073548d9a"
-  integrity sha512-X5Q1b8lOdWIE4KAoHpW3SE8HvUB+ZZsUoN64ZhjnN8dOb1UpujxBtENGiZFE+9F/yhzJwYa+ca3u43FeLbboHA==
-  dependencies:
-    playwright-core "1.56.0"
+    playwright-core "1.57.0"
   optionalDependencies:
     fsevents "2.3.2"
 

playwright/e2e/left-panel/room-list-panel/room-list.spec.ts

@@ -299,9 +299,7 @@ test.describe("Room list", () => {
             const publicRoom = roomListView.getByRole("option", { name: "low priority room" });
 
             // Make room low priority
-            await publicRoom.hover();
-            const roomItemMenu = publicRoom.getByRole("button", { name: "More Options" });
-            await roomItemMenu.click();
+            await publicRoom.click({ button: "right" });
             await page.getByRole("menuitemcheckbox", { name: "Low priority" }).click();
 
             // Should have low priority decoration
@@ -309,8 +307,8 @@ test.describe("Room list", () => {
                 "This is a low priority room",
             );
 
-            // focus the user menu to avoid to have hover decoration
-            await page.getByRole("button", { name: "User menu" }).focus();
+            // focus the header to avoid to have hover decoration
+            await page.getByTestId("room-list-header").click();
             await expect(publicRoom).toMatchScreenshot("room-list-item-low-priority.png");
         });
 
@@ -450,12 +448,11 @@ test.describe("Room list", () => {
             await bot.joinRoom(roomId);
 
             const room = roomListView.getByRole("option", { name: "mark as unread" });
-            await room.hover();
-            await room.getByRole("button", { name: "More Options" }).click();
+            await room.click({ button: "right" });
             await page.getByRole("menuitem", { name: "mark as unread" }).click();
 
-            // focus the user menu to avoid to have hover decoration
-            await page.getByRole("button", { name: "User menu" }).focus();
+            // focus the header to avoid to have hover decoration
+            await page.getByTestId("room-list-header").click();
 
             await expect(room).toMatchScreenshot("room-list-item-mark-as-unread.png");
         });

playwright/e2e/login/login.spec.ts

@@ -0,0 +1,30 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { expect, test } from "../../element-web-test";
+import { logIntoElement } from "../crypto/utils.ts";
+
+test.describe(`With force_verification: true`, () => {
+    test.use({
+        config: {
+            force_verification: true,
+        },
+    });
+
+    test("Can reload after login", async ({ page, credentials }) => {
+        // The page should reload fine when going to the base client URL
+        // Regression test for https://github.com/element-hq/element-web/issues/31203
+        await logIntoElement(page, credentials);
+
+        // We should auto-upload the E2EE keys, and show a welcome page
+        await expect(page.getByRole("heading", { name: `Welcome ${credentials.displayName}` })).toBeVisible();
+
+        await page.goto("/");
+
+        await expect(page.getByRole("heading", { name: `Welcome ${credentials.displayName}` })).toBeVisible();
+    });
+});

playwright/e2e/room_options/marked_unread.spec.ts

@@ -47,12 +47,11 @@ test.describe("Mark as Unread", () => {
         await page.goto("/#/room/" + dummyRoomId);
 
         const roomTile = page.getByLabel(TEST_ROOM_NAME);
-        await roomTile.focus();
-        await roomTile.getByRole("button", { name: "More Options" }).click();
+        await roomTile.click({ button: "right" });
         await page.getByRole("menuitem", { name: "Mark as unread" }).click();
 
-        // focus the user menu to avoid to have hover decoration
-        await page.getByRole("button", { name: "User menu" }).focus();
+        // focus another room to make the notification decoration appear (room options are display on hover)
+        await page.getByRole("option", { name: "Open room Room of no consequence" }).click();
 
         await expect(roomTile.getByTestId("notification-decoration")).toBeVisible();
     });

playwright/e2e/voip/element-call.spec.ts

@@ -1,16 +1,26 @@
 /*
 Copyright 2025 New Vector Ltd.
-
+Copyright (C) 2025 Element Creations Ltd
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
+import { readFile } from "node:fs/promises";
+import { type Page } from "playwright-core";
+
 import type { EventType, Preset } from "matrix-js-sdk/src/matrix";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
 import { test, expect } from "../../element-web-test";
 import type { Credentials } from "../../plugins/homeserver";
 import { Bot } from "../../pages/bot";
 
+// Load a copy of our fake Element Call app, and the latest widget API.
+// The fake call app does *just* enough to convince Element Web that a call is ongoing
+// and functions like PiP work. It does not actually do anything though, to limit the
+// surface we test.
+const widgetApi = readFile("node_modules/matrix-widget-api/dist/api.min.js", "utf-8");
+const fakeCallClient = readFile("playwright/sample-files/fake-element-call.html", "utf-8");
+
 function assertCommonCallParameters(
     url: URLSearchParams,
     hash: URLSearchParams,
@@ -89,11 +99,13 @@ test.describe("Element Call", () => {
     });
 
     test.beforeEach(async ({ page, user, app }) => {
-        // Mock a widget page. It doesn't need to actually be Element Call.
-        await page.route("/widget.html", async (route) => {
+        // Mock a widget page. We use a fake version of Element Call here.
+        // We should match on things after .html as these widgets get a ton of extra params.
+        await page.route(/\/widget.html.+/, async (route) => {
             await route.fulfill({
                 status: 200,
-                body: "<p> Hello world </p>",
+                // Do enough to
+                body: (await fakeCallClient).replace("widgetCodeHere", await widgetApi),
             });
         });
         await app.settings.setValue(
@@ -419,4 +431,147 @@ test.describe("Element Call", () => {
             expect(hash.get("returnToLobby")).toEqual("true");
         });
     });
+
+    test.describe("Switching rooms", () => {
+        let charlie: Bot;
+        test.use({
+            room: async ({ page, app, user, homeserver, bot }, use) => {
+                charlie = new Bot(page, homeserver, { displayName: "Charlie" });
+                await charlie.prepareClient();
+                const roomId = await app.client.createRoom({
+                    name: "TestRoom",
+                    invite: [bot.credentials.userId, charlie.credentials.userId],
+                });
+                await app.client.createRoom({
+                    name: "OtherRoom",
+                });
+                await use({ roomId });
+            },
+        });
+
+        async function openAndJoinCall(page: Page, existing = false) {
+            if (existing) {
+                await page.getByTestId("join-call-button").click();
+            } else {
+                await page.getByRole("button", { name: "Video call" }).click();
+                await page.getByRole("menuitem", { name: "Element Call" }).click();
+            }
+            const iframe = page.locator("iframe");
+            await expect(iframe).toBeVisible();
+            const frameUrlStr = await page.locator("iframe").getAttribute("src");
+            const callFrame = page.frame({ url: frameUrlStr });
+            await callFrame.getByRole("button", { name: "Join Call" }).click();
+            await expect(callFrame.getByText("In call", { exact: true })).toBeVisible();
+
+            // Wait for Element Web to pickup the RTC session and update the room list entry.
+            await expect(await page.getByTestId("notification-decoration")).toBeVisible();
+        }
+
+        test("should be able to switch rooms and have the call persist", async ({ page, user, room, app }) => {
+            await app.viewRoomById(room.roomId);
+            await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
+
+            await openAndJoinCall(page);
+            await app.viewRoomByName("OtherRoom");
+
+            // We should have a PiP container here.
+            await expect(page.locator(".mx_AppTile_persistedWrapper")).toBeVisible();
+        });
+
+        test("should be able to start a call, close it via PiP, and start again in the same room", async ({
+            page,
+            user,
+            room,
+            app,
+        }) => {
+            await app.viewRoomById(room.roomId);
+            await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
+
+            await openAndJoinCall(page);
+            await app.viewRoomByName("OtherRoom");
+            const pipContainer = page.locator(".mx_WidgetPip");
+
+            // We should have a PiP container here.
+            await expect(pipContainer).toBeVisible();
+
+            // Leave the call.
+            const overlay = page.locator(".mx_WidgetPip_overlay");
+            await overlay.hover({ timeout: 2000 }); // Show the call footer.
+            await overlay.getByRole("button", { name: "Leave", exact: true }).click();
+
+            // PiP container goes.
+            await expect(pipContainer).not.toBeVisible();
+
+            // Wait for call to stop.
+            await expect(await page.getByTestId("notification-decoration")).not.toBeVisible();
+            await app.viewRoomById(room.roomId);
+            await expect(await page.getByTestId("join-call-button")).not.toBeVisible();
+
+            // Join the call again.
+            await openAndJoinCall(page);
+        });
+
+        test("should be able to start a call, close it via PiP, and start again in a different room", async ({
+            page,
+            user,
+            room,
+            app,
+        }) => {
+            await app.viewRoomById(room.roomId);
+            await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
+
+            await openAndJoinCall(page);
+            await app.viewRoomByName("OtherRoom");
+            const pipContainer = page.locator(".mx_WidgetPip");
+
+            // We should have a PiP container here.
+            await expect(pipContainer).toBeVisible();
+
+            // Leave the call.
+            const overlay = page.locator(".mx_WidgetPip_overlay");
+            await overlay.hover({ timeout: 2000 }); // Show the call footer.
+            await overlay.getByRole("button", { name: "Leave", exact: true }).click();
+
+            // PiP container goes.
+            await expect(pipContainer).not.toBeVisible();
+
+            // Wait for call to stop.
+            await expect(await page.getByTestId("notification-decoration")).not.toBeVisible();
+            await expect(await page.getByTestId("join-call-button")).not.toBeVisible();
+
+            // Join the call again, but from the other room.
+            await openAndJoinCall(page);
+        });
+
+        // For https://github.com/element-hq/element-web/issues/30838
+        test.fail(
+            "should be able to join a call, leave via PiP, and rejoin the call",
+            async ({ page, user, room, app, bot }) => {
+                await app.viewRoomById(room.roomId);
+                await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
+                await app.client.setPowerLevel(room.roomId, bot.credentials.userId, 50);
+
+                await sendRTCState(bot, room.roomId);
+                await openAndJoinCall(page, true);
+
+                await app.viewRoomByName("OtherRoom");
+                const pipContainer = page.locator(".mx_WidgetPip");
+
+                // We should have a PiP container here.
+                await expect(pipContainer).toBeVisible();
+
+                // Leave the call.
+                const overlay = page.locator(".mx_WidgetPip_overlay");
+                await overlay.hover({ timeout: 2000 }); // Show the call footer.
+                await overlay.getByRole("button", { name: "Leave", exact: true }).click();
+
+                // PiP container goes.
+                await expect(pipContainer).not.toBeVisible();
+
+                // Rejoin the call
+                await app.viewRoomById(room.roomId);
+                await openAndJoinCall(page, true);
+            },
+        );
+    });
 });

playwright/element-web-test.ts

@@ -133,6 +133,7 @@ export const expect = baseExpect.extend<Expectations>({
             }
             .mx_BaseAvatar {
                 background-color: var(--cpd-color-fuchsia-1200) !important;
+                border-color: var(--cpd-color-fuchsia-1200) !important;
                 color: white !important;
             }
             .mx_ReplyChain {

playwright/sample-files/fake-element-call.html

@@ -0,0 +1,87 @@
+<!doctype html>
+<style>
+    body {
+        background: rgb(139, 192, 253);
+    }
+</style>
+
+<!-- element-call.spec.ts will insert the widget API in this block -->
+<script>
+    widgetCodeHere;
+</script>
+
+<div>
+    <p>Fake Element Call</p>
+    <p>State: <span id="state">Loading</span></p>
+    <button id="join-button">Join Call</button>
+    <button id="close-button">Close</button>
+</div>
+
+<!-- Minimal fake implementation of Element Call. Just enough for testing persistent widgets.-->
+<script>
+    const content = {
+        "application": "m.call",
+        "call_id": "",
+        "device_id": "gycSobuY0z",
+        "expires": 14400000,
+        "foci_preferred": [
+            {
+                livekit_alias: "any-alias",
+                livekit_service_url: "https://example.org",
+                type: "livekit",
+            },
+        ],
+        "focus_active": {
+            focus_selection: "oldest_membership",
+            type: "livekit",
+        },
+        "m.call.intent": "video",
+        "scope": "m.room",
+    };
+    const stateIndicator = document.querySelector("#state");
+    const { WidgetApi, WidgetApiToWidgetAction, MatrixCapabilities } = mxwidgets();
+    const widgetId = new URLSearchParams(window.location.search).get("widgetId");
+    const params = new URLSearchParams(window.location.hash.slice(1));
+    const userId = params.get("userId");
+    const deviceId = params.get("deviceId");
+    const roomId = params.get("roomId");
+    const api = new WidgetApi(widgetId, "*");
+
+    const stateKey = `_${userId}_${deviceId}_m.call`;
+
+    async function hangup() {
+        await api.sendStateEvent("org.matrix.msc3401.call.member", stateKey, {}, roomId);
+        await api.setAlwaysOnScreen(false);
+        await api.transport.send("io.element.close", {});
+        stateIndicator.innerHTML = "Ended";
+    }
+
+    document.querySelector("#join-button").onclick = async () => {
+        await api.setAlwaysOnScreen(true);
+        await api.transport.send("io.element.join", {});
+        await api.sendStateEvent("org.matrix.msc3401.call.member", stateKey, content, roomId);
+        stateIndicator.innerHTML = "In call";
+    };
+
+    document.querySelector("#close-button").onclick = () => {
+        hangup();
+    };
+
+    api.requestCapability(MatrixCapabilities.AlwaysOnScreen);
+    api.requestCapability(`org.matrix.msc2762.timeline:${roomId}`);
+    api.requestCapabilityToSendState("org.matrix.msc3401.call.member", stateKey);
+
+    api.on("ready", (ev) => {
+        stateIndicator.innerHTML = "Ready";
+        // Pretend to join a call.
+    });
+    api.on("action:im.vector.hangup", async () => {
+        await hangup();
+    });
+
+    // Start the messaging
+    api.start();
+
+    // If waitForIframeLoad is false, tell the client that we're good to go
+    api.sendContentLoaded();
+</script>