fix more issues detected by knip

Including cleaning up some unused code and dependencies, using a React hook that we unintentionally stopped using, and also adding some previously undeclared dependencies.

.github/workflows/docker.yaml

@@ -51,7 +51,7 @@ jobs:
         uses: docker/setup-buildx-action@988b5a0280414f521da01fcc63a27aeeb4b104db # v3.6.1
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@5176d81f87c23d6fc96624dfdbcd9f3830bbe445 # v6.5.0
+        uses: docker/build-push-action@5cd11c3a4ced054e52742c5fd54dca954e0edd85 # v6.7.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.github/workflows/element-call.yaml

@@ -39,7 +39,7 @@ jobs:
           VITE_APP_VERSION: ${{ inputs.vite_app_version }}
           NODE_OPTIONS: "--max-old-space-size=4096"
       - name: Upload Artifact
-        uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4
+        uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4
         with:
           name: build-output
           path: dist

.github/workflows/lint.yaml

@@ -23,3 +23,5 @@ jobs:
         run: "yarn run lint:eslint"
       - name: Type check
         run: "yarn run lint:types"
+      - name: Dead code analysis
+        run: "yarn run lint:knip"

.github/workflows/publish.yaml

@@ -51,7 +51,7 @@ jobs:
         run: |
           tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
       - name: Upload
-        uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4.3.4
+        uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
         env:
           GITHUB_TOKEN: ${{ github.token }}
         with:

.github/workflows/test.yaml

@@ -18,8 +18,10 @@ jobs:
       - name: Install dependencies
         run: "yarn install"
       - name: Vitest
-        run: "yarn run test"
+        run: "yarn run test:coverage"
       - name: Upload to codecov
         uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4
         with:
           flags: unittests
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: true

.storybook/main.js

@@ -1,25 +0,0 @@
-const svgrPlugin = require("vite-plugin-svgr");
-const path = require("path");
-
-module.exports = {
-  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  framework: "@storybook/react",
-  core: {
-    builder: "storybook-builder-vite",
-  },
-  async viteFinal(config) {
-    config.plugins = config.plugins.filter(
-      (item) =>
-        !(
-          Array.isArray(item) &&
-          item.length > 0 &&
-          item[0].name === "vite-plugin-mdx"
-        ),
-    );
-    config.plugins.push(svgrPlugin());
-    config.resolve = config.resolve || {};
-    config.resolve.dedupe = config.resolve.dedupe || [];
-    config.resolve.dedupe.push("react", "react-dom", "matrix-js-sdk");
-    return config;
-  },
-};

.storybook/preview.jsx

@@ -1,24 +0,0 @@
-import { addDecorator } from "@storybook/react";
-import { MemoryRouter } from "react-router-dom";
-import { usePageFocusStyle } from "../src/usePageFocusStyle";
-import { OverlayProvider } from "@react-aria/overlays";
-import "../src/index.css";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
-
-addDecorator((story) => {
-  usePageFocusStyle();
-  return (
-    <MemoryRouter initialEntries={["/"]}>
-      <OverlayProvider>{story()}</OverlayProvider>
-    </MemoryRouter>
-  );
-});

README.md

