Merge branch 'livekit' into firefox-audio-output

src/@types/global.d.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import "matrix-js-sdk/src/@types/global";
 import type { DurationFormat as PolyfillDurationFormat } from "@formatjs/intl-durationformat";
-import { Controls } from "../controls";
+import { type Controls } from "../controls";
 
 declare global {
   interface Document {

src/@types/i18next.d.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import "i18next";
 // import all namespaces (for the default language, only)
-import app from "../../locales/en-GB/app.json";
+import type app from "../../locales/en/app.json";
 
 declare module "i18next" {
   interface CustomTypeOptions {

src/@types/matrix-js-sdk.d.ts

@@ -6,8 +6,8 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ElementCallReactionEventType,
-  ECallReactionEventContent,
+  type ElementCallReactionEventType,
+  type ECallReactionEventContent,
 } from "../reactions";
 
 // Extend Matrix JS SDK types via Typescript declaration merging to support unspecced event fields and types

src/App.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, Suspense, useEffect, useState } from "react";
+import { type FC, Suspense, useEffect, useState } from "react";
 import {
   BrowserRouter as Router,
   Switch,
@@ -13,7 +13,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import * as Sentry from "@sentry/react";
-import { History } from "history";
+import { type History } from "history";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 

src/Avatar.test.tsx

@@ -0,0 +1,156 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, expect, test, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
+import { type FC, type PropsWithChildren } from "react";
+
+import { ClientContextProvider } from "./ClientContext";
+import { Avatar } from "./Avatar";
+import { mockMatrixRoomMember, mockRtcMembership } from "./utils/test";
+
+const TestComponent: FC<
+  PropsWithChildren<{ client: MatrixClient; supportsThumbnails?: boolean }>
+> = ({ client, children, supportsThumbnails }) => {
+  return (
+    <ClientContextProvider
+      value={{
+        state: "valid",
+        disconnected: false,
+        supportedFeatures: {
+          reactions: true,
+          thumbnails: supportsThumbnails ?? true,
+        },
+        setClient: vi.fn(),
+        authenticated: {
+          client,
+          isPasswordlessUser: true,
+          changePassword: vi.fn(),
+          logout: vi.fn(),
+        },
+      }}
+    >
+      {children}
+    </ClientContextProvider>
+  );
+};
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+test("should just render a placeholder when the user has no avatar", () => {
+  const client = vi.mocked<MatrixClient>({
+    getAccessToken: () => "my-access-token",
+    mxcUrlToHttp: () => vi.fn(),
+  } as unknown as MatrixClient);
+
+  vi.spyOn(client, "mxcUrlToHttp");
+  const member = mockMatrixRoomMember(
+    mockRtcMembership("@alice:example.org", "AAAA"),
+    {
+      getMxcAvatarUrl: () => undefined,
+    },
+  );
+  const displayName = "Alice";
+  render(
+    <TestComponent client={client}>
+      <Avatar
+        id={member.userId}
+        name={displayName}
+        size={96}
+        src={member.getMxcAvatarUrl()}
+      />
+    </TestComponent>,
+  );
+  const element = screen.getByRole("img", { name: "@alice:example.org" });
+  expect(element.tagName).toEqual("SPAN");
+  expect(client.mxcUrlToHttp).toBeCalledTimes(0);
+});
+
+test("should just render a placeholder when thumbnails are not supported", () => {
+  const client = vi.mocked<MatrixClient>({
+    getAccessToken: () => "my-access-token",
+    mxcUrlToHttp: () => vi.fn(),
+  } as unknown as MatrixClient);
+
+  vi.spyOn(client, "mxcUrlToHttp");
+  const member = mockMatrixRoomMember(
+    mockRtcMembership("@alice:example.org", "AAAA"),
+    {
+      getMxcAvatarUrl: () => "mxc://example.org/alice-avatar",
+    },
+  );
+  const displayName = "Alice";
+  render(
+    <TestComponent client={client} supportsThumbnails={false}>
+      <Avatar
+        id={member.userId}
+        name={displayName}
+        size={96}
+        src={member.getMxcAvatarUrl()}
+      />
+    </TestComponent>,
+  );
+  const element = screen.getByRole("img", { name: "@alice:example.org" });
+  expect(element.tagName).toEqual("SPAN");
+  expect(client.mxcUrlToHttp).toBeCalledTimes(0);
+});
+
+test("should attempt to fetch authenticated media", async () => {
+  const expectedAuthUrl = "http://example.org/media/alice-avatar";
+  const expectedObjectURL = "my-object-url";
+  const accessToken = "my-access-token";
+  const theBlob = new Blob([]);
+
+  // vitest doesn't have a implementation of create/revokeObjectURL, so we need
+  // to delete the property. It's a bit odd, but it works.
+  Reflect.deleteProperty(global.window.URL, "createObjectURL");
+  globalThis.URL.createObjectURL = vi.fn().mockReturnValue(expectedObjectURL);
+  Reflect.deleteProperty(global.window.URL, "revokeObjectURL");
+  globalThis.URL.revokeObjectURL = vi.fn();
+
+  const fetchFn = vi.fn().mockResolvedValue({
+    blob: async () => Promise.resolve(theBlob),
+  });
+  vi.stubGlobal("fetch", fetchFn);
+
+  const client = vi.mocked<MatrixClient>({
+    getAccessToken: () => accessToken,
+    mxcUrlToHttp: () => vi.fn(),
+  } as unknown as MatrixClient);
+
+  vi.spyOn(client, "mxcUrlToHttp").mockReturnValue(expectedAuthUrl);
+  const member = mockMatrixRoomMember(
+    mockRtcMembership("@alice:example.org", "AAAA"),
+    {
+      getMxcAvatarUrl: () => "mxc://example.org/alice-avatar",
+    },
+  );
+  const displayName = "Alice";
+  render(
+    <TestComponent client={client}>
+      <Avatar
+        id={member.userId}
+        name={displayName}
+        size={96}
+        src={member.getMxcAvatarUrl()}
+      />
+    </TestComponent>,
+  );
+
+  // Fetch is asynchronous, so wait for this to resolve.
+  await vi.waitUntil(() =>
+    document.querySelector(`img[src='${expectedObjectURL}']`),
+  );
+
+  expect(client.mxcUrlToHttp).toBeCalledTimes(1);
+  expect(globalThis.fetch).toBeCalledWith(expectedAuthUrl, {
+    headers: { Authorization: `Bearer ${accessToken}` },
+  });
+});

src/Avatar.tsx

@@ -5,11 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { useMemo, FC } from "react";
+import {
+  useMemo,
+  type FC,
+  type CSSProperties,
+  useState,
+  useEffect,
+} from "react";
 import { Avatar as CompoundAvatar } from "@vector-im/compound-web";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 
-import { getAvatarUrl } from "./utils/matrix";
-import { useClient } from "./ClientContext";
+import { useClientState } from "./ClientContext";
 
 export enum Size {
   XS = "xs",
@@ -33,6 +39,29 @@ interface Props {
   className?: string;
   src?: string;
   size?: Size | number;
+  style?: CSSProperties;
+}
+
+export function getAvatarUrl(
+  client: MatrixClient,
+  mxcUrl: string | null,
+  avatarSize = 96,
+): string | null {
+  const width = Math.floor(avatarSize * window.devicePixelRatio);
+  const height = Math.floor(avatarSize * window.devicePixelRatio);
+  // scale is more suitable for larger sizes
+  const resizeMethod = avatarSize <= 96 ? "crop" : "scale";
+  return mxcUrl
+    ? client.mxcUrlToHttp(
+        mxcUrl,
+        width,
+        height,
+        resizeMethod,
+        false,
+        true,
+        true,
+      )
+    : null;
 }
 
 export const Avatar: FC<Props> = ({
@@ -41,8 +70,10 @@ export const Avatar: FC<Props> = ({
   name,
   src,
   size = Size.MD,
+  style,
+  ...props
 }) => {
-  const { client } = useClient();
+  const clientState = useClientState();
 
   const sizePx = useMemo(
     () =>
@@ -52,10 +83,50 @@ export const Avatar: FC<Props> = ({
     [size],
   );
 
-  const resolvedSrc = useMemo(() => {
-    if (!client || !src || !sizePx) return undefined;
-    return src.startsWith("mxc://") ? getAvatarUrl(client, src, sizePx) : src;
-  }, [client, src, sizePx]);
+  const [avatarUrl, setAvatarUrl] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (clientState?.state !== "valid") {
+      return;
+    }
+    const { authenticated, supportedFeatures } = clientState;
+    const client = authenticated?.client;
+
+    if (!client || !src || !sizePx || !supportedFeatures.thumbnails) {
+      return;
+    }
+
+    const token = client.getAccessToken();
+    if (!token) {
+      return;
+    }
+    const resolveSrc = getAvatarUrl(client, src, sizePx);
+    if (!resolveSrc) {
+      setAvatarUrl(undefined);
+      return;
+    }
+
+    let objectUrl: string | undefined;
+    fetch(resolveSrc, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+      .then(async (req) => req.blob())
+      .then((blob) => {
+        objectUrl = URL.createObjectURL(blob);
+        setAvatarUrl(objectUrl);
+      })
+      .catch((ex) => {
+        setAvatarUrl(undefined);
+      });
+
+    return (): void => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [clientState, src, sizePx]);
 
   return (
     <CompoundAvatar
@@ -63,7 +134,9 @@ export const Avatar: FC<Props> = ({
       id={id}
       name={name}
       size={`${sizePx}px`}
-      src={resolvedSrc}
+      src={avatarUrl}
+      style={style}
+      {...props}
     />
   );
 };

src/ClientContext.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  FC,
+  type FC,
   useCallback,
   useEffect,
   useState,
@@ -18,7 +18,7 @@ import {
 import { useHistory } from "react-router-dom";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
-import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
+import { type ISyncStateData, type SyncState } from "matrix-js-sdk/src/sync";
 import { ClientEvent, type MatrixClient } from "matrix-js-sdk/src/client";
 
 import type { WidgetApi } from "matrix-widget-api";
@@ -48,6 +48,7 @@ export type ValidClientState = {
   disconnected: boolean;
   supportedFeatures: {
     reactions: boolean;
+    thumbnails: boolean;
   };
   setClient: (params?: SetClientParams) => void;
 };
@@ -71,6 +72,8 @@ export type SetClientParams = {
 
 const ClientContext = createContext<ClientState | undefined>(undefined);
 
+export const ClientContextProvider = ClientContext.Provider;
+
 export const useClientState = (): ClientState | undefined =>
   useContext(ClientContext);
 
@@ -253,6 +256,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
 
   const [isDisconnected, setIsDisconnected] = useState(false);
   const [supportsReactions, setSupportsReactions] = useState(false);
+  const [supportsThumbnails, setSupportsThumbnails] = useState(false);
 
   const state: ClientState | undefined = useMemo(() => {
     if (alreadyOpenedErr) {
@@ -278,6 +282,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       disconnected: isDisconnected,
       supportedFeatures: {
         reactions: supportsReactions,
+        thumbnails: supportsThumbnails,
       },
     };
   }, [
@@ -288,6 +293,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     setClient,
     isDisconnected,
     supportsReactions,
+    supportsThumbnails,
   ]);
 
   const onSync = useCallback(
@@ -313,6 +319,8 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     }
 
     if (initClientState.widgetApi) {
+      // There is currently no widget API for authenticated media thumbnails.
+      setSupportsThumbnails(false);
       const reactSend = initClientState.widgetApi.hasCapability(
         "org.matrix.msc2762.send.event:m.reaction",
       );
@@ -334,6 +342,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       }
     } else {
       setSupportsReactions(true);
+      setSupportsThumbnails(true);
     }
 
     return (): void => {

src/DisconnectedBanner.tsx

@@ -6,11 +6,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { FC, HTMLAttributes, ReactNode } from "react";
+import { type FC, type HTMLAttributes, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
 import styles from "./DisconnectedBanner.module.css";
-import { ValidClientState, useClientState } from "./ClientContext";
+import { type ValidClientState, useClientState } from "./ClientContext";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children?: ReactNode;

src/FullScreenView.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, ReactNode, useCallback, useEffect } from "react";
+import { type FC, type ReactNode, useCallback, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";

src/Header.tsx

@@ -6,7 +6,12 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { FC, HTMLAttributes, ReactNode, forwardRef } from "react";
+import {
+  type FC,
+  type HTMLAttributes,
+  type ReactNode,
+  forwardRef,
+} from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";

src/Modal.test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { expect, test } from "vitest";
 import { render } from "@testing-library/react";
-import { ReactNode, useState } from "react";
+import { type ReactNode, useState } from "react";
 import { afterEach } from "node:test";
 import userEvent from "@testing-library/user-event";
 

src/Modal.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, ReactNode, useCallback } from "react";
+import { type FC, type ReactNode, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Root as DialogRoot,

src/QrCode.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useEffect, useState } from "react";
+import { type FC, useEffect, useState } from "react";
 import { toDataURL } from "qrcode";
 import classNames from "classnames";
 import { t } from "i18next";

src/Slider.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback } from "react";
+import { type FC, useCallback } from "react";
 import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
 import classNames from "classnames";
 import { Tooltip } from "@vector-im/compound-web";
@@ -16,6 +16,9 @@ interface Props {
   className?: string;
   label: string;
   value: number;
+  /**
+   * Event handler called when the value changes during an interaction.
+   */
   onValueChange: (value: number) => void;
   /**
    * Event handler called when the value changes at the end of an interaction.

src/Toast.tsx

@@ -6,9 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ComponentType,
-  FC,
-  SVGAttributes,
+  type ComponentType,
+  type FC,
+  type SVGAttributes,
   useCallback,
   useEffect,
 } from "react";

src/TranslatedError.ts

@@ -22,7 +22,7 @@ export abstract class TranslatedError extends Error {
     messageKey: ParseKeys<DefaultNamespace, TOptions>,
     translationFn: TFunction<DefaultNamespace>,
   ) {
-    super(translationFn(messageKey, { lng: "en-GB" } as TOptions));
+    super(translationFn(messageKey, { lng: "en" } as TOptions));
     this.translatedMessage = translationFn(messageKey);
   }
 }

src/UrlParams.test.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { describe, expect, it } from "vitest";
 
-import { getRoomIdentifierFromUrl } from "../src/UrlParams";
+import { getRoomIdentifierFromUrl, getUrlParams } from "../src/UrlParams";
 
 const ROOM_NAME = "roomNameHere";
 const ROOM_ID = "!d45f138fsd";
@@ -86,4 +86,113 @@ describe("UrlParams", () => {
         .roomAlias,
     ).toBeFalsy();
   });
+
+  describe("preload", () => {
+    it("defaults to false", () => {
+      expect(getUrlParams().preload).toBe(false);
+    });
+
+    it("ignored in SPA mode", () => {
+      expect(getUrlParams("?preload=true").preload).toBe(false);
+    });
+
+    it("respected in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?preload=true&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).preload,
+      ).toBe(true);
+    });
+  });
+
+  describe("returnToLobby", () => {
+    it("is true in SPA mode", () => {
+      expect(getUrlParams("?returnToLobby=false").returnToLobby).toBe(true);
+    });
+
+    it("defaults to false in widget mode", () => {
+      expect(
+        getUrlParams("?widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo")
+          .returnToLobby,
+      ).toBe(false);
+    });
+
+    it("respected in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?returnToLobby=true&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).returnToLobby,
+      ).toBe(true);
+    });
+  });
+
+  describe("userId", () => {
+    it("is ignored in SPA mode", () => {
+      expect(getUrlParams("?userId=asd").userId).toBe(null);
+    });
+
+    it("is parsed in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?userId=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).userId,
+      ).toBe("asd");
+    });
+  });
+
+  describe("deviceId", () => {
+    it("is ignored in SPA mode", () => {
+      expect(getUrlParams("?deviceId=asd").deviceId).toBe(null);
+    });
+
+    it("is parsed in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?deviceId=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).deviceId,
+      ).toBe("asd");
+    });
+  });
+
+  describe("baseUrl", () => {
+    it("is ignored in SPA mode", () => {
+      expect(getUrlParams("?baseUrl=asd").baseUrl).toBe(null);
+    });
+
+    it("is parsed in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?baseUrl=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).baseUrl,
+      ).toBe("asd");
+    });
+  });
+
+  describe("viaServers", () => {
+    it("is ignored in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?viaServers=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).viaServers,
+      ).toBe(null);
+    });
+
+    it("is parsed in SPA mode", () => {
+      expect(getUrlParams("?viaServers=asd").viaServers).toBe("asd");
+    });
+  });
+
+  describe("homeserver", () => {
+    it("is ignored in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?homeserver=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).homeserver,
+      ).toBe(null);
+    });
+
+    it("is parsed in SPA mode", () => {
+      expect(getUrlParams("?homeserver=asd").homeserver).toBe("asd");
+    });
+  });
 });

src/UrlParams.ts

@@ -10,7 +10,7 @@ import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { Config } from "./config/Config";
-import { EncryptionSystem } from "./e2ee/sharedKeyManagement";
+import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
 
 interface RoomIdentifier {
@@ -211,9 +211,13 @@ export const getUrlParams = (
 
   const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
 
+  const widgetId = parser.getParam("widgetId");
+  const parentUrl = parser.getParam("parentUrl");
+  const isWidget = !!widgetId && !!parentUrl;
+
   return {
-    widgetId: parser.getParam("widgetId"),
-    parentUrl: parser.getParam("parentUrl"),
+    widgetId,
+    parentUrl,
 
     // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
     // what would we do if it were invalid? If the widget API says that's what
@@ -224,15 +228,15 @@ export const getUrlParams = (
     confineToRoom:
       parser.getFlagParam("confineToRoom") || parser.getFlagParam("embed"),
     appPrompt: parser.getFlagParam("appPrompt", true),
-    preload: parser.getFlagParam("preload"),
+    preload: isWidget ? parser.getFlagParam("preload") : false,
     hideHeader: parser.getFlagParam("hideHeader"),
     showControls: parser.getFlagParam("showControls", true),
     hideScreensharing: parser.getFlagParam("hideScreensharing"),
     e2eEnabled: parser.getFlagParam("enableE2EE", true),
-    userId: parser.getParam("userId"),
+    userId: isWidget ? parser.getParam("userId") : null,
     displayName: parser.getParam("displayName"),
-    deviceId: parser.getParam("deviceId"),
-    baseUrl: parser.getParam("baseUrl"),
+    deviceId: isWidget ? parser.getParam("deviceId") : null,
+    baseUrl: isWidget ? parser.getParam("baseUrl") : null,
     lang: parser.getParam("lang"),
     fonts: parser.getAllParams("font"),
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
@@ -240,10 +244,10 @@ export const getUrlParams = (
     allowIceFallback: parser.getFlagParam("allowIceFallback"),
     perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"),
     skipLobby: parser.getFlagParam("skipLobby"),
-    returnToLobby: parser.getFlagParam("returnToLobby"),
+    returnToLobby: isWidget ? parser.getFlagParam("returnToLobby") : true,
     theme: parser.getParam("theme"),
-    viaServers: parser.getParam("viaServers"),
-    homeserver: parser.getParam("homeserver"),
+    viaServers: !isWidget ? parser.getParam("viaServers") : null,
+    homeserver: !isWidget ? parser.getParam("homeserver") : null,
   };
 };
 

src/UserMenu.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useMemo, useState } from "react";
+import { type FC, useMemo, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Menu, MenuItem } from "@vector-im/compound-web";

src/UserMenuContainer.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback, useState } from "react";
+import { type FC, useCallback, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 
 import { useClientLegacy } from "./ClientContext";

src/analytics/AnalyticsNotice.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC } from "react";
+import { type FC } from "react";
 import { Trans } from "react-i18next";
 
 import { ExternalLink } from "../button/Link";

src/analytics/PosthogAnalytics.ts

@@ -5,9 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import posthog, { CaptureOptions, PostHog, Properties } from "posthog-js";
+import posthog, {
+  type CaptureOptions,
+  type PostHog,
+  type Properties,
+} from "posthog-js";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Buffer } from "buffer";
 
 import { widget } from "../widget";

src/analytics/PosthogEvents.ts

@@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { DisconnectReason } from "livekit-client";
+import { type DisconnectReason } from "livekit-client";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
 
 import {
-  IPosthogEvent,
+  type IPosthogEvent,
   PosthogAnalytics,
   RegistrationType,
 } from "./PosthogAnalytics";

src/analytics/PosthogSpanProcessor.ts

@@ -6,9 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  SpanProcessor,
-  ReadableSpan,
-  Span,
+  type SpanProcessor,
+  type ReadableSpan,
+  type Span,
 } from "@opentelemetry/sdk-trace-base";
 import { hrTimeToMilliseconds } from "@opentelemetry/core";
 import { logger } from "matrix-js-sdk/src/logger";

src/analytics/RageshakeSpanProcessor.ts

@@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { AttributeValue, Attributes } from "@opentelemetry/api";
+import { type AttributeValue, type Attributes } from "@opentelemetry/api";
 import { hrTimeToMicroseconds } from "@opentelemetry/core";
 import {
-  SpanProcessor,
-  ReadableSpan,
-  Span,
+  type SpanProcessor,
+  type ReadableSpan,
+  type Span,
 } from "@opentelemetry/sdk-trace-base";
 
 const dumpAttributes = (

src/auth/LoginPage.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, FormEvent, useCallback, useRef, useState } from "react";
+import { type FC, type FormEvent, useCallback, useRef, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { Button } from "@vector-im/compound-web";

src/auth/RegisterPage.tsx

@@ -6,9 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ChangeEvent,
-  FC,
-  FormEvent,
+  type ChangeEvent,
+  type FC,
+  type FormEvent,
   useCallback,
   useEffect,
   useRef,

src/auth/useInteractiveLogin.ts

@@ -9,12 +9,12 @@ import { useCallback } from "react";
 import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
 import {
   createClient,
-  LoginResponse,
-  MatrixClient,
+  type LoginResponse,
+  type MatrixClient,
 } from "matrix-js-sdk/src/matrix";
 
 import { initClient } from "../utils/matrix";
-import { Session } from "../ClientContext";
+import { type Session } from "../ClientContext";
 /**
  * This provides the login method to login using user credentials.
  * @param oldClient If there is an already authenticated client it should be passed to this hook

src/auth/useInteractiveRegistration.ts

@@ -9,13 +9,13 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
 import {
   createClient,
-  MatrixClient,
-  RegisterResponse,
+  type MatrixClient,
+  type RegisterResponse,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { initClient } from "../utils/matrix";
-import { Session } from "../ClientContext";
+import { type Session } from "../ClientContext";
 import { Config } from "../config/Config";
 import { widget } from "../widget";
 

src/button/Button.tsx

@@ -4,7 +4,7 @@ Copyright 2022-2024 New Vector Ltd.
 SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
-import { ComponentPropsWithoutRef, FC } from "react";
+import { type ComponentPropsWithoutRef, type FC } from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import { Button as CpdButton, Tooltip } from "@vector-im/compound-web";

src/button/InviteButton.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ComponentPropsWithoutRef, FC } from "react";
+import { type ComponentPropsWithoutRef, type FC } from "react";
 import { Button } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 import { UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

src/button/Link.tsx

@@ -6,15 +6,15 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ComponentPropsWithoutRef,
+  type ComponentPropsWithoutRef,
   forwardRef,
-  MouseEvent,
+  type MouseEvent,
   useCallback,
   useMemo,
 } from "react";
 import { Link as CpdLink } from "@vector-im/compound-web";
 import { useHistory } from "react-router-dom";
-import { createPath, LocationDescriptor, Path } from "history";
+import { createPath, type LocationDescriptor, type Path } from "history";
 import classNames from "classnames";
 
 import { useLatest } from "../useLatest";

src/button/LinkButton.tsx

@@ -5,9 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ComponentPropsWithoutRef, forwardRef } from "react";
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
 import { Button } from "@vector-im/compound-web";
-import { LocationDescriptor } from "history";
+import { type LocationDescriptor } from "history";
 
 import { useLink } from "./Link";
 

src/button/ReactionToggleButton.test.tsx

@@ -9,7 +9,7 @@ import { render } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { userEvent } from "@testing-library/user-event";
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 
 import {
   MockRoom,

src/button/ReactionToggleButton.tsx

@@ -13,9 +13,9 @@ import {
   ReactionSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
-  ComponentPropsWithoutRef,
-  FC,
-  ReactNode,
+  type ComponentPropsWithoutRef,
+  type FC,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -27,7 +27,11 @@ import classNames from "classnames";
 
 import { useReactions } from "../useReactions";
 import styles from "./ReactionToggleButton.module.css";
-import { ReactionOption, ReactionSet, ReactionsRowSize } from "../reactions";
+import {
+  type ReactionOption,
+  ReactionSet,
+  ReactionsRowSize,
+} from "../reactions";
 import { Modal } from "../Modal";
 
 interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {

src/config/Config.ts

@@ -10,8 +10,8 @@ import { merge } from "lodash-es";
 import { getUrlParams } from "../UrlParams";
 import {
   DEFAULT_CONFIG,
-  ConfigOptions,
-  ResolvedConfigOptions,
+  type ConfigOptions,
+  type ResolvedConfigOptions,
 } from "./ConfigOptions";
 
 export class Config {

src/config/ConfigOptions.ts

@@ -51,7 +51,7 @@ export interface ConfigOptions {
     // a livekit service url in the client well-known.
     // The well known needs to be formatted like so:
     // {"type":"livekit", "livekit_service_url":"https://livekit.example.com"}
-    // and stored under the key: "livekit_focus"
+    // and stored under the key: "org.matrix.msc4143.rtc_foci"
     livekit_service_url: string;
   };
 

src/e2ee/matrixKeyProvider.test.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { describe, expect, test, vi } from "vitest";
 import {
-  MatrixRTCSession,
+  type MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/src/matrixrtc";
 import { KeyProviderEvent } from "livekit-client";

src/e2ee/matrixKeyProvider.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { BaseKeyProvider, createKeyMaterialFromBuffer } from "livekit-client";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
-  MatrixRTCSession,
+  type MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 

src/e2ee/sharedKeyManagement.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { useEffect, useMemo } from "react";
 
 import { setLocalStorageItem, useLocalStorage } from "../useLocalStorage";
-import { UrlParams, getUrlParams, useUrlParams } from "../UrlParams";
+import { type UrlParams, getUrlParams, useUrlParams } from "../UrlParams";
 import { E2eeType } from "./e2eeType";
 import { useClient } from "../ClientContext";
 

src/form/Form.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { FormEventHandler, forwardRef, ReactNode } from "react";
+import { type FormEventHandler, forwardRef, type ReactNode } from "react";
 
 import styles from "./Form.module.css";
 

src/grid/CallLayout.ts

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { BehaviorSubject, Observable } from "rxjs";
-import { ComponentType } from "react";
+import { type BehaviorSubject, type Observable } from "rxjs";
+import { type ComponentType } from "react";
 
-import { LayoutProps } from "./Grid";
-import { TileViewModel } from "../state/TileViewModel";
+import { type LayoutProps } from "./Grid";
+import { type TileViewModel } from "../state/TileViewModel";
 
 export interface Bounds {
   width: number;

src/grid/Grid.tsx

@@ -6,25 +6,24 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  SpringRef,
-  TransitionFn,
-  animated,
+  type SpringRef,
+  type TransitionFn,
+  type animated,
   useTransition,
 } from "@react-spring/web";
-import { EventTypes, Handler, useScroll } from "@use-gesture/react";
+import { type EventTypes, type Handler, useScroll } from "@use-gesture/react";
 import {
-  CSSProperties,
-  ComponentProps,
-  ComponentType,
-  Dispatch,
-  FC,
-  LegacyRef,
-  ReactNode,
-  SetStateAction,
+  type CSSProperties,
+  type ComponentProps,
+  type ComponentType,
+  type Dispatch,
+  type FC,
+  type LegacyRef,
+  type ReactNode,
+  type SetStateAction,
   createContext,
   forwardRef,
   memo,
-  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -54,7 +53,6 @@ interface Tile<Model> {
   id: string;
   model: Model;
   onDrag: DragCallback | undefined;
-  setVisible: (visible: boolean) => void;
 }
 
 type PlacedTile<Model> = Tile<Model> & Rect;
@@ -88,7 +86,6 @@ interface SlotProps<Model> extends Omit<ComponentProps<"div">, "onDrag"> {
   id: string;
   model: Model;
   onDrag?: DragCallback;
-  onVisibilityChange?: (visible: boolean) => void;
   style?: CSSProperties;
   className?: string;
 }
@@ -115,24 +112,47 @@ function offset(element: HTMLElement, relativeTo: Element): Offset {
   }
 }
 
+export type VisibleTilesCallback = (visibleTiles: number) => void;
+
 interface LayoutContext {
   setGeneration: Dispatch<SetStateAction<number | null>>;
+  setVisibleTilesCallback: Dispatch<
+    SetStateAction<VisibleTilesCallback | null>
+  >;
 }
 
 const LayoutContext = createContext<LayoutContext | null>(null);
 
+function useLayoutContext(): LayoutContext {
+  const context = useContext(LayoutContext);
+  if (context === null)
+    throw new Error("useUpdateLayout called outside a Grid layout context");
+  return context;
+}
+
 /**
  * Enables Grid to react to layout changes. You must call this in your Layout
  * component or else Grid will not be reactive.
  */
 export function useUpdateLayout(): void {
-  const context = useContext(LayoutContext);
-  if (context === null)
-    throw new Error("useUpdateLayout called outside a Grid layout context");
-
+  const { setGeneration } = useLayoutContext();
   // On every render, tell Grid that the layout may have changed
-  useEffect(() =>
-    context.setGeneration((prev) => (prev === null ? 0 : prev + 1)),
+  useEffect(() => setGeneration((prev) => (prev === null ? 0 : prev + 1)));
+}
+
+/**
+ * Asks Grid to call a callback whenever the number of visible tiles may have
+ * changed.
+ */
+export function useVisibleTiles(callback: VisibleTilesCallback): void {
+  const { setVisibleTilesCallback } = useLayoutContext();
+  useEffect(
+    () => setVisibleTilesCallback(() => callback),
+    [callback, setVisibleTilesCallback],
+  );
+  useEffect(
+    () => (): void => setVisibleTilesCallback(null),
+    [setVisibleTilesCallback],
   );
 }
 
@@ -245,39 +265,20 @@ export function Grid<
   const windowHeight = useObservableEagerState(windowHeightObservable);
   const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
   const [generation, setGeneration] = useState<number | null>(null);
+  const [visibleTilesCallback, setVisibleTilesCallback] =
+    useState<VisibleTilesCallback | null>(null);
   const tiles = useInitial(() => new Map<string, Tile<TileModel>>());
   const prefersReducedMotion = usePrefersReducedMotion();
 
   const Slot: FC<SlotProps<TileModel>> = useMemo(
     () =>
-      function Slot({
-        id,
-        model,
-        onDrag,
-        onVisibilityChange,
-        style,
-        className,
-        ...props
-      }) {
+      function Slot({ id, model, onDrag, style, className, ...props }) {
         const ref = useRef<HTMLDivElement | null>(null);
-        const prevVisible = useRef<boolean | null>(null);
-        const setVisible = useCallback(
-          (visible: boolean) => {
-            if (
-              onVisibilityChange !== undefined &&
-              visible !== prevVisible.current
-            ) {
-              onVisibilityChange(visible);
-              prevVisible.current = visible;
-            }
-          },
-          [onVisibilityChange],
-        );
 
         useEffect(() => {
-          tiles.set(id, { id, model, onDrag, setVisible });
+          tiles.set(id, { id, model, onDrag });
           return (): void => void tiles.delete(id);
-        }, [id, model, onDrag, setVisible]);
+        }, [id, model, onDrag]);
 
         return (
           <div
@@ -307,7 +308,10 @@ export function Grid<
     [],
   );
 
-  const context: LayoutContext = useMemo(() => ({ setGeneration }), []);
+  const context: LayoutContext = useMemo(
+    () => ({ setGeneration, setVisibleTilesCallback }),
+    [setVisibleTilesCallback],
+  );
 
   // Combine the tile definitions and slots together to create placed tiles
   const placedTiles = useMemo(() => {
@@ -342,9 +346,11 @@ export function Grid<
   );
 
   useEffect(() => {
-    for (const tile of placedTiles)
-      tile.setVisible(tile.y + tile.height <= visibleHeight);
-  }, [placedTiles, visibleHeight]);
+    visibleTilesCallback?.(
+      placedTiles.filter((tile) => tile.y + tile.height <= visibleHeight)
+        .length,
+    );
+  }, [placedTiles, visibleTilesCallback, visibleHeight]);
 
   // Drag state is stored in a ref rather than component state, because we use
   // react-spring's imperative API during gestures to improve responsiveness

src/grid/GridLayout.tsx

@@ -5,15 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { CSSProperties, forwardRef, useCallback, useMemo } from "react";
+import { type CSSProperties, forwardRef, useCallback, useMemo } from "react";
 import { distinctUntilChanged } from "rxjs";
 import { useObservableEagerState } from "observable-hooks";
 
-import { GridLayout as GridLayoutModel } from "../state/CallViewModel";
+import { type GridLayout as GridLayoutModel } from "../state/CallViewModel";
 import styles from "./GridLayout.module.css";
 import { useInitial } from "../useInitial";
-import { CallLayout, arrangeTiles } from "./CallLayout";
-import { DragCallback, useUpdateLayout } from "./Grid";
+import { type CallLayout, arrangeTiles } from "./CallLayout";
+import { type DragCallback, useUpdateLayout, useVisibleTiles } from "./Grid";
 
 interface GridCSSProperties extends CSSProperties {
   "--gap": string;
@@ -73,6 +73,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   // The scrolling part of the layout is where all the grid tiles live
   scrolling: forwardRef(function GridLayout({ model, Slot }, ref) {
     useUpdateLayout();
+    useVisibleTiles(model.setVisibleTiles);
     const { width, height: minHeight } = useObservableEagerState(minBounds);
     const { gap, tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, minHeight, model.grid.length),
@@ -93,13 +94,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
         }
       >
         {model.grid.map((m) => (
-          <Slot
-            key={m.id}
-            className={styles.slot}
-            id={m.id}
-            model={m}
-            onVisibilityChange={m.setVisible}
-          />
+          <Slot key={m.id} className={styles.slot} id={m.id} model={m} />
         ))}
       </div>
     );

src/grid/OneOnOneLayout.tsx

@@ -9,10 +9,10 @@ import { forwardRef, useCallback, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewModel";
-import { CallLayout, arrangeTiles } from "./CallLayout";
+import { type OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewModel";
+import { type CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneLayout.module.css";
-import { DragCallback, useUpdateLayout } from "./Grid";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 
 /**
  * An implementation of the "one-on-one" layout, in which the remote participant
@@ -52,7 +52,6 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
         <Slot
           id={model.remote.id}
           model={model.remote}
-          onVisibilityChange={model.remote.setVisible}
           className={styles.container}
           style={{ width: tileWidth, height: tileHeight }}
         >
@@ -61,7 +60,6 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
             id={model.local.id}
             model={model.local}
             onDrag={onDragLocalTile}
-            onVisibilityChange={model.local.setVisible}
             data-block-alignment={pipAlignmentValue.block}
             data-inline-alignment={pipAlignmentValue.inline}
           />

src/grid/SpotlightExpandedLayout.tsx

@@ -8,9 +8,9 @@ Please see LICENSE in the repository root for full details.
 import { forwardRef, useCallback } from "react";
 import { useObservableEagerState } from "observable-hooks";
 
-import { SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
-import { CallLayout } from "./CallLayout";
-import { DragCallback, useUpdateLayout } from "./Grid";
+import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
+import { type CallLayout } from "./CallLayout";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";
 
 /**
@@ -63,7 +63,6 @@ export const makeSpotlightExpandedLayout: CallLayout<
             id={model.pip.id}
             model={model.pip}
             onDrag={onDragPip}
-            onVisibilityChange={model.pip.setVisible}
             data-block-alignment={pipAlignmentValue.block}
             data-inline-alignment={pipAlignmentValue.inline}
           />

src/grid/SpotlightLandscapeLayout.tsx

@@ -9,10 +9,10 @@ import { forwardRef } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { CallLayout } from "./CallLayout";
-import { SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
+import { type CallLayout } from "./CallLayout";
+import { type SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightLandscapeLayout.module.css";
-import { useUpdateLayout } from "./Grid";
+import { useUpdateLayout, useVisibleTiles } from "./Grid";
 
 /**
  * An implementation of the "spotlight landscape" layout, in which the spotlight
@@ -50,6 +50,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
     ref,
   ) {
     useUpdateLayout();
+    useVisibleTiles(model.setVisibleTiles);
     useObservableEagerState(minBounds);
     const withIndicators =
       useObservableEagerState(model.spotlight.media).length > 1;
@@ -63,13 +64,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
         />
         <div className={styles.grid}>
           {model.grid.map((m) => (
-            <Slot
-              key={m.id}
-              className={styles.slot}
-              id={m.id}
-              model={m}
-              onVisibilityChange={m.setVisible}
-            />
+            <Slot key={m.id} className={styles.slot} id={m.id} model={m} />
           ))}
         </div>
       </div>

src/grid/SpotlightPortraitLayout.tsx

@@ -5,14 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { CSSProperties, forwardRef } from "react";
+import { type CSSProperties, forwardRef } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { CallLayout, arrangeTiles } from "./CallLayout";
-import { SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
+import { type CallLayout, arrangeTiles } from "./CallLayout";
+import { type SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightPortraitLayout.module.css";
-import { useUpdateLayout } from "./Grid";
+import { useUpdateLayout, useVisibleTiles } from "./Grid";
 
 interface GridCSSProperties extends CSSProperties {
   "--grid-gap": string;
@@ -54,6 +54,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
     ref,
   ) {
     useUpdateLayout();
+    useVisibleTiles(model.setVisibleTiles);
     const { width } = useObservableEagerState(minBounds);
     const { gap, tileWidth, tileHeight } = arrangeTiles(
       width,
@@ -84,13 +85,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
         />
         <div className={styles.grid}>
           {model.grid.map((m) => (
-            <Slot
-              key={m.id}
-              className={styles.slot}
-              id={m.id}
-              model={m}
-              onVisibilityChange={m.setVisible}
-            />
+            <Slot key={m.id} className={styles.slot} id={m.id} model={m} />
           ))}
         </div>
       </div>

src/grid/TileWrapper.tsx

@@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ComponentType, memo, RefObject, useRef } from "react";
-import { EventTypes, Handler, useDrag } from "@use-gesture/react";
-import { SpringValue } from "@react-spring/web";
+import { type ComponentType, memo, type RefObject, useRef } from "react";
+import { type EventTypes, type Handler, useDrag } from "@use-gesture/react";
+import { type SpringValue } from "@react-spring/web";
 import classNames from "classnames";
 
-import { TileProps } from "./Grid";
+import { type TileProps } from "./Grid";
 import styles from "./TileWrapper.module.css";
 
 interface Props<M, R extends HTMLElement> {

src/home/CallList.test.tsx

@@ -5,13 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { render, RenderResult } from "@testing-library/react";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { render, type RenderResult } from "@testing-library/react";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { MemoryRouter } from "react-router-dom";
 import { describe, expect, it } from "vitest";
 
 import { CallList } from "../../src/home/CallList";
-import { GroupCallRoom } from "../../src/home/useGroupCallRooms";
+import { type GroupCallRoom } from "../../src/home/useGroupCallRooms";
 
 describe("CallList", () => {
   const renderComponent = (rooms: GroupCallRoom[]): RenderResult => {

src/home/CallList.tsx

@@ -6,10 +6,10 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { Link } from "react-router-dom";
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { Room } from "matrix-js-sdk/src/models/room";
-import { FC, useCallback, MouseEvent, useState } from "react";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
+import { type RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { type Room } from "matrix-js-sdk/src/models/room";
+import { type FC, useCallback, type MouseEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { IconButton, Text } from "@vector-im/compound-web";
 import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -18,7 +18,7 @@ import classNames from "classnames";
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
 import { getRelativeRoomUrl } from "../utils/matrix";
-import { GroupCallRoom } from "./useGroupCallRooms";
+import { type GroupCallRoom } from "./useGroupCallRooms";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 interface CallListProps {

src/home/HomePage.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useTranslation } from "react-i18next";
-import { FC } from "react";
+import { type FC } from "react";
 
 import { useClientState } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";

src/home/JoinExistingCallModal.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useTranslation } from "react-i18next";
-import { FC, MouseEvent } from "react";
+import { type FC, type MouseEvent } from "react";
 import { Button } from "@vector-im/compound-web";
 
 import { Modal } from "../Modal";

src/home/RegisteredView.tsx

@@ -5,9 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { useState, useCallback, FormEvent, FormEventHandler, FC } from "react";
+import {
+  useState,
+  useCallback,
+  type FormEvent,
+  type FormEventHandler,
+  type FC,
+} from "react";
 import { useHistory } from "react-router-dom";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";

src/home/UnauthenticatedView.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback, useState, FormEventHandler } from "react";
+import { type FC, useCallback, useState, type FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Trans, useTranslation } from "react-i18next";

src/home/useGroupCallRooms.ts

@@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
-import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
+import { type Room, RoomEvent } from "matrix-js-sdk/src/models/room";
+import { type RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { useState, useEffect } from "react";
 import { EventTimeline, EventType, JoinRule } from "matrix-js-sdk/src/matrix";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { MatrixRTCSessionManagerEvents } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSessionManager";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 

src/index.css

@@ -47,6 +47,11 @@ layer(compound);
   --background-gradient: url("graphics/backgroundGradient.svg");
 }
 
+:root,
+[class*="cpd-theme-"] {
+  --video-tile-background: var(--cpd-color-bg-subtle-secondary);
+}
+
 .cpd-theme-dark {
   --cpd-color-border-accent: var(--cpd-color-green-1100);
   --stopgap-color-on-solid-accent: var(--cpd-color-text-primary);

src/initializer.tsx

@@ -24,7 +24,7 @@ import { platform } from "./Platform";
 
 // This generates a map of locale names to their URL (based on import.meta.url), which looks like this:
 // {
-//   "../locales/en-GB/app.json": "/whatever/assets/root/locales/en-aabbcc.json",
+//   "../locales/en/app.json": "/whatever/assets/root/locales/en-aabbcc.json",
 //   ...
 // }
 const locales = import.meta.glob<string>("../locales/*/*.json", {
@@ -41,7 +41,7 @@ const getLocaleUrl = (
 const supportedLngs = [
   ...new Set(
     Object.keys(locales).map((url) => {
-      // The URLs are of the form ../locales/en-GB/app.json
+      // The URLs are of the form ../locales/en/app.json
       // This extracts the language code from the URL
       const lang = url.match(/\/([^/]+)\/[^/]+\.json$/)?.[1];
       if (!lang) {
@@ -133,7 +133,7 @@ export class Initializer {
       .use(languageDetector)
       .use(initReactI18next)
       .init({
-        fallbackLng: "en-GB",
+        fallbackLng: "en",
         defaultNS: "app",
         keySeparator: ".",
         nsSeparator: false,

src/input/AvatarInputField.tsx

@@ -6,13 +6,13 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  AllHTMLAttributes,
+  type AllHTMLAttributes,
   useEffect,
   useCallback,
   useState,
-  ChangeEvent,
+  type ChangeEvent,
   useRef,
-  FC,
+  type FC,
 } from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";

src/input/Input.tsx

@@ -6,11 +6,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ChangeEvent,
-  FC,
-  ForwardedRef,
+  type ChangeEvent,
+  type FC,
+  type ForwardedRef,
   forwardRef,
-  ReactNode,
+  type ReactNode,
   useId,
 } from "react";
 import classNames from "classnames";
@@ -73,6 +73,7 @@ interface InputFieldProps {
   defaultValue?: string;
   placeholder?: string;
   defaultChecked?: boolean;
+  min?: number;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
@@ -91,6 +92,7 @@ export const InputField = forwardRef<
       suffix,
       description,
       disabled,
+      min,
       ...rest
     },
     ref,
@@ -127,6 +129,7 @@ export const InputField = forwardRef<
             checked={checked}
             disabled={disabled}
             aria-describedby={descriptionId}
+            min={min}
             {...rest}
           />
         )}

src/livekit/MediaDevicesContext.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  FC,
+  type FC,
   createContext,
   useCallback,
   useContext,
@@ -25,7 +25,7 @@ import {
   audioInput as audioInputSetting,
   audioOutput as audioOutputSetting,
   videoInput as videoInputSetting,
-  Setting,
+  type Setting,
 } from "../settings/settings";
 
 export type DeviceLabel =
@@ -143,13 +143,13 @@ function useMediaDevice(
   );
 }
 
-const deviceStub: MediaDevice = {
+export const deviceStub: MediaDevice = {
   available: new Map(),
   selectedId: undefined,
   selectedGroupId: undefined,
   select: () => {},
 };
-const devicesStub: MediaDevices = {
+export const devicesStub: MediaDevices = {
   audioInput: deviceStub,
   audioOutput: deviceStub,
   videoInput: deviceStub,
@@ -157,7 +157,7 @@ const devicesStub: MediaDevices = {
   stopUsingDeviceNames: () => {},
 };
 
-const MediaDevicesContext = createContext<MediaDevices>(devicesStub);
+export const MediaDevicesContext = createContext<MediaDevices>(devicesStub);
 
 interface Props {
   children: JSX.Element;

src/livekit/openIDSFU.ts

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { IOpenIDToken, MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type IOpenIDToken, type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { useEffect, useState } from "react";
-import { LivekitFocus } from "matrix-js-sdk/src/matrixrtc/LivekitFocus";
+import { type LivekitFocus } from "matrix-js-sdk/src/matrixrtc/LivekitFocus";
 
 import { useActiveLivekitFocus } from "../room/useActiveFocus";
 

src/livekit/options.ts

@@ -8,10 +8,10 @@ Please see LICENSE in the repository root for full details.
 import {
   AudioPresets,
   DefaultReconnectPolicy,
-  RoomOptions,
+  type RoomOptions,
   ScreenSharePresets,
-  TrackPublishDefaults,
-  VideoPreset,
+  type TrackPublishDefaults,
+  type VideoPreset,
   VideoPresets,
 } from "livekit-client";
 

src/livekit/useECConnectionState.ts

@@ -6,10 +6,10 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  AudioCaptureOptions,
+  type AudioCaptureOptions,
   ConnectionState,
-  LocalTrack,
-  Room,
+  type LocalTrack,
+  type Room,
   RoomEvent,
   Track,
 } from "livekit-client";
@@ -17,7 +17,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import * as Sentry from "@sentry/react";
 
-import { SFUConfig, sfuConfigEquals } from "./openIDSFU";
+import { type SFUConfig, sfuConfigEquals } from "./openIDSFU";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 
 declare global {

src/livekit/useLiveKit.ts

@@ -7,32 +7,32 @@ Please see LICENSE in the repository root for full details.
 
 import {
   ConnectionState,
-  E2EEOptions,
+  type E2EEManagerOptions,
   ExternalE2EEKeyProvider,
   Room,
-  RoomOptions,
+  type RoomOptions,
   Track,
 } from "livekit-client";
 import { useEffect, useMemo, useRef } from "react";
 import E2EEWorker from "livekit-client/e2ee-worker?worker";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 
 import { defaultLiveKitOptions } from "./options";
-import { SFUConfig } from "./openIDSFU";
-import { MuteStates } from "../room/MuteStates";
+import { type SFUConfig } from "./openIDSFU";
+import { type MuteStates } from "../room/MuteStates";
 import {
-  MediaDevice,
-  MediaDevices,
+  type MediaDevice,
+  type MediaDevices,
   useMediaDevices,
 } from "./MediaDevicesContext";
 import {
-  ECConnectionState,
+  type ECConnectionState,
   useECConnectionState,
 } from "./useECConnectionState";
 import { MatrixKeyProvider } from "../e2ee/matrixKeyProvider";
 import { E2eeType } from "../e2ee/e2eeType";
-import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 interface UseLivekitResult {
   livekitRoom?: Room;
@@ -45,7 +45,7 @@ export function useLiveKit(
   sfuConfig: SFUConfig | undefined,
   e2eeSystem: EncryptionSystem,
 ): UseLivekitResult {
-  const e2eeOptions = useMemo((): E2EEOptions | undefined => {
+  const e2eeOptions = useMemo((): E2EEManagerOptions | undefined => {
     if (e2eeSystem.kind === E2eeType.NONE) return undefined;
 
     if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {

src/otel/OTelCall.ts

@@ -5,17 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { Span } from "@opentelemetry/api";
-import { MatrixCall } from "matrix-js-sdk/src/matrix";
+import { type Span } from "@opentelemetry/api";
+import { type MatrixCall } from "matrix-js-sdk/src/matrix";
 import { CallEvent } from "matrix-js-sdk/src/webrtc/call";
 import {
-  TransceiverStats,
-  CallFeedStats,
+  type TransceiverStats,
+  type CallFeedStats,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
 import { ObjectFlattener } from "./ObjectFlattener";
 import { ElementCallOpenTelemetry } from "./otel";
-import { OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
+import { type OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
 import { OTelCallTransceiverMediaStreamSpan } from "./OTelCallTransceiverMediaStreamSpan";
 import { OTelCallFeedMediaStreamSpan } from "./OTelCallFeedMediaStreamSpan";
 

src/otel/OTelCallAbstractMediaStreamSpan.ts

@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import opentelemetry, { Span } from "@opentelemetry/api";
-import { TrackStats } from "matrix-js-sdk/src/webrtc/stats/statsReport";
+import opentelemetry, { type Span } from "@opentelemetry/api";
+import { type TrackStats } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
-import { ElementCallOpenTelemetry } from "./otel";
+import { type ElementCallOpenTelemetry } from "./otel";
 import { OTelCallMediaStreamTrackSpan } from "./OTelCallMediaStreamTrackSpan";
 
 type TrackId = string;

src/otel/OTelCallFeedMediaStreamSpan.ts

@@ -5,13 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { Span } from "@opentelemetry/api";
+import { type Span } from "@opentelemetry/api";
 import {
-  CallFeedStats,
-  TrackStats,
+  type CallFeedStats,
+  type TrackStats,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
-import { ElementCallOpenTelemetry } from "./otel";
+import { type ElementCallOpenTelemetry } from "./otel";
 import { OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
 
 export class OTelCallFeedMediaStreamSpan extends OTelCallAbstractMediaStreamSpan {

src/otel/OTelCallMediaStreamTrackSpan.ts

@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { TrackStats } from "matrix-js-sdk/src/webrtc/stats/statsReport";
-import opentelemetry, { Span } from "@opentelemetry/api";
+import { type TrackStats } from "matrix-js-sdk/src/webrtc/stats/statsReport";
+import opentelemetry, { type Span } from "@opentelemetry/api";
 
-import { ElementCallOpenTelemetry } from "./otel";
+import { type ElementCallOpenTelemetry } from "./otel";
 
 export class OTelCallMediaStreamTrackSpan {
   private readonly span: Span;

src/otel/OTelCallTransceiverMediaStreamSpan.ts

@@ -5,13 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { Span } from "@opentelemetry/api";
+import { type Span } from "@opentelemetry/api";
 import {
-  TrackStats,
-  TransceiverStats,
+  type TrackStats,
+  type TransceiverStats,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
-import { ElementCallOpenTelemetry } from "./otel";
+import { type ElementCallOpenTelemetry } from "./otel";
 import { OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
 
 export class OTelCallTransceiverMediaStreamSpan extends OTelCallAbstractMediaStreamSpan {

src/otel/OTelGroupCallMembership.ts

@@ -5,31 +5,35 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import opentelemetry, { Span, Attributes, Context } from "@opentelemetry/api";
+import opentelemetry, {
+  type Span,
+  type Attributes,
+  type Context,
+} from "@opentelemetry/api";
 import {
-  GroupCall,
-  MatrixClient,
-  MatrixEvent,
-  RoomMember,
+  type GroupCall,
+  type MatrixClient,
+  type MatrixEvent,
+  type RoomMember,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
-  CallError,
-  CallState,
-  MatrixCall,
-  VoipEvent,
+  type CallError,
+  type CallState,
+  type MatrixCall,
+  type VoipEvent,
 } from "matrix-js-sdk/src/webrtc/call";
 import {
-  CallsByUserAndDevice,
-  GroupCallError,
+  type CallsByUserAndDevice,
+  type GroupCallError,
   GroupCallEvent,
-  GroupCallStatsReport,
+  type GroupCallStatsReport,
 } from "matrix-js-sdk/src/webrtc/groupCall";
 import {
-  ConnectionStatsReport,
-  ByteSentStatsReport,
-  SummaryStatsReport,
-  CallFeedReport,
+  type ConnectionStatsReport,
+  type ByteSentStatsReport,
+  type SummaryStatsReport,
+  type CallFeedReport,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
 import { ElementCallOpenTelemetry } from "./otel";

src/otel/ObjectFlattener.test.ts

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
+import { type GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
 import {
-  AudioConcealment,
-  ByteSentStatsReport,
-  ConnectionStatsReport,
+  type AudioConcealment,
+  type ByteSentStatsReport,
+  type ConnectionStatsReport,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 import { describe, expect, it } from "vitest";
 

src/otel/ObjectFlattener.ts

@@ -4,13 +4,13 @@ Copyright 2023, 2024 New Vector Ltd.
 SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
-import { Attributes } from "@opentelemetry/api";
-import { VoipEvent } from "matrix-js-sdk/src/webrtc/call";
-import { GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
+import { type Attributes } from "@opentelemetry/api";
+import { type VoipEvent } from "matrix-js-sdk/src/webrtc/call";
+import { type GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
 import {
-  ByteSentStatsReport,
-  ConnectionStatsReport,
-  SummaryStatsReport,
+  type ByteSentStatsReport,
+  type ConnectionStatsReport,
+  type SummaryStatsReport,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
 export class ObjectFlattener {

src/otel/otel.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
 import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
 import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
-import opentelemetry, { Tracer } from "@opentelemetry/api";
+import opentelemetry, { type Tracer } from "@opentelemetry/api";
 import { Resource } from "@opentelemetry/resources";
 import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
 import { logger } from "matrix-js-sdk/src/logger";

src/profile/useProfile.ts

@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { User, UserEvent } from "matrix-js-sdk/src/models/user";
-import { FileType } from "matrix-js-sdk/src/http-api";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
+import { type MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { type User, UserEvent } from "matrix-js-sdk/src/models/user";
+import { type FileType } from "matrix-js-sdk/src/http-api";
 import { useState, useCallback, useEffect } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 

src/reactions/RaisedHandIndicator.tsx

@@ -6,8 +6,8 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  MouseEventHandler,
-  ReactNode,
+  type MouseEventHandler,
+  type ReactNode,
   useCallback,
   useEffect,
   useState,

src/reactions/ReactionIndicator.module.css

@@ -1,6 +1,6 @@
 .reactionIndicatorWidget {
   display: flex;
-  /* background-color: var(--cpd-color-bg-subtle-primary); */
+  background-color: #00000030;
   border-radius: var(--cpd-radius-pill-effect);
   box-shadow: 0 0 var(--cpd-space-2x) #00000040;
   background: "ffffff40";
@@ -14,12 +14,15 @@
   margin-top: auto;
   margin-bottom: auto;
   width: 3em;
+  padding-right: var(--cpd-space-2x);
+  margin-left: calc(var(--cpd-space-2x) * -1);
 }
 
 .reactionIndicatorWidgetLarge > p {
   padding: var(--cpd-space-2x);
   padding-right: var(--cpd-space-4x);
   padding-left: 0;
+  margin-left: 0;
 }
 
 .reactionLarge {
@@ -30,14 +33,12 @@
 
 .reaction {
   margin: var(--cpd-space-1x);
-  color: var(--cpd-color-icon-secondary);
-  /* background-color: var(--cpd-color-icon-secondary); */
+  color: white;
   display: flex;
   align-items: center;
   border-radius: var(--cpd-radius-pill-effect);
   user-select: none;
   overflow: hidden;
-  /* box-shadow: var(--small-drop-shadow); */
   box-sizing: border-box;
   max-inline-size: 100%;
   max-width: fit-content;

src/reactions/ReactionIndicator.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { PropsWithChildren, ReactNode } from "react";
+import { type PropsWithChildren, type ReactNode } from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 

src/reactions/index.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { RelationType } from "matrix-js-sdk/src/types";
+import { type RelationType } from "matrix-js-sdk/src/types";
 
 import catSoundOgg from "../sound/reactions/cat.ogg?url";
 import catSoundMp3 from "../sound/reactions/cat.mp3?url";

src/room/AppSelectionModal.tsx

@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
+import {
+  type FC,
+  type MouseEvent,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Text } from "@vector-im/compound-web";
 import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

src/room/CallEndedView.tsx

@@ -5,8 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, FormEventHandler, ReactNode, useCallback, useState } from "react";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import {
+  type FC,
+  type FormEventHandler,
+  type ReactNode,
+  useCallback,
+  useState,
+} from "react";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 import { Trans, useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { Button, Heading, Text } from "@vector-im/compound-web";

src/room/CallEventAudioRenderer.test.tsx

@@ -0,0 +1,201 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { render } from "@testing-library/react";
+import {
+  afterAll,
+  beforeEach,
+  expect,
+  type MockedFunction,
+  test,
+  vitest,
+} from "vitest";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
+import { ConnectionState } from "livekit-client";
+import { BehaviorSubject, of } from "rxjs";
+import { afterEach } from "node:test";
+import { act, type ReactNode } from "react";
+import {
+  type CallMembership,
+  type MatrixRTCSession,
+} from "matrix-js-sdk/src/matrixrtc";
+import { type RoomMember } from "matrix-js-sdk/src/matrix";
+
+import {
+  mockLivekitRoom,
+  mockLocalParticipant,
+  mockMatrixRoom,
+  mockMatrixRoomMember,
+  mockRemoteParticipant,
+  mockRtcMembership,
+  MockRTCSession,
+} from "../utils/test";
+import { E2eeType } from "../e2ee/e2eeType";
+import { CallViewModel } from "../state/CallViewModel";
+import {
+  CallEventAudioRenderer,
+  MAX_PARTICIPANT_COUNT_FOR_SOUND,
+} from "./CallEventAudioRenderer";
+import { useAudioContext } from "../useAudioContext";
+import { TestReactionsWrapper } from "../utils/testReactions";
+import { prefetchSounds } from "../soundUtils";
+
+const localRtcMember = mockRtcMembership("@carol:example.org", "CCCC");
+const local = mockMatrixRoomMember(localRtcMember);
+const aliceRtcMember = mockRtcMembership("@alice:example.org", "AAAA");
+const alice = mockMatrixRoomMember(aliceRtcMember);
+const bobRtcMember = mockRtcMembership("@bob:example.org", "BBBB");
+const localParticipant = mockLocalParticipant({ identity: "" });
+const aliceId = `${alice.userId}:${aliceRtcMember.deviceId}`;
+const aliceParticipant = mockRemoteParticipant({ identity: aliceId });
+
+vitest.mock("../useAudioContext");
+vitest.mock("../soundUtils");
+
+afterEach(() => {
+  vitest.resetAllMocks();
+});
+
+afterAll(() => {
+  vitest.restoreAllMocks();
+});
+
+let playSound: MockedFunction<
+  NonNullable<ReturnType<typeof useAudioContext>>["playSound"]
+>;
+
+beforeEach(() => {
+  (prefetchSounds as MockedFunction<typeof prefetchSounds>).mockResolvedValue({
+    sound: new ArrayBuffer(0),
+  });
+  playSound = vitest.fn();
+  (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
+    playSound,
+  });
+});
+
+function TestComponent({
+  rtcSession,
+  vm,
+}: {
+  rtcSession: MockRTCSession;
+  vm: CallViewModel;
+}): ReactNode {
+  return (
+    <TestReactionsWrapper
+      rtcSession={rtcSession as unknown as MatrixRTCSession}
+    >
+      <CallEventAudioRenderer vm={vm} />
+    </TestReactionsWrapper>
+  );
+}
+
+function getMockEnv(
+  members: RoomMember[],
+  initialRemoteRtcMemberships: CallMembership[] = [aliceRtcMember],
+): {
+  vm: CallViewModel;
+  session: MockRTCSession;
+  remoteRtcMemberships: BehaviorSubject<CallMembership[]>;
+} {
+  const matrixRoomMembers = new Map(members.map((p) => [p.userId, p]));
+  const remoteParticipants = of([aliceParticipant]);
+  const liveKitRoom = mockLivekitRoom(
+    { localParticipant },
+    { remoteParticipants },
+  );
+  const matrixRoom = mockMatrixRoom({
+    client: {
+      getUserId: () => localRtcMember.sender,
+      getDeviceId: () => localRtcMember.deviceId,
+      on: vitest.fn(),
+      off: vitest.fn(),
+    } as Partial<MatrixClient> as MatrixClient,
+    getMember: (userId) => matrixRoomMembers.get(userId) ?? null,
+  });
+
+  const remoteRtcMemberships = new BehaviorSubject<CallMembership[]>(
+    initialRemoteRtcMemberships,
+  );
+
+  const session = new MockRTCSession(
+    matrixRoom,
+    localRtcMember,
+  ).withMemberships(remoteRtcMemberships);
+
+  const vm = new CallViewModel(
+    session as unknown as MatrixRTCSession,
+    liveKitRoom,
+    {
+      kind: E2eeType.PER_PARTICIPANT,
+    },
+    of(ConnectionState.Connected),
+  );
+  return { vm, session, remoteRtcMemberships };
+}
+
+/**
+ * We don't want to play a sound when loading the call state
+ * because typically this occurs in two stages. We first join
+ * the call as a local participant and *then* the remote
+ * participants join from our perspective. We don't want to make
+ * a noise every time.
+ */
+test("plays one sound when entering a call", () => {
+  const { session, vm, remoteRtcMemberships } = getMockEnv([local, alice]);
+  render(<TestComponent rtcSession={session} vm={vm} />);
+  // Joining a call usually means remote participants are added later.
+  act(() => {
+    remoteRtcMemberships.next([aliceRtcMember, bobRtcMember]);
+  });
+  expect(playSound).toHaveBeenCalledOnce();
+});
+
+// TODO: Same test?
+test("plays a sound when a user joins", () => {
+  const { session, vm, remoteRtcMemberships } = getMockEnv([local, alice]);
+  render(<TestComponent rtcSession={session} vm={vm} />);
+
+  act(() => {
+    remoteRtcMemberships.next([aliceRtcMember, bobRtcMember]);
+  });
+  // Play a sound when joining a call.
+  expect(playSound).toBeCalledWith("join");
+});
+
+test("plays a sound when a user leaves", () => {
+  const { session, vm, remoteRtcMemberships } = getMockEnv([local, alice]);
+  render(<TestComponent rtcSession={session} vm={vm} />);
+
+  act(() => {
+    remoteRtcMemberships.next([]);
+  });
+  expect(playSound).toBeCalledWith("left");
+});
+
+test("plays no sound when the participant list is more than the maximum size", () => {
+  const mockRtcMemberships: CallMembership[] = [];
+  for (let i = 0; i < MAX_PARTICIPANT_COUNT_FOR_SOUND; i++) {
+    mockRtcMemberships.push(
+      mockRtcMembership(`@user${i}:example.org`, `DEVICE${i}`),
+    );
+  }
+
+  const { session, vm, remoteRtcMemberships } = getMockEnv(
+    [local, alice],
+    mockRtcMemberships,
+  );
+
+  render(<TestComponent rtcSession={session} vm={vm} />);
+  expect(playSound).not.toBeCalled();
+  act(() => {
+    remoteRtcMemberships.next(
+      mockRtcMemberships.slice(0, MAX_PARTICIPANT_COUNT_FOR_SOUND - 1),
+    );
+  });
+  expect(playSound).toBeCalledWith("left");
+});

src/room/CallEventAudioRenderer.tsx

@@ -0,0 +1,99 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type ReactNode, useDeferredValue, useEffect, useMemo } from "react";
+import { filter, interval, throttle } from "rxjs";
+
+import { type CallViewModel } from "../state/CallViewModel";
+import joinCallSoundMp3 from "../sound/join_call.mp3";
+import joinCallSoundOgg from "../sound/join_call.ogg";
+import leftCallSoundMp3 from "../sound/left_call.mp3";
+import leftCallSoundOgg from "../sound/left_call.ogg";
+import handSoundOgg from "../sound/raise_hand.ogg?url";
+import handSoundMp3 from "../sound/raise_hand.mp3?url";
+import { useAudioContext } from "../useAudioContext";
+import { prefetchSounds } from "../soundUtils";
+import { useReactions } from "../useReactions";
+import { useLatest } from "../useLatest";
+
+// Do not play any sounds if the participant count has exceeded this
+// number.
+export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8;
+export const THROTTLE_SOUND_EFFECT_MS = 500;
+
+export const callEventAudioSounds = prefetchSounds({
+  join: {
+    mp3: joinCallSoundMp3,
+    ogg: joinCallSoundOgg,
+  },
+  left: {
+    mp3: leftCallSoundMp3,
+    ogg: leftCallSoundOgg,
+  },
+  raiseHand: {
+    mp3: handSoundMp3,
+    ogg: handSoundOgg,
+  },
+});
+
+export function CallEventAudioRenderer({
+  vm,
+}: {
+  vm: CallViewModel;
+}): ReactNode {
+  const audioEngineCtx = useAudioContext({
+    sounds: callEventAudioSounds,
+    latencyHint: "interactive",
+  });
+  const audioEngineRef = useLatest(audioEngineCtx);
+
+  const { raisedHands } = useReactions();
+  const raisedHandCount = useMemo(
+    () => Object.keys(raisedHands).length,
+    [raisedHands],
+  );
+  const previousRaisedHandCount = useDeferredValue(raisedHandCount);
+
+  useEffect(() => {
+    if (audioEngineRef.current && previousRaisedHandCount < raisedHandCount) {
+      void audioEngineRef.current.playSound("raiseHand");
+    }
+  }, [audioEngineRef, previousRaisedHandCount, raisedHandCount]);
+
+  useEffect(() => {
+    const joinSub = vm.memberChanges
+      .pipe(
+        filter(
+          ({ joined, ids }) =>
+            ids.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND && joined.length > 0,
+        ),
+        throttle(() => interval(THROTTLE_SOUND_EFFECT_MS)),
+      )
+      .subscribe(() => {
+        void audioEngineRef.current?.playSound("join");
+      });
+
+    const leftSub = vm.memberChanges
+      .pipe(
+        filter(
+          ({ ids, left }) =>
+            ids.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND && left.length > 0,
+        ),
+        throttle(() => interval(THROTTLE_SOUND_EFFECT_MS)),
+      )
+      .subscribe(() => {
+        void audioEngineRef.current?.playSound("left");
+      });
+
+    return (): void => {
+      joinSub.unsubscribe();
+      leftSub.unsubscribe();
+    };
+  }, [audioEngineRef, vm]);
+
+  return <></>;
+}

src/room/EncryptionLock.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC } from "react";
+import { type FC } from "react";
 import { Tooltip } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 import {

src/room/GroupCallView.test.tsx

@@ -0,0 +1,153 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { beforeEach, expect, type MockedFunction, test, vitest } from "vitest";
+import { render } from "@testing-library/react";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
+import { of } from "rxjs";
+import { JoinRule, type RoomState } from "matrix-js-sdk/src/matrix";
+import { Router } from "react-router-dom";
+import { createBrowserHistory } from "history";
+import userEvent from "@testing-library/user-event";
+
+import { type MuteStates } from "./MuteStates";
+import { prefetchSounds } from "../soundUtils";
+import { useAudioContext } from "../useAudioContext";
+import { ActiveCall } from "./InCallView";
+import {
+  mockMatrixRoom,
+  mockMatrixRoomMember,
+  mockRtcMembership,
+  MockRTCSession,
+} from "../utils/test";
+import { GroupCallView } from "./GroupCallView";
+import { leaveRTCSession } from "../rtcSessionHelpers";
+import { type WidgetHelpers } from "../widget";
+import { LazyEventEmitter } from "../LazyEventEmitter";
+
+vitest.mock("../soundUtils");
+vitest.mock("../useAudioContext");
+vitest.mock("./InCallView");
+
+vitest.mock("../rtcSessionHelpers", async (importOriginal) => {
+  // TODO: perhaps there is a more elegant way to manage the type import here?
+  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+  const orig = await importOriginal<typeof import("../rtcSessionHelpers")>();
+  vitest.spyOn(orig, "leaveRTCSession");
+  return orig;
+});
+
+let playSound: MockedFunction<
+  NonNullable<ReturnType<typeof useAudioContext>>["playSound"]
+>;
+
+const localRtcMember = mockRtcMembership("@carol:example.org", "CCCC");
+const carol = mockMatrixRoomMember(localRtcMember);
+const roomMembers = new Map([carol].map((p) => [p.userId, p]));
+
+const roomId = "!foo:bar";
+const soundPromise = Promise.resolve(true);
+
+beforeEach(() => {
+  (prefetchSounds as MockedFunction<typeof prefetchSounds>).mockResolvedValue({
+    sound: new ArrayBuffer(0),
+  });
+  playSound = vitest.fn().mockReturnValue(soundPromise);
+  (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
+    playSound,
+  });
+  // A trivial implementation of Active call to ensure we are testing GroupCallView exclusively here.
+  (ActiveCall as MockedFunction<typeof ActiveCall>).mockImplementation(
+    ({ onLeave }) => {
+      return (
+        <div>
+          <button onClick={() => onLeave()}>Leave</button>
+        </div>
+      );
+    },
+  );
+});
+
+function createGroupCallView(widget: WidgetHelpers | null): {
+  rtcSession: MockRTCSession;
+  getByText: ReturnType<typeof render>["getByText"];
+} {
+  const history = createBrowserHistory();
+  const client = {
+    getUser: () => null,
+    getUserId: () => localRtcMember.sender,
+    getDeviceId: () => localRtcMember.deviceId,
+    getRoom: (rId) => (rId === roomId ? room : null),
+  } as Partial<MatrixClient> as MatrixClient;
+  const room = mockMatrixRoom({
+    client,
+    roomId,
+    getMember: (userId) => roomMembers.get(userId) ?? null,
+    getMxcAvatarUrl: () => null,
+    getCanonicalAlias: () => null,
+    currentState: {
+      getJoinRule: () => JoinRule.Invite,
+    } as Partial<RoomState> as RoomState,
+  });
+  const rtcSession = new MockRTCSession(
+    room,
+    localRtcMember,
+    [],
+  ).withMemberships(of([]));
+  const muteState = {
+    audio: { enabled: false },
+    video: { enabled: false },
+  } as MuteStates;
+  const { getByText } = render(
+    <Router history={history}>
+      <GroupCallView
+        client={client}
+        isPasswordlessUser={false}
+        confineToRoom={false}
+        preload={false}
+        skipLobby={false}
+        hideHeader={true}
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
+        muteStates={muteState}
+        widget={widget}
+      />
+    </Router>,
+  );
+  return {
+    getByText,
+    rtcSession,
+  };
+}
+
+test("will play a leave sound asynchronously in SPA mode", async () => {
+  const user = userEvent.setup();
+  const { getByText, rtcSession } = createGroupCallView(null);
+  const leaveButton = getByText("Leave");
+  await user.click(leaveButton);
+  expect(playSound).toHaveBeenCalledWith("left");
+  expect(leaveRTCSession).toHaveBeenCalledWith(rtcSession, undefined);
+  expect(rtcSession.leaveRoomSession).toHaveBeenCalledOnce();
+});
+
+test("will play a leave sound synchronously in widget mode", async () => {
+  const user = userEvent.setup();
+  const widget = {
+    api: {
+      setAlwaysOnScreen: async () => Promise.resolve(true),
+    } as Partial<WidgetHelpers["api"]>,
+    lazyActions: new LazyEventEmitter(),
+  };
+  const { getByText, rtcSession } = createGroupCallView(
+    widget as WidgetHelpers,
+  );
+  const leaveButton = getByText("Leave");
+  await user.click(leaveButton);
+  expect(playSound).toHaveBeenCalledWith("left");
+  expect(leaveRTCSession).toHaveBeenCalledWith(rtcSession, soundPromise);
+  expect(rtcSession.leaveRoomSession).toHaveBeenCalledOnce();
+});

src/room/GroupCallView.tsx

@@ -5,31 +5,45 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useHistory } from "react-router-dom";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 import {
   Room,
   isE2EESupported as isE2EESupportedBrowser,
 } from "livekit-client";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { JoinRule } from "matrix-js-sdk/src/matrix";
 import { Heading, Text } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
-import { widget, ElementWidgetActions, JoinCallData } from "../widget";
+import {
+  ElementWidgetActions,
+  type JoinCallData,
+  type WidgetHelpers,
+} from "../widget";
 import { FullScreenView } from "../FullScreenView";
 import { LobbyView } from "./LobbyView";
-import { MatrixInfo } from "./VideoPreview";
+import { type MatrixInfo } from "./VideoPreview";
 import { CallEndedView } from "./CallEndedView";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
 import { findDeviceByName } from "../utils/media";
 import { ActiveCall } from "./InCallView";
-import { MUTE_PARTICIPANT_COUNT, MuteStates } from "./MuteStates";
-import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
+import { MUTE_PARTICIPANT_COUNT, type MuteStates } from "./MuteStates";
+import {
+  useMediaDevices,
+  type MediaDevices,
+} from "../livekit/MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
 import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
@@ -41,6 +55,9 @@ import { InviteModal } from "./InviteModal";
 import { useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 import { Link } from "../button/Link";
+import { useAudioContext } from "../useAudioContext";
+import { callEventAudioSounds } from "./CallEventAudioRenderer";
+import { useLatest } from "../useLatest";
 
 declare global {
   interface Window {
@@ -57,6 +74,7 @@ interface Props {
   hideHeader: boolean;
   rtcSession: MatrixRTCSession;
   muteStates: MuteStates;
+  widget: WidgetHelpers | null;
 }
 
 export const GroupCallView: FC<Props> = ({
@@ -68,10 +86,16 @@ export const GroupCallView: FC<Props> = ({
   hideHeader,
   rtcSession,
   muteStates,
+  widget,
 }) => {
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
   const isJoined = useMatrixRTCSessionJoinState(rtcSession);
-
+  const leaveSoundContext = useLatest(
+    useAudioContext({
+      sounds: callEventAudioSounds,
+      latencyHint: "interactive",
+    }),
+  );
   // This should use `useEffectEvent` (only available in experimental versions)
   useEffect(() => {
     if (memberships.length >= MUTE_PARTICIPANT_COUNT)
@@ -131,48 +155,46 @@ export const GroupCallView: FC<Props> = ({
   const latestDevices = useRef<MediaDevices>();
   latestDevices.current = deviceContext;
 
+  // TODO: why do we use a ref here instead of using muteStates directly?
   const latestMuteStates = useRef<MuteStates>();
   latestMuteStates.current = muteStates;
 
   useEffect(() => {
-    const defaultDeviceSetup = async (
-      requestedDeviceData: JoinCallData,
-    ): Promise<void> => {
+    const defaultDeviceSetup = async ({
+      audioInput,
+      videoInput,
+    }: JoinCallData): Promise<void> => {
       // XXX: I think this is broken currently - LiveKit *won't* request
       // permissions and give you device names unless you specify a kind, but
       // here we want all kinds of devices. This needs a fix in livekit-client
       // for the following name-matching logic to do anything useful.
       const devices = await Room.getLocalDevices(undefined, true);
-      const { audioInput, videoInput } = requestedDeviceData;
-      if (audioInput === null) {
-        latestMuteStates.current!.audio.setEnabled?.(false);
-      } else {
+
+      if (audioInput) {
         const deviceId = findDeviceByName(audioInput, "audioinput", devices);
         if (!deviceId) {
           logger.warn("Unknown audio input: " + audioInput);
+          // override the default mute state
           latestMuteStates.current!.audio.setEnabled?.(false);
         } else {
           logger.debug(
             `Found audio input ID ${deviceId} for name ${audioInput}`,
           );
           latestDevices.current!.audioInput.select(deviceId);
-          latestMuteStates.current!.audio.setEnabled?.(true);
         }
       }
 
-      if (videoInput === null) {
-        latestMuteStates.current!.video.setEnabled?.(false);
-      } else {
+      if (videoInput) {
         const deviceId = findDeviceByName(videoInput, "videoinput", devices);
         if (!deviceId) {
           logger.warn("Unknown video input: " + videoInput);
+          // override the default mute state
           latestMuteStates.current!.video.setEnabled?.(false);
         } else {
           logger.debug(
             `Found video input ID ${deviceId} for name ${videoInput}`,
           );
           latestDevices.current!.videoInput.select(deviceId);
-          latestMuteStates.current!.video.setEnabled?.(true);
         }
       }
     };
@@ -187,19 +209,18 @@ export const GroupCallView: FC<Props> = ({
                 ev.detail.data as unknown as JoinCallData,
               );
               await enterRTCSession(rtcSession, perParticipantE2EE);
-              widget!.api.transport.reply(ev.detail, {});
+              widget.api.transport.reply(ev.detail, {});
             })().catch((e) => {
               logger.error("Error joining RTC session", e);
             });
           };
           widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
           return (): void => {
-            widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
+            widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
           };
         } else {
           // No lobby and no preload: we enter the rtc session right away
           (async (): Promise<void> => {
-            await defaultDeviceSetup({ audioInput: null, videoInput: null });
             await enterRTCSession(rtcSession, perParticipantE2EE);
           })().catch((e) => {
             logger.error("Error joining RTC session", e);
@@ -209,7 +230,7 @@ export const GroupCallView: FC<Props> = ({
         void enterRTCSession(rtcSession, perParticipantE2EE);
       }
     }
-  }, [rtcSession, preload, skipLobby, perParticipantE2EE]);
+  }, [widget, rtcSession, preload, skipLobby, perParticipantE2EE]);
 
   const [left, setLeft] = useState(false);
   const [leaveError, setLeaveError] = useState<Error | undefined>(undefined);
@@ -217,12 +238,12 @@ export const GroupCallView: FC<Props> = ({
 
   const onLeave = useCallback(
     (leaveError?: Error): void => {
-      setLeaveError(leaveError);
-      setLeft(true);
-
+      const audioPromise = leaveSoundContext.current?.playSound("left");
       // In embedded/widget mode the iFrame will be killed right after the call ended prohibiting the posthog event from getting sent,
       // therefore we want the event to be sent instantly without getting queued/batched.
       const sendInstantly = !!widget;
+      setLeaveError(leaveError);
+      setLeft(true);
       PosthogAnalytics.instance.eventCallEnded.track(
         rtcSession.room.roomId,
         rtcSession.memberships.length,
@@ -230,8 +251,12 @@ export const GroupCallView: FC<Props> = ({
         rtcSession,
       );
 
-      // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
-      leaveRTCSession(rtcSession)
+      leaveRTCSession(
+        rtcSession,
+        // Wait for the sound in widget mode (it's not long)
+        sendInstantly && audioPromise ? audioPromise : undefined,
+      )
+        // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
         .then(() => {
           if (
             !isPasswordlessUser &&
@@ -245,18 +270,25 @@ export const GroupCallView: FC<Props> = ({
           logger.error("Error leaving RTC session", e);
         });
     },
-    [rtcSession, isPasswordlessUser, confineToRoom, history],
+    [
+      widget,
+      rtcSession,
+      isPasswordlessUser,
+      confineToRoom,
+      leaveSoundContext,
+      history,
+    ],
   );
 
   useEffect(() => {
     if (widget && isJoined) {
       // set widget to sticky once joined.
-      widget!.api.setAlwaysOnScreen(true).catch((e) => {
+      widget.api.setAlwaysOnScreen(true).catch((e) => {
         logger.error("Error calling setAlwaysOnScreen(true)", e);
       });
 
       const onHangup = (ev: CustomEvent<IWidgetApiRequest>): void => {
-        widget!.api.transport.reply(ev.detail, {});
+        widget.api.transport.reply(ev.detail, {});
         // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
         leaveRTCSession(rtcSession).catch((e) => {
           logger.error("Failed to leave RTC session", e);
@@ -264,10 +296,10 @@ export const GroupCallView: FC<Props> = ({
       };
       widget.lazyActions.once(ElementWidgetActions.HangupCall, onHangup);
       return (): void => {
-        widget!.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
+        widget.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
       };
     }
-  }, [isJoined, rtcSession]);
+  }, [widget, isJoined, rtcSession]);
 
   const onReconnect = useCallback(() => {
     setLeft(false);
@@ -334,7 +366,7 @@ export const GroupCallView: FC<Props> = ({
         <ActiveCall
           client={client}
           matrixInfo={matrixInfo}
-          rtcSession={rtcSession}
+          rtcSession={rtcSession as unknown as MatrixRTCSession}
           participantCount={participantCount}
           onLeave={onLeave}
           hideHeader={hideHeader}
@@ -360,14 +392,17 @@ export const GroupCallView: FC<Props> = ({
       leaveError
     ) {
       return (
-        <CallEndedView
-          endedCallId={rtcSession.room.roomId}
-          client={client}
-          isPasswordlessUser={isPasswordlessUser}
-          confineToRoom={confineToRoom}
-          leaveError={leaveError}
-          reconnect={onReconnect}
-        />
+        <>
+          <CallEndedView
+            endedCallId={rtcSession.room.roomId}
+            client={client}
+            isPasswordlessUser={isPasswordlessUser}
+            confineToRoom={confineToRoom}
+            leaveError={leaveError}
+            reconnect={onReconnect}
+          />
+          ;
+        </>
       );
     } else {
       // If the user is a regular user, we'll have sent them back to the homepage,

src/room/InCallView.module.css

@@ -36,10 +36,9 @@ Please see LICENSE in the repository root for full details.
   inset-block-end: 0;
   z-index: 1;
   display: grid;
-  grid-template-columns: minmax(0, var(--inline-content-inset)) 1fr auto 1fr minmax(
-      0,
-      var(--inline-content-inset)
-    );
+  grid-template-columns:
+    minmax(0, var(--inline-content-inset))
+    1fr auto 1fr minmax(0, var(--inline-content-inset));
   grid-template-areas: ". logo buttons layout .";
   align-items: center;
   gap: var(--cpd-space-3x);

src/room/InCallView.tsx

@@ -10,23 +10,22 @@ import {
   RoomContext,
   useLocalParticipant,
 } from "@livekit/components-react";
-import { ConnectionState, Room } from "livekit-client";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { ConnectionState, type Room } from "livekit-client";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 import {
-  FC,
-  PointerEvent,
-  PropsWithoutRef,
-  TouchEvent,
+  type FC,
+  type PointerEvent,
+  type PropsWithoutRef,
+  type TouchEvent,
   forwardRef,
   useCallback,
-  useDeferredValue,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
 import useMeasure from "react-use-measure";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import classNames from "classnames";
 import { BehaviorSubject, map } from "rxjs";
 import { useObservable, useObservableEagerState } from "observable-hooks";
@@ -50,28 +49,32 @@ import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
 import { GridTile } from "../tile/GridTile";
-import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
+import { type OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
 import { useLiveKit } from "../livekit/useLiveKit";
 import { useWakeLock } from "../useWakeLock";
 import { useMergedRefs } from "../useMergedRefs";
-import { MuteStates } from "./MuteStates";
-import { MatrixInfo } from "./VideoPreview";
+import { type MuteStates } from "./MuteStates";
+import { type MatrixInfo } from "./VideoPreview";
 import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
-import { ECConnectionState } from "../livekit/useECConnectionState";
+import { type ECConnectionState } from "../livekit/useECConnectionState";
 import { useOpenIDSFU } from "../livekit/openIDSFU";
-import { CallViewModel, GridMode, Layout } from "../state/CallViewModel";
-import { Grid, TileProps } from "../grid/Grid";
+import {
+  CallViewModel,
+  type GridMode,
+  type Layout,
+} from "../state/CallViewModel";
+import { Grid, type TileProps } from "../grid/Grid";
 import { useInitial } from "../useInitial";
 import { SpotlightTile } from "../tile/SpotlightTile";
-import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { E2eeType } from "../e2ee/e2eeType";
 import { makeGridLayout } from "../grid/GridLayout";
 import {
-  CallLayoutOutputs,
+  type CallLayoutOutputs,
   defaultPipAlignment,
   defaultSpotlightAlignment,
 } from "../grid/CallLayout";
@@ -79,14 +82,16 @@ import { makeOneOnOneLayout } from "../grid/OneOnOneLayout";
 import { makeSpotlightExpandedLayout } from "../grid/SpotlightExpandedLayout";
 import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout";
 import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
-import { GridTileViewModel, TileViewModel } from "../state/TileViewModel";
+import { GridTileViewModel, type TileViewModel } from "../state/TileViewModel";
 import { ReactionsProvider, useReactions } from "../useReactions";
-import handSoundOgg from "../sound/raise_hand.ogg?url";
-import handSoundMp3 from "../sound/raise_hand.mp3?url";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { useSwitchCamera } from "./useSwitchCamera";
-import { soundEffectVolumeSetting, useSetting } from "../settings/settings";
 import { ReactionsOverlay } from "./ReactionsOverlay";
+import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
+import {
+  debugTileLayout as debugTileLayoutSetting,
+  useSetting,
+} from "../settings/settings";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -123,7 +128,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   useEffect(() => {
     if (livekitRoom !== undefined) {
       const vm = new CallViewModel(
-        props.rtcSession.room,
+        props.rtcSession,
         livekitRoom,
         props.e2eeSystem,
         connStateObservable,
@@ -131,12 +136,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       setVm(vm);
       return (): void => vm.destroy();
     }
-  }, [
-    props.rtcSession.room,
-    livekitRoom,
-    props.e2eeSystem,
-    connStateObservable,
-  ]);
+  }, [props.rtcSession, livekitRoom, props.e2eeSystem, connStateObservable]);
 
   if (livekitRoom === undefined || vm === null) return null;
 
@@ -182,14 +182,7 @@ export const InCallView: FC<InCallViewProps> = ({
   connState,
   onShareClick,
 }) => {
-  const [soundEffectVolume] = useSetting(soundEffectVolumeSetting);
-  const { supportsReactions, raisedHands, sendReaction, toggleRaisedHand } =
-    useReactions();
-  const raisedHandCount = useMemo(
-    () => Object.keys(raisedHands).length,
-    [raisedHands],
-  );
-  const previousRaisedHandCount = useDeferredValue(raisedHandCount);
+  const { supportsReactions, sendReaction, toggleRaisedHand } = useReactions();
 
   useWakeLock();
 
@@ -234,6 +227,8 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const windowMode = useObservableEagerState(vm.windowMode);
   const layout = useObservableEagerState(vm.layout);
+  const tileStoreGeneration = useObservableEagerState(vm.tileStoreGeneration);
+  const [debugTileLayout] = useSetting(debugTileLayoutSetting);
   const gridMode = useObservableEagerState(vm.gridMode);
   const showHeader = useObservableEagerState(vm.showHeader);
   const showFooter = useObservableEagerState(vm.showFooter);
@@ -339,25 +334,6 @@ export const InCallView: FC<InCallViewProps> = ({
     [vm],
   );
 
-  // Play a sound when the raised hand count increases.
-  const handRaisePlayer = useRef<HTMLAudioElement>(null);
-  useEffect(() => {
-    if (!handRaisePlayer.current) {
-      return;
-    }
-    if (previousRaisedHandCount < raisedHandCount) {
-      handRaisePlayer.current.volume = soundEffectVolume;
-      handRaisePlayer.current.play().catch((ex) => {
-        logger.warn("Failed to play raise hand sound", ex);
-      });
-    }
-  }, [
-    raisedHandCount,
-    handRaisePlayer,
-    previousRaisedHandCount,
-    soundEffectVolume,
-  ]);
-
   useEffect(() => {
     widget?.api.transport
       .send(
@@ -615,6 +591,10 @@ export const InCallView: FC<InCallViewProps> = ({
             height={11}
             aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
           />
+          {/* Don't mind this odd placement, it's just a little debug label */}
+          {debugTileLayout
+            ? `Tiles generation: ${tileStoreGeneration}`
+            : undefined}
         </div>
       )}
       {showControls && <div className={styles.buttons}>{buttons}</div>}
@@ -670,10 +650,7 @@ export const InCallView: FC<InCallViewProps> = ({
         ))}
       <RoomAudioRenderer />
       {renderContent()}
-      <audio ref={handRaisePlayer} preload="auto" hidden>
-        <source src={handSoundOgg} type="audio/ogg; codecs=vorbis" />
-        <source src={handSoundMp3} type="audio/mpeg" />
-      </audio>
+      <CallEventAudioRenderer vm={vm} />
       <ReactionsAudioRenderer />
       <ReactionsOverlay />
       {footer}

src/room/InviteModal.test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { render, screen } from "@testing-library/react";
 import { expect, test, vi } from "vitest";
-import { Room } from "matrix-js-sdk/src/matrix";
+import { type Room } from "matrix-js-sdk/src/matrix";
 import { axe } from "vitest-axe";
 import { BrowserRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";

src/room/InviteModal.tsx

@@ -5,9 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
+import {
+  type FC,
+  type MouseEvent,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
-import { Room } from "matrix-js-sdk/src/matrix";
+import { type Room } from "matrix-js-sdk/src/matrix";
 import { Button, Text } from "@vector-im/compound-web";
 import {
   LinkIcon,

src/room/LayoutToggle.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ChangeEvent, FC, TouchEvent, useCallback } from "react";
+import { type ChangeEvent, type FC, type TouchEvent, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "@vector-im/compound-web";
 import {

src/room/LobbyView.tsx

@@ -5,15 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback, useMemo, useState } from "react";
+import { type FC, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Button } from "@vector-im/compound-web";
 import classNames from "classnames";
 import { useHistory } from "react-router-dom";
 import { logger } from "matrix-js-sdk/src/logger";
 import { usePreviewTracks } from "@livekit/components-react";
-import { LocalVideoTrack, Track } from "livekit-client";
+import { type LocalVideoTrack, Track } from "livekit-client";
 import { useObservable } from "observable-hooks";
 import { map } from "rxjs";
 
@@ -21,8 +21,8 @@ import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { useLocationNavigation } from "../useLocationNavigation";
-import { MatrixInfo, VideoPreview } from "./VideoPreview";
-import { MuteStates } from "./MuteStates";
+import { type MatrixInfo, VideoPreview } from "./VideoPreview";
+import { type MuteStates } from "./MuteStates";
 import { InviteButton } from "../button/InviteButton";
 import {
   EndCallButton,

src/room/MuteStates.test.tsx

@@ -0,0 +1,177 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
+import { type ReactNode } from "react";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+
+import { useMuteStates } from "./MuteStates";
+import {
+  type DeviceLabel,
+  type MediaDevice,
+  type MediaDevices,
+  MediaDevicesContext,
+} from "../livekit/MediaDevicesContext";
+import { mockConfig } from "../utils/test";
+
+function TestComponent(): ReactNode {
+  const muteStates = useMuteStates();
+  return (
+    <div>
+      <div data-testid="audio-enabled">
+        {muteStates.audio.enabled.toString()}
+      </div>
+      <div data-testid="video-enabled">
+        {muteStates.video.enabled.toString()}
+      </div>
+    </div>
+  );
+}
+
+const mockMicrophone: MediaDeviceInfo = {
+  deviceId: "",
+  kind: "audioinput",
+  label: "",
+  groupId: "",
+  toJSON() {
+    return {};
+  },
+};
+
+const mockSpeaker: MediaDeviceInfo = {
+  deviceId: "",
+  kind: "audiooutput",
+  label: "",
+  groupId: "",
+  toJSON() {
+    return {};
+  },
+};
+
+const mockCamera: MediaDeviceInfo = {
+  deviceId: "",
+  kind: "videoinput",
+  label: "",
+  groupId: "",
+  toJSON() {
+    return {};
+  },
+};
+
+function mockDevices(available: Map<string, DeviceLabel>): MediaDevice {
+  return {
+    available,
+    selectedId: "",
+    selectedGroupId: "",
+    select: (): void => {},
+  };
+}
+
+function mockMediaDevices(
+  {
+    microphone,
+    speaker,
+    camera,
+  }: {
+    microphone?: boolean;
+    speaker?: boolean;
+    camera?: boolean;
+  } = { microphone: true, speaker: true, camera: true },
+): MediaDevices {
+  return {
+    audioInput: mockDevices(
+      microphone
+        ? new Map([[mockMicrophone.deviceId, mockMicrophone]])
+        : new Map(),
+    ),
+    audioOutput: mockDevices(
+      speaker ? new Map([[mockSpeaker.deviceId, mockSpeaker]]) : new Map(),
+    ),
+    videoInput: mockDevices(
+      camera ? new Map([[mockCamera.deviceId, mockCamera]]) : new Map(),
+    ),
+    startUsingDeviceNames: (): void => {},
+    stopUsingDeviceNames: (): void => {},
+  };
+}
+
+describe("useMuteStates", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterAll(() => {
+    vi.resetAllMocks();
+  });
+
+  it("disabled when no input devices", () => {
+    mockConfig();
+
+    render(
+      <MemoryRouter>
+        <MediaDevicesContext.Provider
+          value={mockMediaDevices({
+            microphone: false,
+            camera: false,
+          })}
+        >
+          <TestComponent />
+        </MediaDevicesContext.Provider>
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("false");
+  });
+
+  it("should be enabled by default", () => {
+    mockConfig();
+
+    render(
+      <MemoryRouter>
+        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+          <TestComponent />
+        </MediaDevicesContext.Provider>
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("true");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("true");
+  });
+
+  it("uses defaults from config", () => {
+    mockConfig({
+      media_devices: {
+        enable_audio: false,
+        enable_video: false,
+      },
+    });
+
+    render(
+      <MemoryRouter>
+        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+          <TestComponent />
+        </MediaDevicesContext.Provider>
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("false");
+  });
+
+  it("skipLobby mutes inputs", () => {
+    mockConfig();
+
+    render(
+      <MemoryRouter initialEntries={["/room/?skipLobby=true"]}>
+        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+          <TestComponent />
+        </MediaDevicesContext.Provider>
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("false");
+  });
+});

src/room/MuteStates.ts

@@ -6,19 +6,23 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  Dispatch,
-  SetStateAction,
+  type Dispatch,
+  type SetStateAction,
   useCallback,
   useEffect,
   useMemo,
 } from "react";
-import { IWidgetApiRequest } from "matrix-widget-api";
+import { type IWidgetApiRequest } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { MediaDevice, useMediaDevices } from "../livekit/MediaDevicesContext";
+import {
+  type MediaDevice,
+  useMediaDevices,
+} from "../livekit/MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import { ElementWidgetActions, widget } from "../widget";
 import { Config } from "../config/Config";
+import { useUrlParams } from "../UrlParams";
 
 /**
  * If there already are this many participants in the call, we automatically mute
@@ -72,13 +76,14 @@ function useMuteState(
 export function useMuteStates(): MuteStates {
   const devices = useMediaDevices();
 
-  const audio = useMuteState(
-    devices.audioInput,
-    () => Config.get().media_devices.enable_audio,
-  );
+  const { skipLobby } = useUrlParams();
+
+  const audio = useMuteState(devices.audioInput, () => {
+    return Config.get().media_devices.enable_audio && !skipLobby;
+  });
   const video = useMuteState(
     devices.videoInput,
-    () => Config.get().media_devices.enable_video,
+    () => Config.get().media_devices.enable_video && !skipLobby,
   );
 
   useEffect(() => {

src/room/RageshakeRequestModal.tsx

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useEffect } from "react";
+import { type FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Text } from "@vector-im/compound-web";
 
-import { Modal, Props as ModalProps } from "../Modal";
+import { Modal, type Props as ModalProps } from "../Modal";
 import { FieldRow, ErrorMessage } from "../input/Input";
 import { useSubmitRageshake } from "../settings/submit-rageshake";
 

src/room/ReactionAudioRenderer.test.tsx

@@ -6,9 +6,18 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { render } from "@testing-library/react";
-import { afterAll, expect, test } from "vitest";
+import {
+  afterAll,
+  beforeEach,
+  expect,
+  test,
+  vitest,
+  type MockedFunction,
+  type Mock,
+} from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
-import { act, ReactNode } from "react";
+import { act, type ReactNode } from "react";
+import { afterEach } from "node:test";
 
 import {
   MockRoom,
@@ -16,11 +25,13 @@ import {
   TestReactionsWrapper,
 } from "../utils/testReactions";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
-import { GenericReaction, ReactionSet } from "../reactions";
 import {
   playReactionsSound,
   soundEffectVolumeSetting,
 } from "../settings/settings";
+import { useAudioContext } from "../useAudioContext";
+import { GenericReaction, ReactionSet } from "../reactions";
+import { prefetchSounds } from "../soundUtils";
 
 const memberUserIdAlice = "@alice:example.org";
 const memberUserIdBob = "@bob:example.org";
@@ -49,11 +60,31 @@ function TestComponent({
   );
 }
 
-const originalPlayFn = window.HTMLMediaElement.prototype.play;
-afterAll(() => {
+vitest.mock("../useAudioContext");
+vitest.mock("../soundUtils");
+
+afterEach(() => {
+  vitest.resetAllMocks();
   playReactionsSound.setValue(playReactionsSound.defaultValue);
   soundEffectVolumeSetting.setValue(soundEffectVolumeSetting.defaultValue);
-  window.HTMLMediaElement.prototype.play = originalPlayFn;
+});
+
+afterAll(() => {
+  vitest.restoreAllMocks();
+});
+
+let playSound: Mock<
+  NonNullable<ReturnType<typeof useAudioContext>>["playSound"]
+>;
+
+beforeEach(() => {
+  (prefetchSounds as MockedFunction<typeof prefetchSounds>).mockResolvedValue({
+    sound: new ArrayBuffer(0),
+  });
+  playSound = vitest.fn();
+  (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
+    playSound,
+  });
 });
 
 test("preloads all audio elements", () => {
@@ -62,29 +93,11 @@ test("preloads all audio elements", () => {
     new MockRoom(memberUserIdAlice),
     membership,
   );
-  const { container } = render(<TestComponent rtcSession={rtcSession} />);
-  expect(container.getElementsByTagName("audio")).toHaveLength(
-    // All reactions plus the generic sound
-    ReactionSet.filter((r) => r.sound).length + 1,
-  );
-});
-
-test("loads no audio elements when disabled in settings", () => {
-  playReactionsSound.setValue(false);
-  const rtcSession = new MockRTCSession(
-    new MockRoom(memberUserIdAlice),
-    membership,
-  );
-  const { container } = render(<TestComponent rtcSession={rtcSession} />);
-  expect(container.getElementsByTagName("audio")).toHaveLength(0);
+  render(<TestComponent rtcSession={rtcSession} />);
+  expect(prefetchSounds).toHaveBeenCalledOnce();
 });
 
 test("will play an audio sound when there is a reaction", () => {
-  const audioIsPlaying: string[] = [];
-  window.HTMLMediaElement.prototype.play = async function (): Promise<void> {
-    audioIsPlaying.push((this.children[0] as HTMLSourceElement).src);
-    return Promise.resolve();
-  };
   playReactionsSound.setValue(true);
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
@@ -100,16 +113,10 @@ test("will play an audio sound when there is a reaction", () => {
   act(() => {
     room.testSendReaction(memberEventAlice, chosenReaction, membership);
   });
-  expect(audioIsPlaying).toHaveLength(1);
-  expect(audioIsPlaying[0]).toContain(chosenReaction.sound?.ogg);
+  expect(playSound).toHaveBeenCalledWith(chosenReaction.name);
 });
 
 test("will play the generic audio sound when there is soundless reaction", () => {
-  const audioIsPlaying: string[] = [];
-  window.HTMLMediaElement.prototype.play = async function (): Promise<void> {
-    audioIsPlaying.push((this.children[0] as HTMLSourceElement).src);
-    return Promise.resolve();
-  };
   playReactionsSound.setValue(true);
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
@@ -125,38 +132,10 @@ test("will play the generic audio sound when there is soundless reaction", () =>
   act(() => {
     room.testSendReaction(memberEventAlice, chosenReaction, membership);
   });
-  expect(audioIsPlaying).toHaveLength(1);
-  expect(audioIsPlaying[0]).toContain(GenericReaction.sound?.ogg);
-});
-
-test("will play an audio sound with the correct volume", () => {
-  playReactionsSound.setValue(true);
-  soundEffectVolumeSetting.setValue(0.5);
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
-  const { getByTestId } = render(<TestComponent rtcSession={rtcSession} />);
-
-  // Find the first reaction with a sound effect
-  const chosenReaction = ReactionSet.find((r) => !!r.sound);
-  if (!chosenReaction) {
-    throw Error(
-      "No reactions have sounds configured, this test cannot succeed",
-    );
-  }
-  act(() => {
-    room.testSendReaction(memberEventAlice, chosenReaction, membership);
-  });
-  expect((getByTestId(chosenReaction.name) as HTMLAudioElement).volume).toEqual(
-    0.5,
-  );
+  expect(playSound).toHaveBeenCalledWith(GenericReaction.name);
 });
 
 test("will play multiple audio sounds when there are multiple different reactions", () => {
-  const audioIsPlaying: string[] = [];
-  window.HTMLMediaElement.prototype.play = async function (): Promise<void> {
-    audioIsPlaying.push((this.children[0] as HTMLSourceElement).src);
-    return Promise.resolve();
-  };
   playReactionsSound.setValue(true);
 
   const room = new MockRoom(memberUserIdAlice);
@@ -175,7 +154,6 @@ test("will play multiple audio sounds when there are multiple different reaction
     room.testSendReaction(memberEventBob, reaction2, membership);
     room.testSendReaction(memberEventCharlie, reaction1, membership);
   });
-  expect(audioIsPlaying).toHaveLength(2);
-  expect(audioIsPlaying[0]).toContain(reaction1.sound?.ogg);
-  expect(audioIsPlaying[1]).toContain(reaction2.sound?.ogg);
+  expect(playSound).toHaveBeenCalledWith(reaction1.name);
+  expect(playSound).toHaveBeenCalledWith(reaction2.name);
 });

src/room/ReactionAudioRenderer.tsx

@@ -5,70 +5,67 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useEffect, useRef } from "react";
+import { type ReactNode, useDeferredValue, useEffect, useState } from "react";
 
 import { useReactions } from "../useReactions";
-import {
-  playReactionsSound,
-  soundEffectVolumeSetting as effectSoundVolumeSetting,
-  useSetting,
-} from "../settings/settings";
+import { playReactionsSound, useSetting } from "../settings/settings";
 import { GenericReaction, ReactionSet } from "../reactions";
+import { useAudioContext } from "../useAudioContext";
+import { prefetchSounds } from "../soundUtils";
+import { useLatest } from "../useLatest";
+
+const soundMap = Object.fromEntries([
+  ...ReactionSet.filter((v) => v.sound !== undefined).map((v) => [
+    v.name,
+    v.sound!,
+  ]),
+  [GenericReaction.name, GenericReaction.sound],
+]);
 
 export function ReactionsAudioRenderer(): ReactNode {
   const { reactions } = useReactions();
   const [shouldPlay] = useSetting(playReactionsSound);
-  const [effectSoundVolume] = useSetting(effectSoundVolumeSetting);
-  const audioElements = useRef<Record<string, HTMLAudioElement | null>>({});
+  const [soundCache, setSoundCache] = useState<ReturnType<
+    typeof prefetchSounds
+  > | null>(null);
+  const audioEngineCtx = useAudioContext({
+    sounds: soundCache,
+    latencyHint: "interactive",
+  });
+  const audioEngineRef = useLatest(audioEngineCtx);
+  const oldReactions = useDeferredValue(reactions);
 
   useEffect(() => {
-    if (!audioElements.current) {
+    if (!shouldPlay || soundCache) {
       return;
     }
+    // This is fine even if we load the component multiple times,
+    // as the browser's cache should ensure once the media is loaded
+    // once that future fetches come via the cache.
+    setSoundCache(prefetchSounds(soundMap));
+  }, [soundCache, shouldPlay]);
 
-    if (!shouldPlay) {
+  useEffect(() => {
+    if (!shouldPlay || !audioEngineRef.current) {
       return;
     }
+    const oldReactionSet = new Set(
+      Object.values(oldReactions).map((r) => r.name),
+    );
     for (const reactionName of new Set(
       Object.values(reactions).map((r) => r.name),
     )) {
-      const audioElement =
-        audioElements.current[reactionName] ?? audioElements.current.generic;
-      if (audioElement?.paused) {
-        audioElement.volume = effectSoundVolume;
-        void audioElement.play();
+      if (oldReactionSet.has(reactionName)) {
+        // Don't replay old reactions
+        return;
+      }
+      if (soundMap[reactionName]) {
+        void audioEngineRef.current.playSound(reactionName);
+      } else {
+        // Fallback sounds.
+        void audioEngineRef.current.playSound("generic");
       }
     }
-  }, [audioElements, shouldPlay, reactions, effectSoundVolume]);
-
-  // Do not render any audio elements if playback is disabled. Will save
-  // audio file fetches.
-  if (!shouldPlay) {
-    return null;
-  }
-
-  // NOTE: We load all audio elements ahead of time to allow the cache
-  // to be populated, rather than risk a cache miss and have the audio
-  // be delayed.
-  return (
-    <>
-      {[GenericReaction, ...ReactionSet].map(
-        (r) =>
-          r.sound && (
-            <audio
-              ref={(el) => (audioElements.current[r.name] = el)}
-              data-testid={r.name}
-              key={r.name}
-              preload="auto"
-              hidden
-            >
-              <source src={r.sound.ogg} type="audio/ogg; codecs=vorbis" />
-              {r.sound.mp3 ? (
-                <source src={r.sound.mp3} type="audio/mpeg" />
-              ) : null}
-            </audio>
-          ),
-      )}
-    </>
-  );
+  }, [audioEngineRef, shouldPlay, oldReactions, reactions]);
+  return null;
 }

src/room/ReactionsOverlay.test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { render } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
-import { act, ReactNode } from "react";
+import { act, type ReactNode } from "react";
 import { afterEach } from "node:test";
 
 import {

src/room/ReactionsOverlay.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 
 import { useReactions } from "../useReactions";
 import {

src/room/RoomAuthView.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback, useState } from "react";
+import { type FC, useCallback, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/src/logger";