@@ -22,7 +22,7 @@ yarn
 yarn build
 ```
 
-If all went well, you can now find the build output under `dist` as a series of static files. These can be hosted using any web server of your choice.
+If all went well, you can now find the build output under `dist` as a series of static files. These can be hosted using any web server that can be configured with custom routes (see below).
 
 You may also wish to add a configuration file (Element Call uses the domain it's hosted on as a Homeserver URL by default,
 but you can change this in the config file). This goes in `public/config.json` - you can use the sample as a starting point:

codecov.yaml

@@ -0,0 +1,13 @@
+# Don't post comments on PRs; they're noisy and the same information can be
+# gotten through the checks section at the bottom of the PR anyways
+comment: false
+coverage:
+  status:
+    project:
+      default:
+        # Track the impact of changes on overall coverage without blocking PRs
+        informational: true
+    patch:
+      default:
+        # Expect 80% coverage on all lines that a PR touches
+        target: 80%

docs/README.md

@@ -2,5 +2,6 @@
 
 This folder contains documentation for Element Call setup and usage.
 
-- [Url format and parameters](./url-params.md)
 - [Embedded vs standalone mode](./embedded-standalone.md)
+- [Url format and parameters](./url-params.md)
+- [Global JS controls](./controls.md)

docs/controls.md

@@ -0,0 +1,7 @@
+# Global JS controls
+
+A few aspects of Element Call's interface can be controlled through a global API on the `window`:
+
+- `controls.canEnterPip(): boolean` Determines whether it's possible to enter picture-in-picture mode.
+- `controls.enablePip(): void` Puts the call interface into picture-in-picture mode. Throws if not in a call.
+- `controls.disablePip(): void` Takes the call interface out of picture-in-picture mode, restoring it to its natural display mode. Throws if not in a call.

knip.ts

@@ -0,0 +1,30 @@
+import { KnipConfig } from "knip";
+
+export default {
+  entry: ["src/main.tsx", "i18next-parser.config.ts"],
+  ignoreBinaries: [
+    // This is deprecated, so Knip doesn't actually recognize it as a globally
+    // installed binary. TODO We should switch to Compose v2:
+    // https://docs.docker.com/compose/migrate/
+    "docker-compose",
+  ],
+  ignoreDependencies: [
+    // Used in CSS
+    "normalize.css",
+    // Used for its global type declarations
+    "@types/grecaptcha",
+    // Because we use matrix-js-sdk as a Git dependency rather than consuming
+    // the proper release artifacts, and also import directly from src/, we're
+    // forced to re-install some of the types that it depends on even though
+    // these look unused to Knip
+    "@types/content-type",
+    "@types/sdp-transform",
+    "@types/uuid",
+    // We obviously use this, but if the package has been linked with yarn link,
+    // then Knip will flag it as a false positive
+    // https://github.com/webpro-nl/knip/issues/766
+    "@vector-im/compound-web",
+    "matrix-widget-api",
+  ],
+  ignoreExportsUsedInFile: true,
+} satisfies KnipConfig;

package.json

@@ -8,33 +8,39 @@
     "serve": "vite preview",
     "prettier:check": "prettier -c .",
     "prettier:format": "prettier -w .",
-    "lint": "yarn lint:types && yarn lint:eslint",
+    "lint": "yarn lint:types && yarn lint:eslint && yarn lint:knip",
     "lint:eslint": "eslint --max-warnings 0 src",
     "lint:eslint-fix": "eslint --max-warnings 0 src --fix",
+    "lint:knip": "knip",
     "lint:types": "tsc",
-    "i18n": "node_modules/i18next-parser/bin/cli.js",
-    "i18n:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update",
+    "i18n": "i18next",
+    "i18n:check": "i18next --fail-on-warnings --fail-on-update",
     "test": "vitest",
-    "test:coverage": "vitest run --coverage",
+    "test:coverage": "vitest --coverage",
     "backend": "docker-compose -f backend-docker-compose.yml up"
   },
-  "dependencies": {
+  "devDependencies": {
+    "@babel/core": "^7.16.5",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.0",
     "@juggle/resize-observer": "^3.3.1",
     "@livekit/components-core": "^0.11.0",
     "@livekit/components-react": "^2.0.0",
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
     "@opentelemetry/api": "^1.4.0",
-    "@opentelemetry/context-zone": "^1.9.1",
-    "@opentelemetry/exporter-jaeger": "^1.9.1",
+    "@opentelemetry/core": "^1.25.1",
     "@opentelemetry/exporter-trace-otlp-http": "^0.52.0",
-    "@opentelemetry/instrumentation-document-load": "^0.39.0",
-    "@opentelemetry/instrumentation-user-interaction": "^0.39.0",
+    "@opentelemetry/resources": "^1.25.1",
+    "@opentelemetry/sdk-trace-base": "^1.25.1",
     "@opentelemetry/sdk-trace-web": "^1.9.1",
+    "@opentelemetry/semantic-conventions": "^1.25.1",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
     "@react-aria/button": "^3.3.4",
     "@react-aria/focus": "^3.5.0",
+    "@react-aria/interactions": "^3.9.1",
+    "@react-aria/listbox": "^3.5.1",
     "@react-aria/menu": "^3.3.0",
     "@react-aria/overlays": "^3.7.3",
     "@react-aria/select": "^3.6.0",
@@ -43,70 +49,40 @@
     "@react-aria/utils": "^3.10.0",
     "@react-spring/web": "^9.4.4",
     "@react-stately/collections": "^3.3.4",
+    "@react-stately/list": "^3.5.1",
+    "@react-stately/menu": "^3.3.1",
     "@react-stately/select": "^3.1.3",
+    "@react-stately/tabs": "^3.1.1",
     "@react-stately/tooltip": "^3.0.5",
     "@react-stately/tree": "^3.2.0",
-    "@sentry/react": "^8.0.0",
-    "@sentry/tracing": "^7.0.0",
-    "@types/lodash": "^4.14.199",
-    "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^1.0.0",
-    "@vector-im/compound-web": "^6.0.0",
-    "@vitejs/plugin-basic-ssl": "^1.0.1",
-    "@vitejs/plugin-react": "^4.0.1",
-    "buffer": "^6.0.3",
-    "classnames": "^2.3.1",
-    "events": "^3.3.0",
-    "i18next": "^23.0.0",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.0.0",
-    "livekit-client": "^2.0.2",
-    "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#9176d3a671114be97ee7a42155a6d40a233384f1",
-    "matrix-widget-api": "^1.8.2",
-    "normalize.css": "^8.0.1",
-    "observable-hooks": "^4.2.3",
-    "pako": "^2.0.4",
-    "postcss-preset-env": "^10.0.0",
-    "posthog-js": "^1.29.0",
-    "react": "18",
-    "react-dom": "18",
-    "react-i18next": "^15.0.0",
-    "react-router-dom": "^5.2.0",
-    "react-use-clipboard": "^1.0.7",
-    "react-use-measure": "^2.1.1",
-    "rxjs": "^7.8.1",
-    "sdp-transform": "^2.14.1",
-    "tinyqueue": "^3.0.0",
-    "unique-names-generator": "^4.6.0",
-    "uuid": "10",
-    "vaul": "^0.9.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/preset-env": "^7.22.20",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.0",
-    "@react-spring/rafz": "^9.7.3",
     "@react-types/dialog": "^3.5.5",
+    "@react-types/menu": "^3.6.1",
+    "@react-types/overlays": "^3.6.1",
+    "@react-types/shared": "^3.13.1",
+    "@react-types/tabs": "^3.1.1",
+    "@sentry/react": "^8.0.0",
     "@sentry/vite-plugin": "^2.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/content-type": "^1.1.5",
-    "@types/dom-screen-wake-lock": "^1.0.1",
-    "@types/dompurify": "^3.0.2",
-    "@types/grecaptcha": "^3.0.4",
+    "@types/grecaptcha": "^3.0.9",
+    "@types/lodash": "^4.14.199",
     "@types/node": "^20.0.0",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "@types/request": "^2.48.8",
     "@types/sdp-transform": "^2.4.5",
     "@types/uuid": "10",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
-    "babel-loader": "^9.0.0",
+    "@use-gesture/react": "^10.2.11",
+    "@vector-im/compound-design-tokens": "^1.0.0",
+    "@vector-im/compound-web": "^6.0.0",
+    "@vitejs/plugin-basic-ssl": "^1.0.1",
+    "@vitejs/plugin-react": "^4.0.1",
+    "@vitest/coverage-v8": "^2.0.5",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
+    "classnames": "^2.3.1",
     "eslint": "^8.14.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^9.0.0",
@@ -117,12 +93,38 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-unicorn": "^55.0.0",
+    "global-jsdom": "^24.0.0",
+    "history": "^4.0.0",
+    "i18next": "^23.0.0",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.0.0",
     "i18next-parser": "^9.0.0",
-    "jsdom": "^24.0.0",
+    "jsdom": "^25.0.0",
+    "knip": "^5.27.2",
+    "livekit-client": "^2.0.2",
+    "lodash": "^4.17.21",
+    "loglevel": "^1.9.1",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#467908703bc67fa3e23d978f5549e2709d4acf74",
+    "matrix-widget-api": "^1.8.2",
+    "normalize.css": "^8.0.1",
+    "observable-hooks": "^4.2.3",
+    "pako": "^2.0.4",
+    "postcss": "^8.4.41",
+    "postcss-preset-env": "^10.0.0",
+    "posthog-js": "^1.29.0",
     "prettier": "^3.0.0",
+    "react": "18",
+    "react-dom": "18",
+    "react-i18next": "^15.0.0",
+    "react-router-dom": "^5.2.0",
+    "react-use-clipboard": "^1.0.7",
+    "react-use-measure": "^2.1.1",
+    "rxjs": "^7.8.1",
     "sass": "^1.42.1",
     "typescript": "^5.1.6",
     "typescript-eslint-language-service": "^5.0.5",
+    "unique-names-generator": "^4.6.0",
+    "vaul": "^0.9.0",
     "vite": "^5.0.0",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^4.0.0",

public/locales/en-GB/app.json

@@ -59,6 +59,8 @@
     "username": "Username",
     "video": "Video"
   },
+  "crypto_version": "Crypto version: {{version}}",
+  "device_id": "Device ID: {{id}}",
   "disconnected_banner": "Connectivity to the server has been lost.",
   "full_screen_view_description": "<0>Submitting debug logs will help us track down the problem.</0>",
   "full_screen_view_h1": "<0>Oops, something's gone wrong.</0>",
@@ -99,6 +101,7 @@
   "login_auth_links_prompt": "Not registered yet?",
   "login_subheading": "To continue to Element",
   "login_title": "Login",
+  "matrix_id": "Matrix ID: {{id}}",
   "microphone_off": "Microphone off",
   "microphone_on": "Microphone on",
   "mute_microphone_button_label": "Mute microphone",
@@ -154,7 +157,7 @@
   "unauthenticated_view_eula_caption": "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "unauthenticated_view_login_button": "Login to your account",
   "unmute_microphone_button_label": "Unmute microphone",
-  "version": "Version: {{version}}",
+  "version": "{{productName}} version: {{version}}",
   "video_tile": {
     "always_show": "Always show",
     "change_fit_contain": "Fit to frame",

renovate.json

@@ -48,6 +48,8 @@
   "ignoreDeps": [
     "@react-aria/button",
     "@react-aria/focus",
+    "@react-aria/interactions",
+    "@react-aria/listbox",
     "@react-aria/menu",
     "@react-aria/overlays",
     "@react-aria/select",
@@ -55,9 +57,16 @@
     "@react-aria/tooltip",
     "@react-aria/utils",
     "@react-stately/collections",
+    "@react-stately/list",
+    "@react-stately/menu",
     "@react-stately/select",
+    "@react-stately/tabs",
     "@react-stately/tooltip",
     "@react-stately/tree",
-    "@react-types/dialog"
+    "@react-types/dialog",
+    "@react-types/menu",
+    "@react-types/overlays",
+    "@react-types/shared",
+    "@react-types/tabs"
   ]
 }

src/@types/global.d.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import "matrix-js-sdk/src/@types/global";
+import { Controls } from "../controls";
 
 declare global {
   interface Document {
@@ -24,8 +25,7 @@ declare global {
   }
 
   interface Window {
-    // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-    OLM_OPTIONS: Record<string, string>;
+    controls: Controls;
   }
 
   interface HTMLElement {

src/Avatar.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import { useMemo, FC } from "react";
 import { Avatar as CompoundAvatar } from "@vector-im/compound-web";
 
-import { getAvatarUrl } from "./matrix-utils";
+import { getAvatarUrl } from "./utils/matrix";
 import { useClient } from "./ClientContext";
 
 export enum Size {

src/Banner.tsx

@@ -1,27 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FC, ReactNode } from "react";
-
-import styles from "./Banner.module.css";
-
-interface Props {
-  children: ReactNode;
-}
-
-export const Banner: FC<Props> = ({ children }) => {
-  return <div className={styles.banner}>{children}</div>;
-};

src/ClientContext.tsx

@@ -39,7 +39,7 @@ import {
   CryptoStoreIntegrityError,
   fallbackICEServerAllowed,
   initClient,
-} from "./matrix-utils";
+} from "./utils/matrix";
 import { widget } from "./widget";
 import {
   PosthogAnalytics,

src/Header.module.css

@@ -90,6 +90,7 @@ limitations under the License.
 .nameLine {
   grid-area: name;
   flex-grow: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
   gap: var(--cpd-space-1x);
@@ -97,8 +98,6 @@ limitations under the License.
 
 .nameLine > h1 {
   margin: 0;
-  /* XXX I can't actually get this ellipsis overflow to trigger, because
-  constraint propagation in a nested flexbox layout is a massive pain */
   overflow: hidden;
   text-overflow: ellipsis;
 }

src/Toast.test.tsx

@@ -0,0 +1,55 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, expect, test, vi } from "vitest";
+import { render, configure } from "@testing-library/react";
+
+import { Toast } from "../src/Toast";
+import { withFakeTimers } from "./utils/test";
+
+configure({
+  defaultHidden: true,
+});
+
+describe("Toast", () => {
+  test("renders", () => {
+    const { queryByRole } = render(
+      <Toast open={false} onDismiss={() => {}}>
+        Hello world!
+      </Toast>,
+    );
+    expect(queryByRole("dialog")).toBe(null);
+    const { getByRole } = render(
+      <Toast open={true} onDismiss={() => {}}>
+        Hello world!
+      </Toast>,
+    );
+    expect(getByRole("dialog")).toMatchSnapshot();
+  });
+
+  test("dismisses itself after the specified timeout", () => {
+    withFakeTimers(() => {
+      const onDismiss = vi.fn();
+      render(
+        <Toast open={true} onDismiss={onDismiss} autoDismiss={2000}>
+          Hello world!
+        </Toast>,
+      );
+      vi.advanceTimersByTime(2000);
+      expect(onDismiss).toHaveBeenCalled();
+    });
+  });
+});

src/Toast.tsx

@@ -86,7 +86,7 @@ export const Toast: FC<Props> = ({
         <DialogOverlay
           className={classNames(overlayStyles.bg, overlayStyles.animate)}
         />
-        <DialogContent asChild>
+        <DialogContent aria-describedby={undefined} asChild>
           <DialogClose
             className={classNames(
               overlayStyles.overlay,

src/UrlParams.test.ts

@@ -14,23 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { vi } from "vitest";
+import { describe, expect, it } from "vitest";
 
 import { getRoomIdentifierFromUrl } from "../src/UrlParams";
-import { Config } from "../src/config/Config";
 
 const ROOM_NAME = "roomNameHere";
 const ROOM_ID = "!d45f138fsd";
 const ORIGIN = "https://call.element.io";
-const HOMESERVER = "call.ems.host";
-
-vi.mock("../src/config/Config");
+const HOMESERVER = "localhost";
 
 describe("UrlParams", () => {
-  beforeAll(() => {
-    vi.mocked(Config.defaultServerName).mockReturnValue("call.ems.host");
-  });
-
   describe("handles URL with /room/", () => {
     it("and nothing else", () => {
       expect(

src/__snapshots__/Toast-test.tsx.snap

@@ -2,7 +2,6 @@
 
 exports[`Toast renders 1`] = `
 <button
-  aria-describedby="radix-:r5:"
   aria-labelledby="radix-:r4:"
   class="overlay animate toast"
   data-state="open"

src/__snapshots__/Toast.test.tsx.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Toast > renders 1`] = `
+<button
+  aria-labelledby="radix-:r4:"
+  class="overlay animate toast"
+  data-state="open"
+  id="radix-:r3:"
+  role="dialog"
+  style="pointer-events: auto;"
+  tabindex="-1"
+  type="button"
+>
+  <h3
+    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45"
+    id="radix-:r4:"
+  >
+    Hello world!
+  </h3>
+</button>
+`;

src/analytics/PosthogAnalytics.ts

@@ -144,7 +144,7 @@ export class PosthogAnalytics {
         advanced_disable_decide: true,
       });
       this.enabled = true;
-    } else {
+    } else if (import.meta.env.MODE !== "test") {
       logger.info(
         "Posthog is not enabled because there is no api key or no host given in the config",
       );

src/array-utils.ts

@@ -1,44 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/**
- * Gets the index of the last element in the array to satsify the given
- * predicate.
- */
-// TODO: remove this once TypeScript recognizes the existence of
-// Array.prototype.findLastIndex
-export function findLastIndex<T>(
-  array: T[],
-  predicate: (item: T, index: number) => boolean,
-): number | null {
-  for (let i = array.length - 1; i >= 0; i--) {
-    if (predicate(array[i], i)) return i;
-  }
-
-  return null;
-}
-
-/**
- * Counts the number of elements in an array that satsify the given predicate.
- */
-export const count = <T>(
-  array: T[],
-  predicate: (item: T, index: number) => boolean,
-): number =>
-  array.reduce(
-    (acc, item, index) => (predicate(item, index) ? acc + 1 : acc),
-    0,
-  );

src/auth/useInteractiveLogin.ts

@@ -22,7 +22,7 @@ import {
   MatrixClient,
 } from "matrix-js-sdk/src/matrix";
 
-import { initClient } from "../matrix-utils";
+import { initClient } from "../utils/matrix";
 import { Session } from "../ClientContext";
 
 export function useInteractiveLogin(): (

src/auth/useInteractiveRegistration.ts

@@ -22,7 +22,7 @@ import {
   RegisterResponse,
 } from "matrix-js-sdk/src/matrix";
 
-import { initClient } from "../matrix-utils";
+import { initClient } from "../utils/matrix";
 import { Session } from "../ClientContext";
 import { Config } from "../config/Config";
 import { widget } from "../widget";

src/auth/useRecaptcha.ts

@@ -13,17 +13,17 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-
+// import "@types/grecaptcha";
 import { useEffect, useCallback, useRef, useState } from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { translatedError } from "../TranslatedError";
-
 declare global {
   interface Window {
     mxOnRecaptchaLoaded: () => void;
+    // grecaptcha: any;
   }
 }
 

src/config/Config.ts

@@ -44,6 +44,18 @@ export class Config {
     return Config.internalInstance.initPromise;
   }
 
+  /**
+   * This is a alternative initializer that does not load anything
+   * from a hosted config file but instead just initializes the conifg using the
+   * default config.
+   *
+   * It is supposed to only be used in tests. (It is executed in `vite.setup.js`)
+   */
+  public static initDefault(): void {
+    Config.internalInstance = new Config();
+    Config.internalInstance.config = { ...DEFAULT_CONFIG };
+  }
+
   // Convenience accessors
   public static defaultHomeserverUrl(): string | undefined {
     return (

src/controls.ts

@@ -0,0 +1,39 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Subject } from "rxjs";
+
+export interface Controls {
+  canEnterPip: () => boolean;
+  enablePip: () => void;
+  disablePip: () => void;
+}
+
+export const setPipEnabled = new Subject<boolean>();
+
+window.controls = {
+  canEnterPip(): boolean {
+    return setPipEnabled.observed;
+  },
+  enablePip(): void {
+    if (!setPipEnabled.observed) throw new Error("No call is running");
+    setPipEnabled.next(true);
+  },
+  disablePip(): void {
+    if (!setPipEnabled.observed) throw new Error("No call is running");
+    setPipEnabled.next(false);
+  },
+};

src/home/CallList.test.tsx

@@ -15,20 +15,19 @@ limitations under the License.
 */
 
 import { render, RenderResult } from "@testing-library/react";
-import { CallList } from "../../src/home/CallList";
 import { MatrixClient } from "matrix-js-sdk";
-import { GroupCallRoom } from "../../src/home/useGroupCallRooms";
 import { MemoryRouter } from "react-router-dom";
-import { ClientProvider } from "../../src/ClientContext";
+import { describe, expect, it } from "vitest";
+
+import { CallList } from "../../src/home/CallList";
+import { GroupCallRoom } from "../../src/home/useGroupCallRooms";
 
 describe("CallList", () => {
   const renderComponent = (rooms: GroupCallRoom[]): RenderResult => {
     return render(
-      <ClientProvider>
-        <MemoryRouter>
-          <CallList client={{} as MatrixClient} rooms={rooms} />
-        </MemoryRouter>
-      </ClientProvider>,
+      <MemoryRouter>
+        <CallList client={{} as MatrixClient} rooms={rooms} />
+      </MemoryRouter>,
     );
   };
 

src/home/CallList.tsx

@@ -23,7 +23,7 @@ import { FC } from "react";
 import { CopyButton } from "../button";
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
-import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../utils/matrix";
 import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";

src/home/RegisteredView.tsx

@@ -26,7 +26,7 @@ import {
   getRelativeRoomUrl,
   roomAliasLocalpartFromRoomName,
   sanitiseRoomNameInput,
-} from "../matrix-utils";
+} from "../utils/matrix";
 import { useGroupCallRooms } from "./useGroupCallRooms";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import commonStyles from "./common.module.css";
@@ -40,10 +40,7 @@ import { Caption } from "../typography/Typography";
 import { Form } from "../form/Form";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { E2eeType } from "../e2ee/e2eeType";
-import {
-  useSetting,
-  optInAnalytics as optInAnalyticsSetting,
-} from "../settings/settings";
+import { useOptInAnalytics } from "../settings/settings";
 
 interface Props {
   client: MatrixClient;
@@ -52,7 +49,7 @@ interface Props {
 export const RegisteredView: FC<Props> = ({ client }) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
-  const [optInAnalytics] = useSetting(optInAnalyticsSetting);
+  const [optInAnalytics] = useOptInAnalytics();
   const history = useHistory();
   const { t } = useTranslation();
   const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] =

src/home/UnauthenticatedView.tsx

@@ -31,7 +31,7 @@ import {
   getRelativeRoomUrl,
   roomAliasLocalpartFromRoomName,
   sanitiseRoomNameInput,
-} from "../matrix-utils";
+} from "../utils/matrix";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { useRecaptcha } from "../auth/useRecaptcha";
@@ -43,16 +43,13 @@ import { generateRandomName } from "../auth/generateRandomName";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { Config } from "../config/Config";
 import { E2eeType } from "../e2ee/e2eeType";
-import {
-  useSetting,
-  optInAnalytics as optInAnalyticsSetting,
-} from "../settings/settings";
+import { useOptInAnalytics } from "../settings/settings";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
-  const [optInAnalytics] = useSetting(optInAnalyticsSetting);
+  const [optInAnalytics] = useOptInAnalytics();
   const { recaptchaKey, register } = useInteractiveRegistration();
   const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
 

src/initializer.test.ts

@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { expect, test } from "vitest";
+
 import { Initializer } from "../src/initializer";
 
 test("initBeforeReact sets font family from URL param", () => {

src/initializer.tsx

@@ -32,8 +32,6 @@ enum LoadState {
 }
 
 class DependencyLoadStates {
-  // TODO: decide where olm should be initialized (see TODO comment below)
-  // olm: LoadState = LoadState.None;
   public config: LoadState = LoadState.None;
   public sentry: LoadState = LoadState.None;
   public openTelemetry: LoadState = LoadState.None;
@@ -128,18 +126,6 @@ export class Initializer {
   private loadStates = new DependencyLoadStates();
 
   private initStep(resolve: (value: void | PromiseLike<void>) => void): void {
-    // TODO: Olm is initialized with the client currently (see `initClient()` and `olm.ts`)
-    // we need to decide if we want to init it here or keep it in initClient
-    // if (this.loadStates.olm === LoadState.None) {
-    //   this.loadStates.olm = LoadState.Loading;
-    //   // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-    //   window.OLM_OPTIONS = {};
-    //   Olm.init({ locateFile: () => olmWasmPath }).then(() => {
-    //     this.loadStates.olm = LoadState.Loaded;
-    //     this.initStep(resolve);
-    //   });
-    // }
-
     // config
     if (this.loadStates.config === LoadState.None) {
       this.loadStates.config = LoadState.Loading;

src/olm.ts

@@ -1,29 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import Olm from "@matrix-org/olm";
-import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
-
-// https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-window.OLM_OPTIONS = {};
-
-let olmLoaded: Promise<void> | null = null;
-
-/**
- * Loads Olm, if not already loaded.
- */
-export const loadOlm = (): Promise<void> =>
-  (olmLoaded ??= Olm.init({ locateFile: () => olmWasmPath }));

src/otel/ObjectFlattener.test.ts

@@ -1,9 +1,27 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import { GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
 import {
   AudioConcealment,
   ByteSentStatsReport,
   ConnectionStatsReport,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
+import { describe, expect, it } from "vitest";
+
 import { ObjectFlattener } from "../../src/otel/ObjectFlattener";
 
 /*

src/room/AppSelectionModal.tsx

@@ -22,7 +22,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { Modal } from "../Modal";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
-import { getAbsoluteRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl } from "../utils/matrix";
 import styles from "./AppSelectionModal.module.css";
 import { editFragmentQuery } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";

src/room/GroupCallView.tsx

@@ -35,7 +35,7 @@ import { MatrixInfo } from "./VideoPreview";
 import { CallEndedView } from "./CallEndedView";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
-import { findDeviceByName } from "../media-utils";
+import { findDeviceByName } from "../utils/media";
 import { ActiveCall } from "./InCallView";
 import { MUTE_PARTICIPANT_COUNT, MuteStates } from "./MuteStates";
 import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";

src/room/InCallView.module.css

@@ -19,6 +19,7 @@ limitations under the License.
   flex-direction: column;
   height: 100%;
   width: 100%;
+  overflow-x: hidden;
   overflow-y: auto;
 }
 
@@ -57,6 +58,10 @@ limitations under the License.
   );
 }
 
+.footer.hidden {
+  display: none;
+}
+
 .footer.overlay {
   position: absolute;
   inset-block-end: 0;
@@ -66,6 +71,7 @@ limitations under the License.
 }
 
 .footer.overlay.hidden {
+  display: grid;
   opacity: 0;
   pointer-events: none;
 }

src/room/InCallView.tsx

@@ -69,7 +69,7 @@ import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
 import { ECConnectionState } from "../livekit/useECConnectionState";
 import { useOpenIDSFU } from "../livekit/openIDSFU";
-import { GridMode, Layout, useCallViewModel } from "../state/CallViewModel";
+import { CallViewModel, GridMode, Layout } from "../state/CallViewModel";
 import { Grid, TileProps } from "../grid/Grid";
 import { useObservable } from "../state/useObservable";
 import { useInitial } from "../useInitial";
@@ -93,7 +93,7 @@ const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 const maxTapDurationMs = 400;
 
 export interface ActiveCallProps
-  extends Omit<InCallViewProps, "livekitRoom" | "connState"> {
+  extends Omit<InCallViewProps, "vm" | "livekitRoom" | "connState"> {
   e2eeSystem: EncryptionSystem;
 }
 
@@ -105,6 +105,8 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     sfuConfig,
     props.e2eeSystem,
   );
+  const connStateObservable = useObservable(connState);
+  const [vm, setVm] = useState<CallViewModel | null>(null);
 
   useEffect(() => {
     return (): void => {
@@ -113,17 +115,41 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (!livekitRoom) return null;
+  useEffect(() => {
+    if (livekitRoom !== undefined) {
+      const vm = new CallViewModel(
+        props.rtcSession.room,
+        livekitRoom,
+        props.e2eeSystem.kind !== E2eeType.NONE,
+        connStateObservable,
+      );
+      setVm(vm);
+      return (): void => vm.destroy();
+    }
+  }, [
+    props.rtcSession.room,
+    livekitRoom,
+    props.e2eeSystem.kind,
+    connStateObservable,
+  ]);
+
+  if (livekitRoom === undefined || vm === null) return null;
 
   return (
     <RoomContext.Provider value={livekitRoom}>
-      <InCallView {...props} livekitRoom={livekitRoom} connState={connState} />
+      <InCallView
+        {...props}
+        vm={vm}
+        livekitRoom={livekitRoom}
+        connState={connState}
+      />
     </RoomContext.Provider>
   );
 };
 
 export interface InCallViewProps {
   client: MatrixClient;
+  vm: CallViewModel;
   matrixInfo: MatrixInfo;
   rtcSession: MatrixRTCSession;
   livekitRoom: Room;
@@ -138,6 +164,7 @@ export interface InCallViewProps {
 
 export const InCallView: FC<InCallViewProps> = ({
   client,
+  vm,
   matrixInfo,
   rtcSession,
   livekitRoom,
@@ -193,12 +220,6 @@ export const InCallView: FC<InCallViewProps> = ({
   const reducedControls = boundsValid && bounds.width <= 340;
   const noControls = reducedControls && bounds.height <= 400;
 
-  const vm = useCallViewModel(
-    rtcSession.room,
-    livekitRoom,
-    matrixInfo.e2eeSystem.kind !== E2eeType.NONE,
-    connState,
-  );
   const windowMode = useObservableEagerState(vm.windowMode);
   const layout = useObservableEagerState(vm.layout);
   const gridMode = useObservableEagerState(vm.gridMode);

src/room/InviteModal.tsx

@@ -25,7 +25,7 @@ import {
 import useClipboard from "react-use-clipboard";
 
 import { Modal } from "../Modal";
-import { getAbsoluteRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl } from "../utils/matrix";
 import styles from "./InviteModal.module.css";
 import { Toast } from "../Toast";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";

src/room/RoomAuthView.tsx

@@ -117,7 +117,7 @@ export const RoomAuthView: FC = () => {
             Not registered yet?{" "}
             <Link
               color="primary"
-              to={{ pathname: "/login", state: { from: location } }}
+              to={{ pathname: "/register", state: { from: location } }}
             >
               Create an account
             </Link>

src/room/RoomPage.tsx

@@ -35,10 +35,7 @@ import { LobbyView } from "./LobbyView";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useProfile } from "../profile/useProfile";
 import { useMuteStates } from "./MuteStates";
-import {
-  useSetting,
-  optInAnalytics as optInAnalyticsSetting,
-} from "../settings/settings";
+import { useOptInAnalytics } from "../settings/settings";
 
 export const RoomPage: FC = () => {
   const {
@@ -83,7 +80,7 @@ export const RoomPage: FC = () => {
     registerPasswordlessUser,
   ]);
 
-  const [optInAnalytics, setOptInAnalytics] = useSetting(optInAnalyticsSetting);
+  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   useEffect(() => {
     // During the beta, opt into analytics by default
     if (optInAnalytics === null && setOptInAnalytics) setOptInAnalytics(true);

src/room/checkForParallelCalls.test.ts

@@ -14,15 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { vi, Mocked } from "vitest";
+import { vi, Mocked, test, expect } from "vitest";
 import { RoomState } from "matrix-js-sdk/src/models/room-state";
+
 import { PosthogAnalytics } from "../../src/analytics/PosthogAnalytics";
 import { checkForParallelCalls } from "../../src/room/checkForParallelCalls";
-import { withFakeTimers } from "../utils";
+import { withFakeTimers } from "../utils/test";
 
 const withMockedPosthog = (
   continuation: (posthog: Mocked<PosthogAnalytics>) => void,
-) => {
+): void => {
   const posthog = vi.mocked({
     trackEvent: vi.fn(),
   } as unknown as PosthogAnalytics);
@@ -40,7 +41,7 @@ const mockRoomState = (
   groupCallMemberContents: Record<string, unknown>[],
 ): RoomState => {
   const stateEvents = groupCallMemberContents.map((content) => ({
-    getContent: () => content,
+    getContent: (): Record<string, unknown> => content,
   }));
   return { getStateEvents: () => stateEvents } as unknown as RoomState;
 };

src/room/usePageUnload.ts

@@ -1,64 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { useEffect } from "react";
-
-import { platform } from "../Platform";
-
-export function usePageUnload(callback: () => void): void {
-  useEffect(() => {
-    let pageVisibilityTimeout: ReturnType<typeof setTimeout>;
-
-    function onBeforeUnload(event: PageTransitionEvent): void {
-      if (event.type === "visibilitychange") {
-        if (document.visibilityState === "visible") {
-          clearTimeout(pageVisibilityTimeout);
-        } else {
-          // Wait 5 seconds before closing the page to avoid accidentally leaving
-          // TODO: Make this configurable?
-          pageVisibilityTimeout = setTimeout(() => {
-            callback();
-          }, 5000);
-        }
-      } else {
-        callback();
-      }
-    }
-
-    // iOS doesn't fire beforeunload event, so leave the call when you hide the page.
-    if (platform === "ios") {
-      window.addEventListener("pagehide", onBeforeUnload);
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      document.addEventListener("visibilitychange", onBeforeUnload);
-    }
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    window.addEventListener("beforeunload", onBeforeUnload);
-
-    return (): void => {
-      window.removeEventListener("pagehide", onBeforeUnload);
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      document.removeEventListener("visibilitychange", onBeforeUnload);
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      window.removeEventListener("beforeunload", onBeforeUnload);
-      clearTimeout(pageVisibilityTimeout);
-    };
-  }, [callback]);
-}

src/rtcSessionHelper.test.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { expect, test, vi } from "vitest";
 
 import { enterRTCSession } from "../src/rtcSessionHelpers";
 import { Config } from "../src/config/Config";

src/settings/SettingsModal.tsx

@@ -30,7 +30,7 @@ import UserIcon from "../icons/User.svg?react";
 import FeedbackIcon from "../icons/Feedback.svg?react";
 import { SelectInput } from "../input/SelectInput";
 import { FieldRow, InputField } from "../input/Input";
-import { Body, Caption } from "../typography/Typography";
+import { Caption } from "../typography/Typography";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { ProfileSettingsTab } from "./ProfileSettingsTab";
 import { FeedbackSettingsTab } from "./FeedbackSettingsTab";
@@ -42,9 +42,9 @@ import {
 import { widget } from "../widget";
 import {
   useSetting,
-  optInAnalytics as optInAnalyticsSetting,
   developerSettingsTab as developerSettingsTabSetting,
   duplicateTiles as duplicateTilesSetting,
+  useOptInAnalytics,
 } from "./settings";
 import { isFirefox } from "../Platform";
 
@@ -77,7 +77,7 @@ export const SettingsModal: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
 
-  const [optInAnalytics, setOptInAnalytics] = useSetting(optInAnalyticsSetting);
+  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const [developerSettingsTab, setDeveloperSettingsTab] = useSetting(
     developerSettingsTabSetting,
   );
@@ -239,13 +239,27 @@ export const SettingsModal: FC<Props> = ({
         </>
       }
     >
-      <FieldRow>
-        <Body className={styles.fieldRowText}>
-          {t("version", {
-            version: import.meta.env.VITE_APP_VERSION || "dev",
-          })}
-        </Body>
-      </FieldRow>
+      <p>
+        {t("version", {
+          productName: import.meta.env.VITE_PRODUCT_NAME || "Element Call",
+          version: import.meta.env.VITE_APP_VERSION || "dev",
+        })}
+      </p>
+      <p>
+        {t("crypto_version", {
+          version: client.getCrypto()?.getVersion() || "unknown",
+        })}
+      </p>
+      <p>
+        {t("matrix_id", {
+          id: client.getUserId() || "unknown",
+        })}
+      </p>
+      <p>
+        {t("device_id", {
+          id: client.getDeviceId() || "unknown",
+        })}
+      </p>
       <FieldRow>
         <InputField
           id="duplicateTiles"

src/state/CallViewModel.ts

@@ -26,7 +26,6 @@ import {
   RemoteParticipant,
 } from "livekit-client";
 import { Room as MatrixRoom, RoomMember } from "matrix-js-sdk/src/matrix";
-import { useEffect, useRef } from "react";
 import {
   EMPTY,
   Observable,
@@ -44,7 +43,6 @@ import {
   race,
   sample,
   scan,
-  shareReplay,
   skip,
   startWith,
   switchAll,
@@ -58,12 +56,10 @@ import {
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { ViewModel } from "./ViewModel";
-import { useObservable } from "./useObservable";
 import {
   ECAddonConnectionState,
   ECConnectionState,
 } from "../livekit/useECConnectionState";
-import { usePrevious } from "../usePrevious";
 import {
   LocalUserMediaViewModel,
   MediaViewModel,
@@ -71,10 +67,11 @@ import {
   ScreenShareViewModel,
   UserMediaViewModel,
 } from "./MediaViewModel";
-import { accumulate, finalizeValue } from "../observable-utils";
+import { accumulate, finalizeValue } from "../utils/observable";
 import { ObservableScope } from "./ObservableScope";
 import { duplicateTiles } from "../settings/settings";
 import { isFirefox } from "../Platform";
+import { setPipEnabled } from "../controls";
 
 // How long we wait after a focus switch before showing the real participant
 // list again
@@ -194,11 +191,9 @@ class UserMedia {
         ),
       ),
       startWith(false),
-      distinctUntilChanged(),
-      this.scope.bind(),
       // Make this Observable hot so that the timers don't reset when you
       // resubscribe
-      shareReplay(1),
+      this.scope.state(),
     );
 
     this.presenter = observeParticipantEvents(
@@ -261,7 +256,7 @@ function findMatrixMember(
 export class CallViewModel extends ViewModel {
   private readonly rawRemoteParticipants = connectedParticipantsObserver(
     this.livekitRoom,
-  ).pipe(shareReplay(1));
+  ).pipe(this.scope.state());
 
   // Lists of participants to "hold" on display, even if LiveKit claims that
   // they've left
@@ -383,7 +378,7 @@ export class CallViewModel extends ViewModel {
     finalizeValue((ts) => {
       for (const t of ts) t.destroy();
     }),
-    shareReplay(1),
+    this.scope.state(),
   );
 
   private readonly userMedia: Observable<UserMedia[]> = this.mediaItems.pipe(
@@ -402,7 +397,7 @@ export class CallViewModel extends ViewModel {
       map((mediaItems) =>
         mediaItems.filter((m): m is ScreenShare => m instanceof ScreenShare),
       ),
-      shareReplay(1),
+      this.scope.state(),
     );
 
   private readonly hasRemoteScreenShares: Observable<boolean> =
@@ -443,9 +438,8 @@ export class CallViewModel extends ViewModel {
         },
         null,
       ),
-      distinctUntilChanged(),
       map((speaker) => speaker.vm),
-      shareReplay(1),
+      this.scope.state(),
       throttleTime(1600, undefined, { leading: true, trailing: true }),
     );
 
@@ -513,16 +507,17 @@ export class CallViewModel extends ViewModel {
   private readonly spotlight: Observable<MediaViewModel[]> =
     this.spotlightAndPip.pipe(
       switchMap(([spotlight]) => spotlight),
-      shareReplay(1),
+      this.scope.state(),
     );
 
   private readonly pip: Observable<UserMediaViewModel | null> =
     this.spotlightAndPip.pipe(switchMap(([, pip]) => pip));
 
-  /**
-   * The general shape of the window.
-   */
-  public readonly windowMode: Observable<WindowMode> = fromEvent(
+  private readonly pipEnabled: Observable<boolean> = setPipEnabled.pipe(
+    startWith(false),
+  );
+
+  private readonly naturalWindowMode: Observable<WindowMode> = fromEvent(
     window,
     "resize",
   ).pipe(
@@ -538,15 +533,21 @@ export class CallViewModel extends ViewModel {
       if (width <= 600) return "narrow";
       return "normal";
     }),
-    distinctUntilChanged(),
-    shareReplay(1),
+    this.scope.state(),
+  );
+
+  /**
+   * The general shape of the window.
+   */
+  public readonly windowMode: Observable<WindowMode> = this.pipEnabled.pipe(
+    switchMap((pip) => (pip ? of<WindowMode>("pip") : this.naturalWindowMode)),
   );
 
   private readonly spotlightExpandedToggle = new Subject<void>();
   public readonly spotlightExpanded: Observable<boolean> =
     this.spotlightExpandedToggle.pipe(
       accumulate(false, (expanded) => !expanded),
-      shareReplay(1),
+      this.scope.state(),
     );
 
   private readonly gridModeUserSelection = new Subject<GridMode>();
@@ -572,8 +573,7 @@ export class CallViewModel extends ViewModel {
             )
         ).pipe(startWith(userSelection ?? "grid")),
       ),
-      distinctUntilChanged(),
-      shareReplay(1),
+      this.scope.state(),
     );
 
   public setGridMode(value: GridMode): void {
@@ -629,7 +629,7 @@ export class CallViewModel extends ViewModel {
   );
 
   private readonly pipLayout: Observable<Layout> = this.spotlight.pipe(
-    map((spotlight): Layout => ({ type: "pip", spotlight })),
+    map((spotlight) => ({ type: "pip", spotlight })),
   );
 
   public readonly layout: Observable<Layout> = this.windowMode.pipe(
@@ -690,13 +690,12 @@ export class CallViewModel extends ViewModel {
           return this.pipLayout;
       }
     }),
-    shareReplay(1),
+    this.scope.state(),
   );
 
   public showSpotlightIndicators: Observable<boolean> = this.layout.pipe(
     map((l) => l.type !== "grid"),
-    distinctUntilChanged(),
-    shareReplay(1),
+    this.scope.state(),
   );
 
   /**
@@ -720,8 +719,7 @@ export class CallViewModel extends ViewModel {
 
   public showSpeakingIndicators: Observable<boolean> = this.layout.pipe(
     map((l) => l.type !== "one-on-one" && !l.type.startsWith("spotlight-")),
-    distinctUntilChanged(),
-    shareReplay(1),
+    this.scope.state(),
   );
 
   public readonly toggleSpotlightExpanded: Observable<(() => void) | null> =
@@ -741,7 +739,7 @@ export class CallViewModel extends ViewModel {
       map((enabled) =>
         enabled ? (): void => this.spotlightExpandedToggle.next() : null,
       ),
-      shareReplay(1),
+      this.scope.state(),
     );
 
   private readonly screenTap = new Subject<void>();
@@ -771,8 +769,7 @@ export class CallViewModel extends ViewModel {
 
   public readonly showHeader: Observable<boolean> = this.windowMode.pipe(
     map((mode) => mode !== "pip" && mode !== "flat"),
-    distinctUntilChanged(),
-    shareReplay(1),
+    this.scope.state(),
   );
 
   public readonly showFooter = this.windowMode.pipe(
@@ -815,8 +812,7 @@ export class CallViewModel extends ViewModel {
           );
       }
     }),
-    distinctUntilChanged(),
-    shareReplay(1),
+    this.scope.state(),
   );
 
   public constructor(
@@ -829,34 +825,3 @@ export class CallViewModel extends ViewModel {
     super();
   }
 }
-
-export function useCallViewModel(
-  matrixRoom: MatrixRoom,
-  livekitRoom: LivekitRoom,
-  encrypted: boolean,
-  connectionState: ECConnectionState,
-): CallViewModel {
-  const prevMatrixRoom = usePrevious(matrixRoom);
-  const prevLivekitRoom = usePrevious(livekitRoom);
-  const prevEncrypted = usePrevious(encrypted);
-  const connectionStateObservable = useObservable(connectionState);
-
-  const vm = useRef<CallViewModel>();
-  if (
-    matrixRoom !== prevMatrixRoom ||
-    livekitRoom !== prevLivekitRoom ||
-    encrypted !== prevEncrypted
-  ) {
-    vm.current?.destroy();
-    vm.current = new CallViewModel(
-      matrixRoom,
-      livekitRoom,
-      encrypted,
-      connectionStateObservable,
-    );
-  }
-
-  useEffect(() => vm.current?.destroy(), []);
-
-  return vm.current!;
-}

src/state/MediaViewModel.ts

@@ -36,12 +36,10 @@ import {
   BehaviorSubject,
   Observable,
   combineLatest,
-  distinctUntilChanged,
   distinctUntilKeyChanged,
   fromEvent,
   map,
   of,
-  shareReplay,
   startWith,
   switchMap,
 } from "rxjs";
@@ -84,7 +82,6 @@ function observeTrackReference(
       source,
     })),
     distinctUntilKeyChanged("publication"),
-    shareReplay(1),
   );
 }
 
@@ -119,15 +116,19 @@ abstract class BaseMediaViewModel extends ViewModel {
     videoSource: VideoSource,
   ) {
     super();
-    const audio = observeTrackReference(participant, audioSource);
-    this.video = observeTrackReference(participant, videoSource);
+    const audio = observeTrackReference(participant, audioSource).pipe(
+      this.scope.state(),
+    );
+    this.video = observeTrackReference(participant, videoSource).pipe(
+      this.scope.state(),
+    );
     this.unencryptedWarning = combineLatest(
       [audio, this.video],
       (a, v) =>
         callEncrypted &&
         (a.publication?.isEncrypted === false ||
           v.publication?.isEncrypted === false),
-    ).pipe(distinctUntilChanged(), shareReplay(1));
+    ).pipe(this.scope.state());
   }
 }
 
@@ -151,7 +152,7 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
     ParticipantEvent.IsSpeakingChanged,
   ).pipe(
     map((p) => p.isSpeaking),
-    shareReplay(1),
+    this.scope.state(),
   );
 
   /**
@@ -184,7 +185,7 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
       Track.Source.Camera,
     );
 
-    const media = observeParticipantMedia(participant).pipe(shareReplay(1));
+    const media = observeParticipantMedia(participant).pipe(this.scope.state());
     this.audioEnabled = media.pipe(
       map((m) => m.microphoneTrack?.isMuted === false),
     );
@@ -216,7 +217,7 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
         map(() => facingModeFromLocalTrack(track).facingMode === "user"),
       );
     }),
-    shareReplay(1),
+    this.scope.state(),
   );
 
   /**

src/state/ObservableScope.ts

@@ -14,7 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MonoTypeOperatorFunction, Subject, takeUntil } from "rxjs";
+import {
+  distinctUntilChanged,
+  Observable,
+  shareReplay,
+  Subject,
+  takeUntil,
+} from "rxjs";
+
+type MonoTypeOperator = <T>(o: Observable<T>) => Observable<T>;
 
 /**
  * A scope which limits the execution lifetime of its bound Observables.
@@ -22,12 +30,26 @@ import { MonoTypeOperatorFunction, Subject, takeUntil } from "rxjs";
 export class ObservableScope {
   private readonly ended = new Subject<void>();
 
+  private readonly bindImpl: MonoTypeOperator = takeUntil(this.ended);
+
   /**
    * Binds an Observable to this scope, so that it completes when the scope
    * ends.
    */
-  public bind<T>(): MonoTypeOperatorFunction<T> {
-    return takeUntil(this.ended);
+  public bind(): MonoTypeOperator {
+    return this.bindImpl;
+  }
+
+  private readonly stateImpl: MonoTypeOperator = (o) =>
+    o.pipe(this.bind(), distinctUntilChanged(), shareReplay(1));
+
+  /**
+   * Transforms an Observable into a hot state Observable which replays its
+   * latest value upon subscription, skips updates with identical values, and
+   * is bound to this scope.
+   */
+  public state(): MonoTypeOperator {
+    return this.stateImpl;
   }
 
   /**

src/tile/SpotlightTile.module.css

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.tile {
+.contents {
+  block-size: 100%;
+  inline-size: 100%;
   display: flex;
   border-radius: var(--cpd-space-6x);
   contain: strict;
@@ -29,7 +31,7 @@ limitations under the License.
   scroll-behavior: smooth; */
 }
 
-.tile.maximised {
+.tile.maximised .contents {
   border-radius: 0;
 }
 
@@ -153,7 +155,7 @@ limitations under the License.
 }
 
 .indicators > .item {
-  inline-size: 32px;
+  flex-basis: 32px;
   block-size: 2px;
   transition: background-color ease 0.15s;
 }

src/tile/SpotlightTile.tsx

@@ -272,16 +272,18 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
             <ChevronLeftIcon aria-hidden width={24} height={24} />
           </button>
         )}
-        {vms.map((vm) => (
-          <SpotlightItem
-            key={vm.id}
-            vm={vm}
-            targetWidth={targetWidth}
-            targetHeight={targetHeight}
-            intersectionObserver={intersectionObserver}
-            snap={scrollToId === null || scrollToId === vm.id}
-          />
-        ))}
+        <div className={styles.contents}>
+          {vms.map((vm) => (
+            <SpotlightItem
+              key={vm.id}
+              vm={vm}
+              targetWidth={targetWidth}
+              targetHeight={targetHeight}
+              intersectionObserver={intersectionObserver}
+              snap={scrollToId === null || scrollToId === vm.id}
+            />
+          ))}
+        </div>
         {onToggleExpanded && (
           <button
             className={classNames(styles.expand)}
@@ -311,7 +313,11 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
             })}
           >
             {vms.map((vm) => (
-              <div className={styles.item} data-visible={vm.id === visibleId} />
+              <div
+                key={vm.id}
+                className={styles.item}
+                data-visible={vm.id === visibleId}
+              />
             ))}
           </div>
         )}

src/useCallViewKeyboardShortcuts.test.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import { render } from "@testing-library/react";
 import { FC, useRef } from "react";
-import { test } from "vitest";
+import { expect, test, vi } from "vitest";
 import { Button } from "@vector-im/compound-web";
 import userEvent from "@testing-library/user-event";
 

src/useEvents.ts

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import { useEffect } from "react";
-import EventEmitter, { EventMap } from "typed-emitter";
 
 import type {
   Listener,
@@ -60,20 +59,3 @@ export function useTypedEventEmitter<
     };
   }, [emitter, eventType, listener]);
 }
-
-// Shortcut for registering a listener on an eventemitter3 EventEmitter (ie. what the LiveKit SDK uses)
-export function useEventEmitterThree<
-  EventType extends keyof T,
-  T extends EventMap,
->(
-  emitter: EventEmitter<T>,
-  eventType: EventType,
-  listener: T[EventType],
-): void {
-  useEffect(() => {
-    emitter.on(eventType, listener);
-    return (): void => {
-      emitter.off(eventType, listener);
-    };
-  }, [emitter, eventType, listener]);
-}

src/useLocalStorage.ts

@@ -50,9 +50,6 @@ export const useLocalStorage = (
   ];
 };
 
-export const getLocalStorageItem = (key: string): LocalStorageItem =>
-  localStorage.getItem(key);
-
 export const setLocalStorageItem = (key: string, value: string): void => {
   localStorage.setItem(key, value);
   localStorageBus.emit(key, value);

src/usePrevious.ts

@@ -1,27 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { useRef } from "react";
-
-/**
- * React hook that returns the value given on the previous render.
- */
-export function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T>();
-  const previous = ref.current;
-  ref.current = value;
-  return previous;
-}

src/utils/matrix.ts

@@ -32,12 +32,11 @@ import { secureRandomBase64Url } from "matrix-js-sdk/src/randomstring";
 
 import type { MatrixClient } from "matrix-js-sdk/src/client";
 import type { Room } from "matrix-js-sdk/src/models/room";
-import IndexedDBWorker from "./IndexedDBWorker?worker";
-import { generateUrlSearchParams, getUrlParams } from "./UrlParams";
-import { loadOlm } from "./olm";
-import { Config } from "./config/Config";
-import { E2eeType } from "./e2ee/e2eeType";
-import { EncryptionSystem, saveKeyForRoom } from "./e2ee/sharedKeyManagement";
+import IndexedDBWorker from "../IndexedDBWorker?worker";
+import { generateUrlSearchParams, getUrlParams } from "../UrlParams";
+import { Config } from "../config/Config";
+import { E2eeType } from "../e2ee/e2eeType";
+import { EncryptionSystem, saveKeyForRoom } from "../e2ee/sharedKeyManagement";
 
 export const fallbackICEServerAllowed =
   import.meta.env.VITE_FALLBACK_STUN_ALLOWED === "true";
@@ -97,8 +96,6 @@ export async function initClient(
   clientOptions: ICreateClientOpts,
   restore: boolean,
 ): Promise<MatrixClient> {
-  await loadOlm();
-
   let indexedDB: IDBFactory | undefined;
   try {
     indexedDB = window.indexedDB;
@@ -198,7 +195,7 @@ export async function initClient(
     await client.store.startup();
   }
 
-  await client.initCrypto();
+  await client.initRustCrypto();
   client.setGlobalErrorOnUnknownDevices(false);
   // Once startClient is called, syncs are run asynchronously.
   // Also, sync completion is communicated only via events.
@@ -249,38 +246,6 @@ export function sanitiseRoomNameInput(input: string): string {
   return input;
 }
 
-/**
- * XXX: What is this trying to do? It looks like it's getting the localpart from
- * a room alias, but why is it splitting on hyphens and then putting spaces in??
- * @param roomId
- * @returns
- */
-export function roomNameFromRoomId(roomId: string): string {
-  return roomId
-    .match(/([^:]+):.*$/)![1]
-    .substring(1)
-    .split("-")
-    .map((part) =>
-      part.length > 0 ? part.charAt(0).toUpperCase() + part.slice(1) : part,
-    )
-    .join(" ")
-    .toLowerCase();
-}
-
-export function isLocalRoomId(roomId: string, client: MatrixClient): boolean {
-  if (!roomId) {
-    return false;
-  }
-
-  const parts = roomId.match(/[^:]+:(.*)$/)!;
-
-  if (parts.length < 2) {
-    return false;
-  }
-
-  return parts[1] === client.getDomain();
-}
-
 interface CreateRoomResult {
   roomId: string;
   alias?: string;

src/vitest.setup.ts

@@ -0,0 +1,39 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import "global-jsdom/register";
+
+import i18n from "i18next";
+import posthog from "posthog-js";
+import { initReactI18next } from "react-i18next";
+import { afterEach } from "vitest";
+import { cleanup } from "@testing-library/react";
+
+import { Config } from "./config/Config";
+
+// Bare-minimum i18n config
+i18n.use(initReactI18next).init({
+  lng: "en-GB",
+  fallbackLng: "en-GB",
+  interpolation: {
+    escapeValue: false, // React has built-in XSS protections
+  },
+});
+
+Config.initDefault();
+posthog.opt_out_capturing();
+
+afterEach(cleanup);

src/widget.ts

@@ -31,21 +31,6 @@ export enum ElementWidgetActions {
   HangupCall = "im.vector.hangup",
   TileLayout = "io.element.tile_layout",
   SpotlightLayout = "io.element.spotlight_layout",
-
-  // Element Call -> host requesting to start a screenshare
-  // (ie. expects a ScreenshareStart once the user has picked a source)
-  // Element Call -> host requesting to start a screenshare
-  // (ie. expects a ScreenshareStart once the user has picked a source)
-  // replies with { pending } where pending is true if the host has asked
-  // the user to choose a window and false if not (ie. if the host isn't
-  // running within Electron)
-  ScreenshareRequest = "io.element.screenshare_request",
-  // host -> Element Call telling EC to start screen sharing with
-  // the given source
-  ScreenshareStart = "io.element.screenshare_start",
-  // host -> Element Call telling EC to stop screen sharing, or that
-  // the user cancelled when selecting a source after a ScreenshareRequest
-  ScreenshareStop = "io.element.screenshare_stop",
   // This can be sent as from or to widget
   // fromWidget: updates the client about the current device mute state
   // toWidget: the client requests a specific device mute configuration
@@ -68,10 +53,6 @@ export interface JoinCallData {
   videoInput: string | null;
 }
 
-export interface ScreenshareStartData {
-  desktopCapturerSourceId: string;
-}
-
 export interface WidgetHelpers {
   api: WidgetApi;
   lazyActions: LazyEventEmitter;
@@ -101,8 +82,6 @@ export const widget = ((): WidgetHelpers | null => {
         ElementWidgetActions.HangupCall,
         ElementWidgetActions.TileLayout,
         ElementWidgetActions.SpotlightLayout,
-        ElementWidgetActions.ScreenshareStart,
-        ElementWidgetActions.ScreenshareStop,
         ElementWidgetActions.DeviceMute,
       ].forEach((action) => {
         api.on(`action:${action}`, (ev: CustomEvent<IWidgetApiRequest>) => {
@@ -200,7 +179,8 @@ export const widget = ((): WidgetHelpers | null => {
 
       return { api, lazyActions, client: clientPromise };
     } else {
-      logger.info("No widget API available");
+      if (import.meta.env.MODE !== "test")
+        logger.info("No widget API available");
       return null;
     }
   } catch (e) {

test/Toast-test.tsx

@@ -1,60 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { vi } from "vitest";
-import { screen, render } from "@testing-library/react";
-import { Toast } from "../src/Toast";
-import userEvent from "@testing-library/user-event";
-import { withFakeTimers } from "./utils";
-
-test("Toast renders", () => {
-  render(
-    <Toast open={false} onDismiss={() => {}}>
-      Hello world!
-    </Toast>,
-  );
-  expect(screen.queryByRole("dialog")).toBe(null);
-  render(
-    <Toast open={true} onDismiss={() => {}}>
-      Hello world!
-    </Toast>,
-  );
-  expect(screen.getByRole("dialog")).toMatchSnapshot();
-});
-
-test("Toast dismisses when clicked", async () => {
-  const onDismiss = vi.fn();
-  render(
-    <Toast open={true} onDismiss={onDismiss}>
-      Hello world!
-    </Toast>,
-  );
-  await userEvent.click(screen.getByRole("dialog"));
-  expect(onDismiss).toHaveBeenCalled();
-});
-
-test("Toast dismisses itself after the specified timeout", async () => {
-  withFakeTimers(() => {
-    const onDismiss = vi.fn();
-    render(
-      <Toast open={true} onDismiss={onDismiss} autoDismiss={2000}>
-        Hello world!
-      </Toast>,
-    );
-    vi.advanceTimersByTime(2000);
-    expect(onDismiss).toHaveBeenCalled();
-  });
-});

tsconfig.json

@@ -48,10 +48,7 @@
   },
   "include": [
     "./node_modules/matrix-js-sdk/src/@types/*.d.ts",
-    "./node_modules/vitest/globals.d.ts",
     "./src/**/*.ts",
-    "./src/**/*.tsx",
-    "./test/**/*.ts",
-    "./test/**/*.tsx"
+    "./src/**/*.tsx"
   ]
 }

vitest.config.js

@@ -1,22 +1,22 @@
 import { defineConfig, mergeConfig } from "vitest/config";
-import viteConfig from "./vite.config";
+import viteConfig from "./vite.config.js";
 
 export default defineConfig((configEnv) =>
   mergeConfig(
     viteConfig(configEnv),
     defineConfig({
       test: {
-        globals: true,
         environment: "jsdom",
         css: {
           modules: {
             classNameStrategy: "non-scoped",
           },
         },
-        include: ["test/**/*-test.[jt]s?(x)"],
+        isolate: false,
+        setupFiles: ["src/vitest.setup.ts"],
         coverage: {
-          reporter: ["text", "html"],
-          exclude: ["node_modules/"],
+          reporter: ["html", "json"],
+          include: ["src/"],
         },
       },
     }),