Merge pull request #2069 from element-hq/renovate/typescript-eslint-monorepo

Update typescript-eslint monorepo to v6.19.0
Merge pull request #2066 from element-hq/renovate/vitejs-plugin-basic-ssl-1.x-lockfile
2024-01-16 10:24:15 -05:00 · 2024-01-16 10:23:54 -05:00 · 2024-01-16 13:41:23 +01:00 · 2024-01-16 13:39:33 +01:00 · 2024-01-16 13:38:31 +01:00 · 2024-01-16 13:37:56 +01:00
66 changed files with 3475 additions and 2661 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -38,6 +38,16 @@ module.exports = {
    "jsx-a11y/media-has-caption": "off",
    // We should use the js-sdk logger, never console directly.
    "no-console": ["error"],
+    "no-restricted-imports": [
+      "error",
+      {
+        name: "@react-rxjs/core",
+        importNames: ["Subscribe", "RemoveSubscribe"],
+        message:
+          "These components are easy to misuse, please use the 'subscribe' component wrapper instead",
+      },
+    ],
+    "react/display-name": "error",
  },
  settings: {
    react: {
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1 +1 @@
-* @vector-im/element-call-reviewers
+* @element-hq/element-call-reviewers
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -26,7 +26,7 @@ jobs:
          VITE_APP_VERSION: ${{ github.sha }}
          NODE_OPTIONS: "--max-old-space-size=4096"
      - name: Upload Artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
        with:
          name: build
          path: dist
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -14,7 +14,7 @@ jobs:
      - name: Check out test private repo
        uses: actions/checkout@v4
        with:
-          repository: vector-im/static-call-participant
+          repository: element-hq/static-call-participant
          ref: refs/heads/main
          path: static-call-participant
          token: ${{ secrets.GH_E2E_TEST_TOKEN }}
--- a/.github/workflows/netlify-pr.yaml
+++ b/.github/workflows/netlify-pr.yaml
@@ -36,7 +36,7 @@ jobs:
      # There's a 'download artifact' action, but it hasn't been updated for the workflow_run action
      # (https://github.com/actions/download-artifact/issues/60) so instead we get this mess:
      - name: 📥 Download artifact
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v3
        with:
          run_id: ${{ github.event.workflow_run.id }}
          name: build
@@ -44,12 +44,12 @@ jobs:

      - name: Add redirects file
        # We fetch from github directly as we don't bother checking out the repo
-        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/main/config/netlify_redirects > webapp/_redirects
+        run: curl -s https://raw.githubusercontent.com/element-hq/element-call/main/config/netlify_redirects > webapp/_redirects

      - name: Add config file
        env:
          HEADBRACH: ${{ github.event.workflow_run.head_branch }}
-        run: curl -s "https://raw.githubusercontent.com/vector-im/element-call/${HEADBRACH}/config/element_io_preview.json" > webapp/config.json
+        run: curl -s "https://raw.githubusercontent.com/element-hq/element-call/${HEADBRACH}/config/element_io_preview.json" > webapp/config.json

      - name: ☁️ Deploy to Netlify
        id: netlify
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -54,7 +54,7 @@ jobs:
          tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist

      - name: Upload
-        uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32
+        uses: actions/upload-artifact@1eb3cb2b3e0f29609092a73eb033bb759a334595
        env:
          GITHUB_TOKEN: ${{ github.token }}
        with:
@@ -62,7 +62,7 @@ jobs:

      - name: Extract metadata (tags, labels) for Docker
        id: meta
-        uses: docker/metadata-action@2a4836ac76fe8f5d0ee3a0d89aa12a80cc552ad3
+        uses: docker/metadata-action@dbef88086f6cef02e264edb7dbf63250c17cef6c
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
          tags: |
@@ -72,10 +72,10 @@ jobs:
            type=raw,value=latest-ci_${{steps.current-time.outputs.unix_time}},enable={{is_default_branch}}

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@6d5347c4025fdf2bb05167a2519cac535a14a408
+        uses: docker/setup-buildx-action@edfb0fe6204400c56fbfd3feba3fe9ad1adfa345

      - name: Build and push Docker image
-        uses: docker/build-push-action@4a13e500e55cf31b7a5d59a38ab2040ab0f42f56
+        uses: docker/build-push-action@9f6f8c940b91232557f8699b21341a08624a8dce
        with:
          context: .
          platforms: linux/amd64,linux/arm64
--- a/.github/workflows/translations-download.yaml
+++ b/.github/workflows/translations-download.yaml
@@ -15,7 +15,7 @@ jobs:
      - name: Checkout the code
        uses: actions/checkout@v4

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
          cache: "yarn"

--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@

 Group calls with WebRTC that leverage [Matrix](https://matrix.org) and an open-source WebRTC toolkit from [LiveKit](https://livekit.io/).

-For prior version of the Element Call that relied solely on full-mesh logic, check [`full-mesh`](https://github.com/vector-im/element-call/tree/full-mesh) branch.
+For prior version of the Element Call that relied solely on full-mesh logic, check [`full-mesh`](https://github.com/element-hq/element-call/tree/full-mesh) branch.

 ![A demo of Element Call with six people](demo.jpg)

@@ -16,7 +16,7 @@ To try it out, visit our hosted version at [call.element.io](https://call.elemen
 Until prebuilt tarballs are available, you'll need to build Element Call from source. First, clone and install the package:

 ```
-git clone https://github.com/vector-im/element-call.git
+git clone https://github.com/element-hq/element-call.git
 cd element-call
 yarn
 yarn build
@@ -74,7 +74,7 @@ yarn link
 Next, we can set up this project:

 ```
-git clone https://github.com/vector-im/element-call.git
+git clone https://github.com/element-hq/element-call.git
 cd element-call
 yarn
 yarn link matrix-js-sdk
@@ -93,12 +93,12 @@ service for development. These use a test 'secret' published in this
 repository, so this must be used only for local development and
 **_never be exposed to the public Internet._**

-To use it, add SFU parameter in your local config `./public/config.yml`:
+To use it, add SFU parameter in your local config `./public/config.json`:

-```yaml
+```json
 "livekit": {
-    "jwt_service_url": "http://localhost:8881"
-  },
+  "livekit_service_url": "http://localhost:8881"
+},
 ```

 Run backend components:
--- a/backend-docker-compose.yml
+++ b/backend-docker-compose.yml
@@ -5,7 +5,7 @@ networks:

 services:
  auth-service:
-    image: ghcr.io/vector-im/lk-jwt-service:latest-ci
+    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
    hostname: auth-server
    ports:
      - 8881:8080
--- a/package.json
+++ b/package.json
@@ -18,16 +18,18 @@
  },
  "dependencies": {
    "@juggle/resize-observer": "^3.3.1",
+    "@livekit/components-core": "^0.8.0",
    "@livekit/components-react": "^1.1.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/exporter-trace-otlp-http": "^0.45.0",
-    "@opentelemetry/instrumentation-document-load": "^0.33.0",
-    "@opentelemetry/instrumentation-user-interaction": "^0.33.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.47.0",
+    "@opentelemetry/instrumentation-document-load": "^0.34.0",
+    "@opentelemetry/instrumentation-user-interaction": "^0.34.0",
    "@opentelemetry/sdk-trace-web": "^1.9.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",
@@ -37,6 +39,7 @@
    "@react-aria/tabs": "^3.1.0",
    "@react-aria/tooltip": "^3.1.3",
    "@react-aria/utils": "^3.10.0",
+    "@react-rxjs/core": "^0.10.7",
    "@react-spring/web": "^9.4.4",
    "@react-stately/collections": "^3.3.4",
    "@react-stately/select": "^3.1.3",
@@ -47,7 +50,7 @@
    "@types/lodash": "^4.14.199",
    "@use-gesture/react": "^10.2.11",
    "@vector-im/compound-design-tokens": "^0.1.0",
-    "@vector-im/compound-web": "^0.6.0",
+    "@vector-im/compound-web": "^2.0.0",
    "@vitejs/plugin-basic-ssl": "^1.0.1",
    "@vitejs/plugin-react": "^4.0.1",
    "buffer": "^6.0.3",
@@ -58,7 +61,7 @@
    "i18next-http-backend": "^2.0.0",
    "livekit-client": "^1.12.3",
    "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#eca651c0c2ff0600bdae0bb6aba43485e48b69d5",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#2cd63ca4b90eb2e4d22b45ae281a81c4514e757a",
    "matrix-widget-api": "^1.3.1",
    "normalize.css": "^8.0.1",
    "pako": "^2.0.4",
@@ -66,15 +69,16 @@
    "posthog-js": "^1.29.0",
    "react": "18",
    "react-dom": "18",
-    "react-i18next": "^13.0.0",
+    "react-i18next": "^14.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": "^2.0.3",
    "unique-names-generator": "^4.6.0",
    "uuid": "9",
-    "vaul": "^0.7.0"
+    "vaul": "^0.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.16.5",
@@ -110,7 +114,7 @@
    "eslint-plugin-matrix-org": "^1.2.1",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-unicorn": "^49.0.0",
+    "eslint-plugin-unicorn": "^50.0.0",
    "i18next-parser": "^8.0.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.2.2",
@@ -120,7 +124,7 @@
    "sass": "^1.42.1",
    "typescript": "^5.1.6",
    "typescript-eslint-language-service": "^5.0.5",
-    "vite": "^4.2.0",
+    "vite": "^5.0.0",
    "vite-plugin-html-template": "^1.1.0",
    "vite-plugin-svgr": "^4.0.0"
  },
--- a/public/locales/en-GB/app.json
+++ b/public/locales/en-GB/app.json
@@ -49,6 +49,7 @@
    "home": "Home",
    "loading": "Loading…",
    "microphone": "Microphone",
+    "options": "Options",
    "password": "Password",
    "profile": "Profile",
    "settings": "Settings",
@@ -57,10 +58,8 @@
    "video": "Video"
  },
  "disconnected_banner": "Connectivity to the server has been lost.",
-  "exit_fullscreen_button_label": "Exit full screen",
  "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>",
-  "fullscreen_button_label": "Full screen",
  "group_call_loader_failed_heading": "Call not found",
  "group_call_loader_failed_text": "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.",
  "hangup_button_label": "End call",
@@ -81,7 +80,6 @@
    "join_button": "Join call",
    "leave_button": "Back to recents"
  },
-  "local_volume_label": "Local volume",
  "log_in": "Log In",
  "logging_in": "Logging in…",
  "login_auth_links": "<0>Create an account</0> Or <2>Access as a guest</2>",
@@ -145,8 +143,11 @@
  "unmute_microphone_button_label": "Unmute microphone",
  "version": "Version: {{version}}",
  "video_tile": {
-    "presenter_label": "{{displayName}} is presenting",
-    "sfu_participant_local": "You"
+    "exit_full_screen": "Exit full screen",
+    "full_screen": "Full screen",
+    "mute_for_me": "Mute for me",
+    "sfu_participant_local": "You",
+    "volume": "Volume"
  },
  "waiting_for_participants": "Waiting for other participants…"
 }
--- a/renovate.json
+++ b/renovate.json
@@ -7,5 +7,19 @@
      "matchPackagePatterns": ["matrix-js-sdk"],
      "enabled": false
    }
+  ],
+  "ignoreDeps": [
+    "@react-aria/button",
+    "@react-aria/focus",
+    "@react-aria/menu",
+    "@react-aria/overlays",
+    "@react-aria/select",
+    "@react-aria/tabs",
+    "@react-aria/tooltip",
+    "@react-aria/utils",
+    "@react-stately/collections",
+    "@react-stately/select",
+    "@react-stately/tooltip",
+    "@react-stately/tree"
  ]
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,6 +24,7 @@ import {
 import * as Sentry from "@sentry/react";
 import { OverlayProvider } from "@react-aria/overlays";
 import { History } from "history";
+import { TooltipProvider } from "@vector-im/compound-web";

 import { HomePage } from "./home/HomePage";
 import { LoginPage } from "./auth/LoginPage";
@@ -77,35 +78,37 @@ export const App: FC<AppProps> = ({ history }) => {
    // @ts-ignore
    <Router history={history}>
      <BackgroundProvider>
-        {loaded ? (
-          <Suspense fallback={null}>
-            <ClientProvider>
-              <MediaDevicesProvider>
-                <Sentry.ErrorBoundary fallback={errorPage}>
-                  <OverlayProvider>
-                    <DisconnectedBanner />
-                    <Switch>
-                      <SentryRoute exact path="/">
-                        <HomePage />
-                      </SentryRoute>
-                      <SentryRoute exact path="/login">
-                        <LoginPage />
-                      </SentryRoute>
-                      <SentryRoute exact path="/register">
-                        <RegisterPage />
-                      </SentryRoute>
-                      <SentryRoute path="*">
-                        <RoomPage />
-                      </SentryRoute>
-                    </Switch>
-                  </OverlayProvider>
-                </Sentry.ErrorBoundary>
-              </MediaDevicesProvider>
-            </ClientProvider>
-          </Suspense>
-        ) : (
-          <LoadingView />
-        )}
+        <TooltipProvider>
+          {loaded ? (
+            <Suspense fallback={null}>
+              <ClientProvider>
+                <MediaDevicesProvider>
+                  <Sentry.ErrorBoundary fallback={errorPage}>
+                    <OverlayProvider>
+                      <DisconnectedBanner />
+                      <Switch>
+                        <SentryRoute exact path="/">
+                          <HomePage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/login">
+                          <LoginPage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/register">
+                          <RegisterPage />
+                        </SentryRoute>
+                        <SentryRoute path="*">
+                          <RoomPage />
+                        </SentryRoute>
+                      </Switch>
+                    </OverlayProvider>
+                  </Sentry.ErrorBoundary>
+                </MediaDevicesProvider>
+              </ClientProvider>
+            </Suspense>
+          ) : (
+            <LoadingView />
+          )}
+        </TooltipProvider>
      </BackgroundProvider>
    </Router>
  );
--- a/src/Overlay.module.css
+++ b/src/Overlay.module.css
@@ -16,7 +16,6 @@ limitations under the License.

 .bg {
  position: fixed;
-  z-index: 100;
  inset: 0;
  background: rgba(3, 12, 27, 0.528);
 }
@@ -49,7 +48,6 @@ limitations under the License.

 .overlay {
  position: fixed;
-  z-index: 101;
 }

 .overlay.animate {
--- a/src/Slider.module.css
+++ b/src/Slider.module.css
@@ -0,0 +1,66 @@
+/*
+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.
+*/
+
+.slider {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.track {
+  flex-grow: 1;
+  border-radius: var(--cpd-radius-pill-effect);
+  background: var(--cpd-color-bg-subtle-primary);
+  height: var(--cpd-space-2x);
+  outline: var(--cpd-border-width-1) solid
+    var(--cpd-color-border-interactive-primary);
+  outline-offset: calc(-1 * var(--cpd-border-width-1));
+  cursor: pointer;
+  transition: outline-color ease 0.15s;
+}
+
+.track[data-disabled] {
+  cursor: initial;
+  outline-color: var(--cpd-color-border-disabled);
+}
+
+.highlight {
+  background: var(--cpd-color-bg-action-primary-rest);
+  position: absolute;
+  block-size: 100%;
+  border-radius: var(--cpd-radius-pill-effect);
+  transition: background-color ease 0.15s;
+}
+
+.highlight[data-disabled] {
+  background: var(--cpd-color-bg-action-primary-disabled);
+}
+
+.handle {
+  display: block;
+  block-size: var(--cpd-space-4x);
+  inline-size: var(--cpd-space-4x);
+  border-radius: var(--cpd-radius-pill-effect);
+  background: var(--cpd-color-bg-action-primary-rest);
+  box-shadow: 0 0 0 2px var(--cpd-color-bg-canvas-default);
+  cursor: pointer;
+  transition: background-color ease 0.15s;
+}
+
+.handle[data-disabled] {
+  cursor: initial;
+  background: var(--cpd-color-bg-action-primary-disabled);
+}
--- a/src/Slider.tsx
+++ b/src/Slider.tsx
@@ -0,0 +1,68 @@
+/*
+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, useCallback } from "react";
+import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
+import classNames from "classnames";
+
+import styles from "./Slider.module.css";
+
+interface Props {
+  className?: string;
+  label: string;
+  value: number;
+  onValueChange: (value: number) => void;
+  min: number;
+  max: number;
+  step: number;
+  disabled?: boolean;
+}
+
+/**
+ * A slider control allowing a value to be selected from a range.
+ */
+export const Slider: FC<Props> = ({
+  className,
+  label,
+  value,
+  onValueChange: onValueChangeProp,
+  min,
+  max,
+  step,
+  disabled,
+}) => {
+  const onValueChange = useCallback(
+    ([v]: number[]) => onValueChangeProp(v),
+    [onValueChangeProp],
+  );
+
+  return (
+    <Root
+      className={classNames(className, styles.slider)}
+      value={[value]}
+      onValueChange={onValueChange}
+      min={min}
+      max={max}
+      step={step}
+      disabled={disabled}
+    >
+      <Track className={styles.track}>
+        <Range className={styles.highlight} />
+      </Track>
+      <Thumb className={styles.handle} aria-label={label} />
+    </Root>
+  );
+};
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -59,6 +59,8 @@ const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
  },
 );

+Tooltip.displayName = "Tooltip";
+
 interface TooltipTriggerProps {
  children: ReactElement;
  placement?: Placement;
@@ -112,3 +114,5 @@ export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
    );
  },
 );
+
+TooltipTrigger.displayName = "TooltipTrigger";
--- a/src/TranslatedError.ts
+++ b/src/TranslatedError.ts
@@ -14,10 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import i18n from "i18next";
-
-import type { ParseKeys, TFunction } from "i18next/typescript/t";
-import type { DefaultNamespace, TOptions } from "i18next/typescript/options";
+import type { DefaultNamespace, ParseKeys, TFunction, TOptions } from "i18next";

 /**
 * An error with messages in both English and the user's preferred language.
@@ -45,5 +42,5 @@ class TranslatedErrorImpl extends TranslatedError {}
 // function instead
 export const translatedError = (
  messageKey: ParseKeys<DefaultNamespace, TOptions>,
-  t: typeof i18n.t,
+  t: TFunction<"app", undefined>,
 ): TranslatedError => new TranslatedErrorImpl(messageKey, t);
--- a/src/UserMenuContainer.tsx
+++ b/src/UserMenuContainer.tsx
@@ -19,7 +19,7 @@ import { useHistory, useLocation } from "react-router-dom";

 import { useClientLegacy } from "./ClientContext";
 import { useProfile } from "./profile/useProfile";
-import { SettingsModal } from "./settings/SettingsModal";
+import { defaultSettingsTab, SettingsModal } from "./settings/SettingsModal";
 import { UserMenu } from "./UserMenu";

 interface Props {
@@ -37,17 +37,17 @@ export const UserMenuContainer: FC<Props> = ({ preventNavigation = false }) => {
    [setSettingsModalOpen],
  );

-  const [defaultSettingsTab, setDefaultSettingsTab] = useState<string>();
+  const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);

  const onAction = useCallback(
    async (value: string) => {
      switch (value) {
        case "user":
-          setDefaultSettingsTab("profile");
+          setSettingsTab("profile");
          setSettingsModalOpen(true);
          break;
        case "settings":
-          setDefaultSettingsTab("audio");
+          setSettingsTab("audio");
          setSettingsModalOpen(true);
          break;
        case "logout":
@@ -76,9 +76,10 @@ export const UserMenuContainer: FC<Props> = ({ preventNavigation = false }) => {
      {client && (
        <SettingsModal
          client={client}
-          defaultTab={defaultSettingsTab}
          open={settingsModalOpen}
          onDismiss={onDismissSettingsModal}
+          tab={settingsTab}
+          onTabChange={setSettingsTab}
        />
      )}
    </>
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -30,9 +30,6 @@ import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-
 import ChevronDownIcon from "@vector-im/compound-design-tokens/icons/chevron-down.svg?react";

 import styles from "./Button.module.css";
-import Fullscreen from "../icons/Fullscreen.svg?react";
-import FullscreenExit from "../icons/FullscreenExit.svg?react";
-import { VolumeIcon } from "./VolumeIcon";

 export type ButtonVariant =
  | "default"
@@ -80,6 +77,7 @@ interface Props {
  // TODO: add all props for <Button>
  [index: string]: unknown;
 }
+
 export const Button = forwardRef<HTMLButtonElement, Props>(
  (
    {
@@ -135,6 +133,8 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
  },
 );

+Button.displayName = "Button";
+
 export const MicButton: FC<{
  muted: boolean;
  // TODO: add all props for <Button>
@@ -230,45 +230,3 @@ export const SettingsButton: FC<{
    </Tooltip>
  );
 };
-
-interface AudioButtonProps extends Omit<Props, "variant"> {
-  /**
-   * A number between 0 and 1
-   */
-  volume: number;
-}
-
-export const AudioButton: FC<AudioButtonProps> = ({ volume, ...rest }) => {
-  const { t } = useTranslation();
-
-  return (
-    <Tooltip label={t("local_volume_label")}>
-      <Button variant="icon" {...rest}>
-        <VolumeIcon volume={volume} aria-label={t("local_volume_label")} />
-      </Button>
-    </Tooltip>
-  );
-};
-
-interface FullscreenButtonProps extends Omit<Props, "variant"> {
-  fullscreen?: boolean;
-}
-
-export const FullscreenButton: FC<FullscreenButtonProps> = ({
-  fullscreen,
-  ...rest
-}) => {
-  const { t } = useTranslation();
-  const Icon = fullscreen ? FullscreenExit : Fullscreen;
-  const label = fullscreen
-    ? t("exit_fullscreen_button_label")
-    : t("fullscreen_button_label");
-
-  return (
-    <Tooltip label={label}>
-      <Button variant="icon" {...rest}>
-        <Icon aria-label={label} />
-      </Button>
-    </Tooltip>
-  );
-};
--- a/src/form/Form.tsx
+++ b/src/form/Form.tsx
@@ -38,3 +38,5 @@ export const Form = forwardRef<HTMLFormElement, FormProps>(
    );
  },
 );
+
+Form.displayName = "Form";
--- a/src/icons/AudioLow.svg
+++ b/src/icons/AudioLow.svg
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.9699 2.22605L6 7.20093L1.5 7.20093C0.671573 7.20093 0 7.8725 0 8.70093V15.3009C0 16.1294 0.671571 16.8009 1.5 16.8009L6 16.8009L11.9699 21.7758C12.4584 22.1829 13.2 21.8355 13.2 21.1996V2.80221C13.2 2.16634 12.4584 1.81897 11.9699 2.22605Z" fill="white"/>
-<path d="M17.5896 7.78682C17.2506 7.35087 16.6223 7.27234 16.1864 7.61141C15.7515 7.94959 15.6723 8.57548 16.0083 9.01128L16.0117 9.01586C16.0162 9.02185 16.0246 9.03334 16.0365 9.05007C16.0603 9.08359 16.0977 9.13784 16.1441 9.21085C16.2374 9.3574 16.3654 9.57639 16.4941 9.85222C16.7544 10.4099 17.0003 11.1627 17.0003 12.0008C17.0003 12.8388 16.7544 13.5916 16.4941 14.1493C16.3654 14.4251 16.2374 14.6441 16.1441 14.7907C16.0977 14.8637 16.0603 14.9179 16.0365 14.9514C16.0246 14.9682 16.0162 14.9797 16.0117 14.9857L16.0083 14.9903C15.6723 15.4261 15.7515 16.0519 16.1864 16.3901C16.6223 16.7292 17.2506 16.6506 17.5896 16.2147L16.8003 15.6008C17.5896 16.2147 17.5896 16.2147 17.5896 16.2147L17.5914 16.2124L17.5936 16.2095L17.5994 16.2021L17.6158 16.1802C17.6289 16.1626 17.6463 16.1389 17.6672 16.1094C17.709 16.0505 17.7654 15.9682 17.8315 15.8644C17.9632 15.6574 18.1352 15.3621 18.3065 14.9951C18.6462 14.267 19.0003 13.2199 19.0003 12.0008C19.0003 10.7816 18.6462 9.73448 18.3065 9.00645C18.1352 8.63942 17.9632 8.34412 17.8315 8.1371C17.7654 8.03333 17.709 7.95097 17.6672 7.89207C17.6463 7.8626 17.6289 7.83893 17.6158 7.82132L17.5994 7.79946L17.5936 7.79198L17.5914 7.78911L17.5905 7.78789C17.5905 7.78789 17.5896 7.78682 16.8003 8.40076L17.5896 7.78682Z" fill="white"/>
-</svg>
--- a/src/icons/AudioMuted.svg
+++ b/src/icons/AudioMuted.svg
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.63174 0.583224C2.15798 0.109466 1.38987 0.109466 0.91611 0.583224C0.442351 1.05698 0.442351 1.8251 0.91611 2.29885L5.3958 6.77855H5.37083L15.3629 16.7706V16.7456L20.7144 22.0972C21.1882 22.5709 21.9563 22.5709 22.4301 22.0972C22.9038 21.6234 22.9038 20.8553 22.4301 20.3816L2.63174 0.583224ZM15.3629 3.23319V9.88521L10.2275 4.74987L13.2404 2.2391C14.0833 1.53675 15.3629 2.13608 15.3629 3.23319ZM4.07191 16.8718H7.7929V16.872L13.2404 21.4116C14.0833 22.114 15.3629 21.5146 15.3629 20.4175V20.2018L2.4839 7.32287C1.87536 7.79641 1.48389 8.53577 1.48389 9.36657V14.2838C1.48389 15.7131 2.64258 16.8718 4.07191 16.8718Z" fill="white"/>
-</svg>
--- a/src/icons/Fullscreen.svg
+++ b/src/icons/Fullscreen.svg
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 8.59V4C21 3.45 20.55 3 20 3H15.41C14.52 3 14.07 4.08 14.7 4.71L16.29 6.3L6.29 16.3L4.7 14.71C4.08 14.08 3 14.52 3 15.41V20C3 20.55 3.45 21 4 21H8.59C9.48 21 9.93 19.92 9.3 19.29L7.71 17.7L17.71 7.7L19.3 9.29C19.92 9.92 21 9.48 21 8.59Z" fill="white"/>
-</svg>
--- a/src/icons/FullscreenExit.svg
+++ b/src/icons/FullscreenExit.svg
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.29 4.12L16.7 8.71L18.29 10.3C18.92 10.93 18.47 12.01 17.58 12.01H13C12.45 12.01 12 11.56 12 11.01V6.41C12 5.52 13.08 5.07 13.71 5.7L15.3 7.29L19.89 2.7C20.28 2.31 20.91 2.31 21.3 2.7C21.68 3.1 21.68 3.73 21.29 4.12ZM4.11997 21.29L8.70997 16.7L10.3 18.29C10.93 18.92 12.01 18.47 12.01 17.58V13C12.01 12.45 11.56 12 11.01 12H6.40997C5.51997 12 5.06997 13.08 5.69997 13.71L7.28997 15.3L2.69997 19.89C2.30997 20.28 2.30997 20.91 2.69997 21.3C3.09997 21.68 3.72997 21.68 4.11997 21.29Z" fill="white"/>
-</svg>
--- a/src/icons/Mic.svg
+++ b/src/icons/Mic.svg
@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.37785 4.70549C6.37785 2.79707 7.99961 1.25 10.0001 1.25C12.0007 1.25 13.6224 2.79707 13.6224 4.70548V9.87324C13.6224 11.7817 12.0007 13.3287 10.0001 13.3287C7.99961 13.3287 6.37785 11.7817 6.37785 9.87324V4.70549Z" fill="white"/>
-<path d="M3.66099 8.77015C4.30219 8.77015 4.82198 9.266 4.82198 9.87768C4.82198 12.5957 7.1314 14.8024 9.98617 14.8095C9.99084 14.8094 9.99552 14.8094 10.0002 14.8094C10.0049 14.8094 10.0095 14.8094 10.0141 14.8095C12.8688 14.8022 15.178 12.5956 15.178 9.87768C15.178 9.266 15.6978 8.77015 16.339 8.77015C16.9802 8.77015 17.5 9.266 17.5 9.87768C17.5 13.4496 14.7509 16.4077 11.1612 16.9394V17.6425C11.1612 18.2541 10.6414 18.75 10.0002 18.75C9.359 18.75 8.83921 18.2541 8.83921 17.6425V16.9395C5.24925 16.4079 2.5 13.4497 2.5 9.87768C2.5 9.266 3.01979 8.77015 3.66099 8.77015Z" fill="white"/>
-</svg>
--- a/src/icons/MicMuted.svg
+++ b/src/icons/MicMuted.svg
@@ -1,5 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.9206 1.0544C1.68141 0.815201 1.29359 0.815201 1.0544 1.0544C0.815201 1.29359 0.815201 1.68141 1.0544 1.9206L4.55 5.41621V7C4.55 8.3531 5.6469 9.45 7 9.45C7.45436 9.45 7.87983 9.32632 8.24458 9.11079L9.12938 9.99558C8.52863 10.4234 7.7937 10.675 7 10.675C4.97035 10.675 3.325 9.02965 3.325 7C3.325 6.66173 3.05077 6.3875 2.7125 6.3875C2.37423 6.3875 2.1 6.66173 2.1 7C2.1 9.49877 3.97038 11.5607 6.3875 11.8621V12.5125C6.3875 12.8508 6.66173 13.125 7 13.125C7.33827 13.125 7.6125 12.8508 7.6125 12.5125V11.8621C8.50718 11.7505 9.32696 11.3978 10.0047 10.8709L12.0794 12.9456C12.3186 13.1848 12.7064 13.1848 12.9456 12.9456C13.1848 12.7064 13.1848 12.3186 12.9456 12.0794L1.9206 1.0544Z" fill="white"/>
-<path d="M10.5474 7.96338L11.5073 8.92525C11.7601 8.33424 11.9 7.68346 11.9 7C11.9 6.66173 11.6258 6.3875 11.2875 6.3875C10.9492 6.3875 10.675 6.66173 10.675 7C10.675 7.33336 10.6306 7.65634 10.5474 7.96338Z" fill="white"/>
-<path d="M4.81385 2.21784L9.45 6.86366V3.325C9.45 1.9719 8.3531 0.875 7 0.875C6.04532 0.875 5.21818 1.42104 4.81385 2.21784Z" fill="white"/>
-</svg>
--- a/src/icons/MuteMic.svg
+++ b/src/icons/MuteMic.svg
@@ -1,5 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.74372 1.50628C2.40201 1.16457 1.84799 1.16457 1.50628 1.50628C1.16457 1.84799 1.16457 2.40201 1.50628 2.74372L6.5 7.73744V10C6.5 11.933 8.067 13.5 10 13.5C10.6491 13.5 11.2569 13.3233 11.778 13.0154L13.042 14.2794C12.1838 14.8906 11.1339 15.25 10 15.25C7.10051 15.25 4.75 12.8995 4.75 10C4.75 9.51675 4.35825 9.125 3.875 9.125C3.39175 9.125 3 9.51675 3 10C3 13.5697 5.67198 16.5153 9.125 16.9458V17.875C9.125 18.3582 9.51675 18.75 10 18.75C10.4832 18.75 10.875 18.3582 10.875 17.875V16.9458C12.1531 16.7865 13.3242 16.2825 14.2924 15.5299L17.2563 18.4937C17.598 18.8354 18.152 18.8354 18.4937 18.4937C18.8354 18.152 18.8354 17.598 18.4937 17.2563L2.74372 1.50628Z" fill="#394049"/>
-<path d="M15.0678 11.3763L16.439 12.7504C16.8001 11.9061 17 10.9764 17 10C17 9.51675 16.6082 9.125 16.125 9.125C15.6418 9.125 15.25 9.51675 15.25 10C15.25 10.4762 15.1866 10.9376 15.0678 11.3763Z" fill="#394049"/>
-<path d="M6.87692 3.16834L13.5 9.80523V4.75C13.5 2.817 11.933 1.25 10 1.25C8.63618 1.25 7.45455 2.03005 6.87692 3.16834Z" fill="#394049"/>
-</svg>
--- a/src/index.css
+++ b/src/index.css
@@ -170,6 +170,9 @@ body,
 #root {
  display: flex;
  flex-direction: column;
+  /* The root should be a separate stacking context so that portalled elements
+  like modals and menus always appear over top of it */
+  isolation: isolate;
 }

 /* On Android and iOS, prefer native system fonts. The global.css file of
--- a/src/input/AvatarInputField.tsx
+++ b/src/input/AvatarInputField.tsx
@@ -105,6 +105,8 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
            aria-label={label}
            {...rest}
          />
+          {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/966 */}
+          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
          <label htmlFor={id} className={styles.fileInputButton}>
            <EditIcon />
          </label>
@@ -122,3 +124,5 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
    );
  },
 );
+
+AvatarInputField.displayName = "AvatarInputField";
--- a/src/input/Input.tsx
+++ b/src/input/Input.tsx
@@ -166,6 +166,8 @@ export const InputField = forwardRef<
  },
 );

+InputField.displayName = "InputField";
+
 interface ErrorMessageProps {
  error: Error;
 }
--- a/src/livekit/MediaDevicesContext.tsx
+++ b/src/livekit/MediaDevicesContext.tsx
@@ -86,9 +86,7 @@ function useMediaDevice(
    () =>
      createMediaDeviceObserver(
        kind,
-        () => {
-          logger.error("Error creating MediaDeviceObserver");
-        },
+        () => logger.error("Error creating MediaDeviceObserver"),
        requestPermissions,
      ),
    [kind, requestPermissions],
@@ -102,8 +100,8 @@ function useMediaDevice(
      devId = available.some((d) => d.deviceId === selectedId)
        ? selectedId
        : available.some((d) => d.deviceId === fallbackDevice)
-        ? fallbackDevice
-        : available.at(0)?.deviceId;
+          ? fallbackDevice
+          : available.at(0)?.deviceId;
    }

    return {
--- a/src/livekit/useECConnectionState.ts
+++ b/src/livekit/useECConnectionState.ts
@@ -248,6 +248,6 @@ export function useECConnectionState(
  return isSwitchingFocus
    ? ECAddonConnectionState.ECSwitchingFocus
    : isInDoConnect
-    ? ConnectionState.Connecting
-    : connState;
+      ? ConnectionState.Connecting
+      : connState;
 }
--- a/src/livekit/useLiveKit.ts
+++ b/src/livekit/useLiveKit.ts
@@ -107,8 +107,6 @@ export function useLiveKit(
        ...defaultLiveKitOptions.audioCaptureDefaults,
        deviceId: initialDevices.current.audioInput.selectedId,
      },
-      // XXX Setting the audio output here doesn't seem to do anything… a bug in
-      // LiveKit?
      audioOutput: {
        deviceId: initialDevices.current.audioOutput.selectedId,
      },
--- a/src/observable-utils.ts
+++ b/src/observable-utils.ts
@@ -0,0 +1,37 @@
+/*
+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 { Observable, defer, finalize, tap } from "rxjs";
+
+const nothing = Symbol("nothing");
+
+/**
+ * RxJS operator that invokes a callback when the Observable is finalized,
+ * passing the most recently emitted value. If no value was emitted, the
+ * callback will not be invoked.
+ */
+export function finalizeValue<T>(callback: (finalValue: T) => void) {
+  return (source: Observable<T>): Observable<T> =>
+    defer(() => {
+      let finalValue: T | typeof nothing = nothing;
+      return source.pipe(
+        tap((value) => (finalValue = value)),
+        finalize(() => {
+          if (finalValue !== nothing) callback(finalValue);
+        }),
+      );
+    });
+}
--- a/src/popover/Popover.tsx
+++ b/src/popover/Popover.tsx
@@ -58,3 +58,5 @@ export const Popover = forwardRef<HTMLDivElement, Props>(
    );
  },
 );
+
+Popover.displayName = "Popover";
--- a/src/popover/PopoverMenu.tsx
+++ b/src/popover/PopoverMenu.tsx
@@ -94,3 +94,5 @@ export const PopoverMenuTrigger = forwardRef<
    </div>
  );
 });
+
+PopoverMenuTrigger.displayName = "PopoverMenuTrigger";
--- a/src/room/EncryptionLock.module.css
+++ b/src/room/EncryptionLock.module.css
@@ -15,6 +15,7 @@ limitations under the License.
 */

 .lock {
+  display: block;
  padding: var(--cpd-space-1x);
  border-radius: var(--cpd-radius-pill-effect);
 }
--- a/src/room/EncryptionLock.tsx
+++ b/src/room/EncryptionLock.tsx
@@ -32,19 +32,13 @@ export const EncryptionLock: FC<Props> = ({ encrypted }) => {
  const label = encrypted ? t("common.encrypted") : t("common.unencrypted");

  return (
-    <Tooltip label={label} side="right">
+    <Tooltip label={label} side="right" isTriggerInteractive={false}>
      <Icon
        width={16}
        height={16}
        className={styles.lock}
        data-encrypted={encrypted}
        aria-label={label}
-        // Make the icon focusable so that the tooltip can be opened
-        // with keyboard navigation
-        // TODO: Replace this with the solution from
-        // https://github.com/vector-im/compound-web/pull/130 once it
-        // lands
-        tabIndex={0}
      />
    </Tooltip>
  );
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -28,7 +28,9 @@ limitations under the License.
  flex-direction: column;
  overflow: auto;
  overflow-inline: hidden;
-  contain: strict;
+  /* There used to be a contain: strict here, but due to some bugs in Firefox,
+  this was causing the Z-ordering of modals to glitch out. It can be added back
+  if those issues appear to be resolved. */
 }

 .centerMessage {
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -19,14 +19,11 @@ import {
  RoomAudioRenderer,
  RoomContext,
  useLocalParticipant,
-  useParticipants,
  useTracks,
 } from "@livekit/components-react";
 import { usePreventScroll } from "@react-aria/overlays";
 import { ConnectionState, Room, Track } from "livekit-client";
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { Room as MatrixRoom } from "matrix-js-sdk/src/models/room";
 import {
  FC,
  ReactNode,
@@ -39,9 +36,9 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import useMeasure from "react-use-measure";
-import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import classNames from "classnames";
+import { useStateObservable } from "@react-rxjs/core";

 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -54,22 +51,16 @@ import {
  SettingsButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
-import {
-  useVideoGridLayout,
-  TileDescriptor,
-  VideoGrid,
-} from "../video-grid/VideoGrid";
-import { useShowConnectionStats } from "../settings/useSetting";
-import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import { useVideoGridLayout, VideoGrid } from "../video-grid/VideoGrid";
 import { useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
 import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
-import { ItemData, TileContent, VideoTile } from "../video-grid/VideoTile";
+import { VideoTile } from "../video-grid/VideoTile";
 import { NewVideoGrid } from "../video-grid/NewVideoGrid";
 import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
-import { SettingsModal } from "../settings/SettingsModal";
+import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
 import { E2EEConfig, useLiveKit } from "../livekit/useLiveKit";
@@ -81,18 +72,14 @@ import { MuteStates } from "./MuteStates";
 import { MatrixInfo } from "./VideoPreview";
 import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
-import {
-  ECAddonConnectionState,
-  ECConnectionState,
-} from "../livekit/useECConnectionState";
+import { ECConnectionState } from "../livekit/useECConnectionState";
 import { useOpenIDSFU } from "../livekit/openIDSFU";
+import { useCallViewModel } from "../state/CallViewModel";
+import { subscribe } from "../state/subscribe";

 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

-// How long we wait after a focus switch before showing the real participant list again
-const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
-
 export interface ActiveCallProps
  extends Omit<InCallViewProps, "livekitRoom" | "connState"> {
  e2eeConfig: E2EEConfig;
@@ -137,470 +124,342 @@ export interface InCallViewProps {
  onShareClick: (() => void) | null;
 }

-export const InCallView: FC<InCallViewProps> = ({
-  client,
-  matrixInfo,
-  rtcSession,
-  livekitRoom,
-  muteStates,
-  participantCount,
-  onLeave,
-  hideHeader,
-  otelGroupCallMembership,
-  connState,
-  onShareClick,
-}) => {
-  const { t } = useTranslation();
-  usePreventScroll();
-  useWakeLock();
+export const InCallView: FC<InCallViewProps> = subscribe(
+  ({
+    client,
+    matrixInfo,
+    rtcSession,
+    livekitRoom,
+    muteStates,
+    participantCount,
+    onLeave,
+    hideHeader,
+    otelGroupCallMembership,
+    connState,
+    onShareClick,
+  }) => {
+    const { t } = useTranslation();
+    usePreventScroll();
+    useWakeLock();

-  useEffect(() => {
-    if (connState === ConnectionState.Disconnected) {
-      // annoyingly we don't get the disconnection reason this way,
-      // only by listening for the emitted event
-      onLeave(new Error("Disconnected from call server"));
-    }
-  }, [connState, onLeave]);
+    useEffect(() => {
+      if (connState === ConnectionState.Disconnected) {
+        // annoyingly we don't get the disconnection reason this way,
+        // only by listening for the emitted event
+        onLeave(new Error("Disconnected from call server"));
+      }
+    }, [connState, onLeave]);

-  const containerRef1 = useRef<HTMLDivElement | null>(null);
-  const [containerRef2, bounds] = useMeasure({ polyfill: ResizeObserver });
-  const boundsValid = bounds.height > 0;
-  // Merge the refs so they can attach to the same element
-  const containerRef = useMergedRefs(containerRef1, containerRef2);
+    const containerRef1 = useRef<HTMLDivElement | null>(null);
+    const [containerRef2, bounds] = useMeasure({ polyfill: ResizeObserver });
+    const boundsValid = bounds.height > 0;
+    // Merge the refs so they can attach to the same element
+    const containerRef = useMergedRefs(containerRef1, containerRef2);

-  const screenSharingTracks = useTracks(
-    [{ source: Track.Source.ScreenShare, withPlaceholder: false }],
-    {
-      room: livekitRoom,
-    },
-  );
-  const { layout, setLayout } = useVideoGridLayout(
-    screenSharingTracks.length > 0,
-  );
-
-  const [showConnectionStats] = useShowConnectionStats();
-
-  const { hideScreensharing, showControls } = useUrlParams();
-
-  const { isScreenShareEnabled, localParticipant } = useLocalParticipant({
-    room: livekitRoom,
-  });
-
-  const toggleMicrophone = useCallback(
-    () => muteStates.audio.setEnabled?.((e) => !e),
-    [muteStates],
-  );
-  const toggleCamera = useCallback(
-    () => muteStates.video.setEnabled?.((e) => !e),
-    [muteStates],
-  );
-
-  // This function incorrectly assumes that there is a camera and microphone, which is not always the case.
-  // TODO: Make sure that this module is resilient when it comes to camera/microphone availability!
-  useCallViewKeyboardShortcuts(
-    containerRef1,
-    toggleMicrophone,
-    toggleCamera,
-    (muted) => muteStates.audio.setEnabled?.(!muted),
-  );
-
-  useEffect(() => {
-    widget?.api.transport.send(
-      layout === "grid"
-        ? ElementWidgetActions.TileLayout
-        : ElementWidgetActions.SpotlightLayout,
-      {},
+    const screenSharingTracks = useTracks(
+      [{ source: Track.Source.ScreenShare, withPlaceholder: false }],
+      {
+        room: livekitRoom,
+      },
+    );
+    const { layout, setLayout } = useVideoGridLayout(
+      screenSharingTracks.length > 0,
    );
-  }, [layout]);

-  useEffect(() => {
-    if (widget) {
-      const onTileLayout = (ev: CustomEvent<IWidgetApiRequest>): void => {
-        setLayout("grid");
-        widget!.api.transport.reply(ev.detail, {});
-      };
-      const onSpotlightLayout = (ev: CustomEvent<IWidgetApiRequest>): void => {
-        setLayout("spotlight");
-        widget!.api.transport.reply(ev.detail, {});
-      };
+    const { hideScreensharing, showControls } = useUrlParams();

-      widget.lazyActions.on(ElementWidgetActions.TileLayout, onTileLayout);
-      widget.lazyActions.on(
-        ElementWidgetActions.SpotlightLayout,
-        onSpotlightLayout,
+    const { isScreenShareEnabled, localParticipant } = useLocalParticipant({
+      room: livekitRoom,
+    });
+
+    const toggleMicrophone = useCallback(
+      () => muteStates.audio.setEnabled?.((e) => !e),
+      [muteStates],
+    );
+    const toggleCamera = useCallback(
+      () => muteStates.video.setEnabled?.((e) => !e),
+      [muteStates],
+    );
+
+    // This function incorrectly assumes that there is a camera and microphone, which is not always the case.
+    // TODO: Make sure that this module is resilient when it comes to camera/microphone availability!
+    useCallViewKeyboardShortcuts(
+      containerRef1,
+      toggleMicrophone,
+      toggleCamera,
+      (muted) => muteStates.audio.setEnabled?.(!muted),
+    );
+
+    useEffect(() => {
+      widget?.api.transport.send(
+        layout === "grid"
+          ? ElementWidgetActions.TileLayout
+          : ElementWidgetActions.SpotlightLayout,
+        {},
      );
+    }, [layout]);

-      return () => {
-        widget!.lazyActions.off(ElementWidgetActions.TileLayout, onTileLayout);
-        widget!.lazyActions.off(
+    useEffect(() => {
+      if (widget) {
+        const onTileLayout = (ev: CustomEvent<IWidgetApiRequest>): void => {
+          setLayout("grid");
+          widget!.api.transport.reply(ev.detail, {});
+        };
+        const onSpotlightLayout = (
+          ev: CustomEvent<IWidgetApiRequest>,
+        ): void => {
+          setLayout("spotlight");
+          widget!.api.transport.reply(ev.detail, {});
+        };
+
+        widget.lazyActions.on(ElementWidgetActions.TileLayout, onTileLayout);
+        widget.lazyActions.on(
          ElementWidgetActions.SpotlightLayout,
          onSpotlightLayout,
        );
-      };
-    }
-  }, [setLayout]);

-  const mobile = boundsValid && bounds.width <= 660;
-  const reducedControls = boundsValid && bounds.width <= 340;
-  const noControls = reducedControls && bounds.height <= 400;
+        return () => {
+          widget!.lazyActions.off(
+            ElementWidgetActions.TileLayout,
+            onTileLayout,
+          );
+          widget!.lazyActions.off(
+            ElementWidgetActions.SpotlightLayout,
+            onSpotlightLayout,
+          );
+        };
+      }
+    }, [setLayout]);

-  const items = useParticipantTiles(livekitRoom, rtcSession.room, connState);
-  const { fullscreenItem, toggleFullscreen, exitFullscreen } =
-    useFullscreen(items);
+    const mobile = boundsValid && bounds.width <= 660;
+    const reducedControls = boundsValid && bounds.width <= 340;
+    const noControls = reducedControls && bounds.height <= 400;

-  // The maximised participant: either the participant that the user has
-  // manually put in fullscreen, or the focused (active) participant if the
-  // window is too small to show everyone
-  const maximisedParticipant = useMemo(
-    () =>
-      fullscreenItem ??
-      (noControls
-        ? items.find((item) => item.isSpeaker) ?? items.at(0) ?? null
-        : null),
-    [fullscreenItem, noControls, items],
-  );
+    const vm = useCallViewModel(
+      rtcSession.room,
+      livekitRoom,
+      matrixInfo.roomEncrypted,
+      connState,
+    );
+    const items = useStateObservable(vm.tiles);
+    const { fullscreenItem, toggleFullscreen, exitFullscreen } =
+      useFullscreen(items);

-  const Grid =
-    items.length > 12 && layout === "grid" ? NewVideoGrid : VideoGrid;
+    // The maximised participant: either the participant that the user has
+    // manually put in fullscreen, or the focused (active) participant if the
+    // window is too small to show everyone
+    const maximisedParticipant = useMemo(
+      () =>
+        fullscreenItem ??
+        (noControls
+          ? items.find((item) => item.isSpeaker) ?? items.at(0) ?? null
+          : null),
+      [fullscreenItem, noControls, items],
+    );

-  const prefersReducedMotion = usePrefersReducedMotion();
+    const Grid =
+      items.length > 12 && layout === "grid" ? NewVideoGrid : VideoGrid;

-  // This state is lifted out of NewVideoGrid so that layout states can be
-  // restored after a layout switch or upon exiting fullscreen
-  const layoutStates = useLayoutStates();
+    const prefersReducedMotion = usePrefersReducedMotion();
+
+    // This state is lifted out of NewVideoGrid so that layout states can be
+    // restored after a layout switch or upon exiting fullscreen
+    const layoutStates = useLayoutStates();
+
+    const renderContent = (): JSX.Element => {
+      if (items.length === 0) {
+        return (
+          <div className={styles.centerMessage}>
+            <p>{t("waiting_for_participants")}</p>
+          </div>
+        );
+      }
+      if (maximisedParticipant) {
+        return (
+          <VideoTile
+            vm={maximisedParticipant.data}
+            maximised={true}
+            fullscreen={maximisedParticipant === fullscreenItem}
+            onToggleFullscreen={toggleFullscreen}
+            targetHeight={bounds.height}
+            targetWidth={bounds.width}
+            key={maximisedParticipant.id}
+            showSpeakingIndicator={false}
+            onOpenProfile={openProfile}
+          />
+        );
+      }

-  const renderContent = (): JSX.Element => {
-    if (items.length === 0) {
      return (
-        <div className={styles.centerMessage}>
-          <p>{t("waiting_for_participants")}</p>
-        </div>
+        <Grid
+          items={items}
+          layout={layout}
+          disableAnimations={prefersReducedMotion || isSafari}
+          layoutStates={layoutStates}
+        >
+          {({ data: vm, ...props }): ReactNode => (
+            <VideoTile
+              vm={vm}
+              maximised={false}
+              fullscreen={false}
+              onToggleFullscreen={toggleFullscreen}
+              showSpeakingIndicator={items.length > 2}
+              onOpenProfile={openProfile}
+              {...props}
+              ref={props.ref as Ref<HTMLDivElement>}
+            />
+          )}
+        </Grid>
      );
-    }
-    if (maximisedParticipant) {
-      return (
-        <VideoTile
-          maximised={true}
-          fullscreen={maximisedParticipant === fullscreenItem}
-          onToggleFullscreen={toggleFullscreen}
-          targetHeight={bounds.height}
-          targetWidth={bounds.width}
-          key={maximisedParticipant.id}
-          data={maximisedParticipant.data}
-          showSpeakingIndicator={false}
-          showConnectionStats={showConnectionStats}
-          matrixInfo={matrixInfo}
-        />
+    };
+
+    const rageshakeRequestModalProps = useRageshakeRequestModal(
+      rtcSession.room.roomId,
+    );
+
+    const [settingsModalOpen, setSettingsModalOpen] = useState(false);
+    const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);
+
+    const openSettings = useCallback(
+      () => setSettingsModalOpen(true),
+      [setSettingsModalOpen],
+    );
+    const closeSettings = useCallback(
+      () => setSettingsModalOpen(false),
+      [setSettingsModalOpen],
+    );
+
+    const openProfile = useCallback(() => {
+      setSettingsTab("profile");
+      setSettingsModalOpen(true);
+    }, [setSettingsTab, setSettingsModalOpen]);
+
+    const toggleScreensharing = useCallback(async () => {
+      exitFullscreen();
+      await localParticipant.setScreenShareEnabled(!isScreenShareEnabled, {
+        audio: true,
+        selfBrowserSurface: "include",
+        surfaceSwitching: "include",
+        systemAudio: "include",
+      });
+    }, [localParticipant, isScreenShareEnabled, exitFullscreen]);
+
+    let footer: JSX.Element | null;
+
+    if (noControls) {
+      footer = null;
+    } else {
+      const buttons: JSX.Element[] = [];
+
+      buttons.push(
+        <MicButton
+          key="1"
+          muted={!muteStates.audio.enabled}
+          onPress={toggleMicrophone}
+          disabled={muteStates.audio.setEnabled === null}
+          data-testid="incall_mute"
+        />,
+        <VideoButton
+          key="2"
+          muted={!muteStates.video.enabled}
+          onPress={toggleCamera}
+          disabled={muteStates.video.setEnabled === null}
+          data-testid="incall_videomute"
+        />,
+      );
+
+      if (!reducedControls) {
+        if (canScreenshare && !hideScreensharing) {
+          buttons.push(
+            <ScreenshareButton
+              key="3"
+              enabled={isScreenShareEnabled}
+              onPress={toggleScreensharing}
+              data-testid="incall_screenshare"
+            />,
+          );
+        }
+        buttons.push(<SettingsButton key="4" onPress={openSettings} />);
+      }
+
+      buttons.push(
+        <HangupButton
+          key="6"
+          onPress={function (): void {
+            onLeave();
+          }}
+          data-testid="incall_leave"
+        />,
+      );
+      footer = (
+        <div
+          className={classNames(
+            showControls
+              ? styles.footer
+              : hideHeader
+                ? [styles.footer, styles.footerHidden]
+                : [styles.footer, styles.footerThin],
+          )}
+        >
+          {!mobile && !hideHeader && (
+            <div className={styles.logo}>
+              <LogoMark width={24} height={24} aria-hidden />
+              <LogoType
+                width={80}
+                height={11}
+                aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
+              />
+            </div>
+          )}
+          {showControls && <div className={styles.buttons}>{buttons}</div>}
+          {!mobile && !hideHeader && showControls && (
+            <LayoutToggle
+              className={styles.layout}
+              layout={layout}
+              setLayout={setLayout}
+            />
+          )}
+        </div>
      );
    }

    return (
-      <Grid
-        items={items}
-        layout={layout}
-        disableAnimations={prefersReducedMotion || isSafari}
-        layoutStates={layoutStates}
-      >
-        {(props): ReactNode => (
-          <VideoTile
-            maximised={false}
-            fullscreen={false}
-            onToggleFullscreen={toggleFullscreen}
-            showSpeakingIndicator={items.length > 2}
-            showConnectionStats={showConnectionStats}
-            matrixInfo={matrixInfo}
-            {...props}
-            ref={props.ref as Ref<HTMLDivElement>}
-          />
+      <div className={styles.inRoom} ref={containerRef}>
+        {!hideHeader && maximisedParticipant === null && (
+          <Header>
+            <LeftNav>
+              <RoomHeaderInfo
+                id={matrixInfo.roomId}
+                name={matrixInfo.roomName}
+                avatarUrl={matrixInfo.roomAvatar}
+                encrypted={matrixInfo.roomEncrypted}
+                participantCount={participantCount}
+              />
+            </LeftNav>
+            <RightNav>
+              {!reducedControls && showControls && onShareClick !== null && (
+                <InviteButton onClick={onShareClick} />
+              )}
+            </RightNav>
+          </Header>
        )}
-      </Grid>
-    );
-  };
-
-  const rageshakeRequestModalProps = useRageshakeRequestModal(
-    rtcSession.room.roomId,
-  );
-
-  const [settingsModalOpen, setSettingsModalOpen] = useState(false);
-
-  const openSettings = useCallback(
-    () => setSettingsModalOpen(true),
-    [setSettingsModalOpen],
-  );
-  const closeSettings = useCallback(
-    () => setSettingsModalOpen(false),
-    [setSettingsModalOpen],
-  );
-
-  const toggleScreensharing = useCallback(async () => {
-    exitFullscreen();
-    await localParticipant.setScreenShareEnabled(!isScreenShareEnabled, {
-      audio: true,
-      selfBrowserSurface: "include",
-      surfaceSwitching: "include",
-      systemAudio: "include",
-    });
-  }, [localParticipant, isScreenShareEnabled, exitFullscreen]);
-
-  let footer: JSX.Element | null;
-
-  if (noControls) {
-    footer = null;
-  } else {
-    const buttons: JSX.Element[] = [];
-
-    buttons.push(
-      <MicButton
-        key="1"
-        muted={!muteStates.audio.enabled}
-        onPress={toggleMicrophone}
-        disabled={muteStates.audio.setEnabled === null}
-        data-testid="incall_mute"
-      />,
-      <VideoButton
-        key="2"
-        muted={!muteStates.video.enabled}
-        onPress={toggleCamera}
-        disabled={muteStates.video.setEnabled === null}
-        data-testid="incall_videomute"
-      />,
-    );
-
-    if (!reducedControls) {
-      if (canScreenshare && !hideScreensharing) {
-        buttons.push(
-          <ScreenshareButton
-            key="3"
-            enabled={isScreenShareEnabled}
-            onPress={toggleScreensharing}
-            data-testid="incall_screenshare"
-          />,
-        );
-      }
-      buttons.push(<SettingsButton key="4" onPress={openSettings} />);
-    }
-
-    buttons.push(
-      <HangupButton
-        key="6"
-        onPress={function (): void {
-          onLeave();
-        }}
-        data-testid="incall_leave"
-      />,
-    );
-    footer = (
-      <div
-        className={classNames(
-          showControls
-            ? styles.footer
-            : hideHeader
-            ? [styles.footer, styles.footerHidden]
-            : [styles.footer, styles.footerThin],
-        )}
-      >
-        {!mobile && !hideHeader && (
-          <div className={styles.logo}>
-            <LogoMark width={24} height={24} aria-hidden />
-            <LogoType
-              width={80}
-              height={11}
-              aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
-            />
-          </div>
-        )}
-        {showControls && <div className={styles.buttons}>{buttons}</div>}
-        {!mobile && !hideHeader && showControls && (
-          <LayoutToggle
-            className={styles.layout}
-            layout={layout}
-            setLayout={setLayout}
-          />
+        <div className={styles.controlsOverlay}>
+          <RoomAudioRenderer />
+          {renderContent()}
+          {footer}
+        </div>
+        {!noControls && (
+          <RageshakeRequestModal {...rageshakeRequestModalProps} />
        )}
+        <SettingsModal
+          client={client}
+          roomId={rtcSession.room.roomId}
+          open={settingsModalOpen}
+          onDismiss={closeSettings}
+          tab={settingsTab}
+          onTabChange={setSettingsTab}
+        />
      </div>
    );
-  }
-
-  return (
-    <div className={styles.inRoom} ref={containerRef}>
-      {!hideHeader && maximisedParticipant === null && (
-        <Header>
-          <LeftNav>
-            <RoomHeaderInfo
-              id={matrixInfo.roomId}
-              name={matrixInfo.roomName}
-              avatarUrl={matrixInfo.roomAvatar}
-              encrypted={matrixInfo.roomEncrypted}
-              participantCount={participantCount}
-            />
-          </LeftNav>
-          <RightNav>
-            {!reducedControls && showControls && onShareClick !== null && (
-              <InviteButton onClick={onShareClick} />
-            )}
-          </RightNav>
-        </Header>
-      )}
-      <div className={styles.controlsOverlay}>
-        <RoomAudioRenderer />
-        {renderContent()}
-        {footer}
-      </div>
-      {!noControls && <RageshakeRequestModal {...rageshakeRequestModalProps} />}
-      <SettingsModal
-        client={client}
-        roomId={rtcSession.room.roomId}
-        open={settingsModalOpen}
-        onDismiss={closeSettings}
-      />
-    </div>
-  );
-};
-
-function findMatrixMember(
-  room: MatrixRoom,
-  id: string,
-): RoomMember | undefined {
-  if (!id) return undefined;
-
-  const parts = id.split(":");
-  // must be at least 3 parts because we know the first part is a userId which must necessarily contain a colon
-  if (parts.length < 3) {
-    logger.warn(
-      "Livekit participants ID doesn't look like a userId:deviceId combination",
-    );
-    return undefined;
-  }
-
-  parts.pop();
-  const userId = parts.join(":");
-
-  return room.getMember(userId) ?? undefined;
-}
-
-function useParticipantTiles(
-  livekitRoom: Room,
-  matrixRoom: MatrixRoom,
-  connState: ECConnectionState,
-): TileDescriptor<ItemData>[] {
-  const previousTiles = useRef<TileDescriptor<ItemData>[]>([]);
-
-  const sfuParticipants = useParticipants({
-    room: livekitRoom,
-  });
-
-  const items = useMemo(() => {
-    let allGhosts = true;
-
-    const speakActiveTime = new Date();
-    speakActiveTime.setSeconds(speakActiveTime.getSeconds() - 10);
-    // Iterate over SFU participants (those who actually are present from the SFU perspective) and create tiles for them.
-    const tiles: TileDescriptor<ItemData>[] = sfuParticipants.flatMap(
-      (sfuParticipant) => {
-        const spokeRecently =
-          sfuParticipant.lastSpokeAt !== undefined &&
-          sfuParticipant.lastSpokeAt > speakActiveTime;
-
-        const id = sfuParticipant.identity;
-        const member = findMatrixMember(matrixRoom, id);
-        // We always start with a local participant wit the empty string as their ID before we're
-        // connected, this is fine and we'll be in "all ghosts" mode.
-        if (id !== "" && member === undefined) {
-          logger.warn(
-            `Ruh, roh! No matrix member found for SFU participant '${id}': creating g-g-g-ghost!`,
-          );
-        }
-        allGhosts &&= member === undefined;
-
-        const userMediaTile = {
-          id,
-          focused: false,
-          isPresenter: sfuParticipant.isScreenShareEnabled,
-          isSpeaker:
-            (sfuParticipant.isSpeaking || spokeRecently) &&
-            !sfuParticipant.isLocal,
-          hasVideo: sfuParticipant.isCameraEnabled,
-          local: sfuParticipant.isLocal,
-          largeBaseSize: false,
-          data: {
-            id,
-            member,
-            sfuParticipant,
-            content: TileContent.UserMedia,
-          },
-        };
-
-        // If there is a screen sharing enabled for this participant, create a tile for it as well.
-        let screenShareTile: TileDescriptor<ItemData> | undefined;
-        if (sfuParticipant.isScreenShareEnabled) {
-          const screenShareId = `${id}:screen-share`;
-          screenShareTile = {
-            ...userMediaTile,
-            id: screenShareId,
-            focused: true,
-            largeBaseSize: true,
-            placeNear: id,
-            data: {
-              ...userMediaTile.data,
-              id: screenShareId,
-              content: TileContent.ScreenShare,
-            },
-          };
-        }
-
-        return screenShareTile
-          ? [userMediaTile, screenShareTile]
-          : [userMediaTile];
-      },
-    );
-
-    PosthogAnalytics.instance.eventCallEnded.cacheParticipantCountChanged(
-      tiles.length,
-    );
-
-    // If every item is a ghost, that probably means we're still connecting and
-    // shouldn't bother showing anything yet
-    return allGhosts ? [] : tiles;
-  }, [matrixRoom, sfuParticipants]);
-
-  // We carry over old tiles from the previous focus for some time after a focus switch
-  // so that the video tiles don't all disappear and reappear.
-  // This is set to true when the state transitions to Switching Focus and remains
-  // true for a short time after it changes (ie. connState is only switching focus for
-  // the time it takes us to reconnect to the conference).
-  // If there are still members that haven't reconnected after that time, they'll just
-  // appear to disconnect and will reappear once they reconnect.
-  const [isSwitchingFocus, setIsSwitchingFocus] = useState(false);
-
-  useEffect(() => {
-    if (connState === ECAddonConnectionState.ECSwitchingFocus) {
-      setIsSwitchingFocus(true);
-    } else if (isSwitchingFocus) {
-      setTimeout(() => {
-        setIsSwitchingFocus(false);
-      }, POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS);
-    }
-  }, [connState, setIsSwitchingFocus, isSwitchingFocus]);
-
-  if (
-    connState === ECAddonConnectionState.ECSwitchingFocus ||
-    isSwitchingFocus
-  ) {
-    logger.debug("Switching focus: injecting previous tiles");
-
-    // inject the previous tile for members that haven't rejoined yet
-    const newItems = items.slice(0);
-    const rejoined = new Set(newItems.map((p) => p.id));
-
-    for (const prevTile of previousTiles.current) {
-      if (!rejoined.has(prevTile.id)) {
-        newItems.push(prevTile);
-      }
-    }
-
-    return newItems;
-  } else {
-    previousTiles.current = items;
-    return items;
-  }
-}
+  },
+);
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-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.
@@ -34,7 +34,7 @@ import {
  SettingsButton,
  VideoButton,
 } from "../button/Button";
-import { SettingsModal } from "../settings/SettingsModal";
+import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useMediaQuery } from "../useMediaQuery";

 interface Props {
@@ -71,6 +71,7 @@ export const LobbyView: FC<Props> = ({
  );

  const [settingsModalOpen, setSettingsModalOpen] = useState(false);
+  const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);

  const openSettings = useCallback(
    () => setSettingsModalOpen(true),
@@ -148,6 +149,8 @@ export const LobbyView: FC<Props> = ({
          client={client}
          open={settingsModalOpen}
          onDismiss={closeSettings}
+          tab={settingsTab}
+          onTabChange={setSettingsTab}
        />
      )}
    </>
--- a/src/room/useFullscreen.ts
+++ b/src/room/useFullscreen.ts
@@ -18,9 +18,9 @@ limitations under the License.
 import { logger } from "matrix-js-sdk/src/logger";
 import { useCallback, useLayoutEffect, useRef } from "react";

-import { TileDescriptor } from "../video-grid/VideoGrid";
 import { useReactiveState } from "../useReactiveState";
 import { useEventTarget } from "../useEvents";
+import { TileDescriptor } from "../state/CallViewModel";

 const isFullscreen = (): boolean =>
  Boolean(document.fullscreenElement) ||
--- a/src/settings/FeedbackSettingsTab.tsx
+++ b/src/settings/FeedbackSettingsTab.tsx
@@ -93,7 +93,7 @@ export const FeedbackSettingsTab: FC<Props> = ({ roomId }) => {
              </FieldRow>
            )}
            <Button type="submit" disabled={sending}>
-              {sending ? t("submitting") : "action.submit"}
+              {sending ? t("submitting") : t("action.submit")}
            </Button>
          </FieldRow>
        )}
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { ChangeEvent, FC, Key, ReactNode, useCallback, useState } from "react";
+import { ChangeEvent, FC, Key, ReactNode } from "react";
 import { Item } from "@react-stately/collections";
 import { Trans, useTranslation } from "react-i18next";
 import { MatrixClient } from "matrix-js-sdk";
@@ -47,15 +47,33 @@ import {
 } from "../livekit/MediaDevicesContext";
 import { widget } from "../widget";

+type SettingsTab =
+  | "audio"
+  | "video"
+  | "profile"
+  | "feedback"
+  | "more"
+  | "developer";
+
 interface Props {
  open: boolean;
  onDismiss: () => void;
+  tab: SettingsTab;
+  onTabChange: (tab: SettingsTab) => void;
  client: MatrixClient;
  roomId?: string;
-  defaultTab?: string;
 }

-export const SettingsModal: FC<Props> = (props) => {
+export const defaultSettingsTab: SettingsTab = "audio";
+
+export const SettingsModal: FC<Props> = ({
+  open,
+  onDismiss,
+  tab,
+  onTabChange,
+  client,
+  roomId,
+}) => {
  const { t } = useTranslation();

  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
@@ -92,15 +110,6 @@ export const SettingsModal: FC<Props> = (props) => {
    );
  };

-  const [selectedTab, setSelectedTab] = useState<string | undefined>();
-
-  const onSelectedTabChanged = useCallback(
-    (tab: Key) => {
-      setSelectedTab(tab.toString());
-    },
-    [setSelectedTab],
-  );
-
  const optInDescription = (
    <Caption>
      <Trans i18nKey="settings.opt_in_description">
@@ -113,7 +122,7 @@ export const SettingsModal: FC<Props> = (props) => {
  );

  const devices = useMediaDevices();
-  useMediaDeviceNames(devices, props.open);
+  useMediaDeviceNames(devices, open);

  const audioTab = (
    <TabItem
@@ -158,7 +167,7 @@ export const SettingsModal: FC<Props> = (props) => {
        </>
      }
    >
-      <ProfileSettingsTab client={props.client} />
+      <ProfileSettingsTab client={client} />
    </TabItem>
  );

@@ -172,7 +181,7 @@ export const SettingsModal: FC<Props> = (props) => {
        </>
      }
    >
-      <FeedbackSettingsTab roomId={props.roomId} />
+      <FeedbackSettingsTab roomId={roomId} />
    </TabItem>
  );

@@ -260,12 +269,12 @@ export const SettingsModal: FC<Props> = (props) => {
    <Modal
      title={t("common.settings")}
      className={styles.settingsModal}
-      open={props.open}
-      onDismiss={props.onDismiss}
+      open={open}
+      onDismiss={onDismiss}
    >
      <TabContainer
-        onSelectionChange={onSelectedTabChanged}
-        selectedKey={selectedTab ?? props.defaultTab ?? "audio"}
+        onSelectionChange={onTabChange as (tab: Key) => void}
+        selectedKey={tab}
        className={styles.tabContainer}
      >
        {tabs}
--- a/src/state/CallViewModel.ts
+++ b/src/state/CallViewModel.ts
@@ -0,0 +1,296 @@
+/*
+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 {
+  connectedParticipantsObserver,
+  observeParticipantMedia,
+} from "@livekit/components-core";
+import { Room as LivekitRoom, RemoteParticipant } from "livekit-client";
+import { Room as MatrixRoom, RoomMember } from "matrix-js-sdk/src/matrix";
+import { useEffect, useRef } from "react";
+import {
+  EMPTY,
+  Observable,
+  combineLatest,
+  concat,
+  mergeAll,
+  of,
+  sample,
+  scan,
+  startWith,
+  takeUntil,
+  zip,
+} from "rxjs";
+import { state } from "@react-rxjs/core";
+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 {
+  TileViewModel,
+  UserMediaTileViewModel,
+  ScreenShareTileViewModel,
+} from "./TileViewModel";
+import { finalizeValue } from "../observable-utils";
+
+// Represents something that should get a tile on the layout,
+// ie. a user's video feed or a screen share feed.
+export interface TileDescriptor<T> {
+  id: string;
+  focused: boolean;
+  isPresenter: boolean;
+  isSpeaker: boolean;
+  hasVideo: boolean;
+  local: boolean;
+  largeBaseSize: boolean;
+  placeNear?: string;
+  data: T;
+}
+
+// How long we wait after a focus switch before showing the real participant
+// list again
+const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
+
+function findMatrixMember(
+  room: MatrixRoom,
+  id: string,
+): RoomMember | undefined {
+  if (!id) return undefined;
+
+  const parts = id.split(":");
+  // must be at least 3 parts because we know the first part is a userId which must necessarily contain a colon
+  if (parts.length < 3) {
+    logger.warn(
+      "Livekit participants ID doesn't look like a userId:deviceId combination",
+    );
+    return undefined;
+  }
+
+  parts.pop();
+  const userId = parts.join(":");
+
+  return room.getMember(userId) ?? undefined;
+}
+
+// TODO: Move wayyyy more business logic from the call and lobby views into here
+export class CallViewModel extends ViewModel {
+  private readonly rawRemoteParticipants = state(
+    connectedParticipantsObserver(this.livekitRoom),
+  );
+
+  // Lists of participants to "hold" on display, even if LiveKit claims that
+  // they've left
+  private readonly remoteParticipantHolds = zip(
+    this.connectionState,
+    this.rawRemoteParticipants.pipe(sample(this.connectionState)),
+    (s, ps) => {
+      // Whenever we switch focuses, we should retain all the previous
+      // participants for at least POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS ms to
+      // give their clients time to switch over and avoid jarring layout shifts
+      if (s === ECAddonConnectionState.ECSwitchingFocus) {
+        return concat(
+          // Hold these participants
+          of({ hold: ps }),
+          // Wait for time to pass and the connection state to have changed
+          Promise.all([
+            new Promise<void>((resolve) =>
+              setTimeout(resolve, POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS),
+            ),
+            new Promise<void>((resolve) => {
+              const subscription = this.connectionState
+                .pipe(takeUntil(this.destroyed))
+                .subscribe((s) => {
+                  if (s !== ECAddonConnectionState.ECSwitchingFocus) {
+                    resolve();
+                    subscription.unsubscribe();
+                  }
+                });
+            }),
+            // Then unhold them
+          ]).then(() => Promise.resolve({ unhold: ps })),
+        );
+      } else {
+        return EMPTY;
+      }
+    },
+  ).pipe(
+    mergeAll(),
+    // Aggregate the hold instructions into a single list showing which
+    // participants are being held
+    scan(
+      (holds, instruction) =>
+        "hold" in instruction
+          ? [instruction.hold, ...holds]
+          : holds.filter((h) => h !== instruction.unhold),
+      [] as RemoteParticipant[][],
+    ),
+    startWith([]),
+  );
+
+  private readonly remoteParticipants = combineLatest(
+    [this.rawRemoteParticipants, this.remoteParticipantHolds],
+    (raw, holds) => {
+      const result = [...raw];
+      const resultIds = new Set(result.map((p) => p.identity));
+
+      // Incorporate the held participants into the list
+      for (const hold of holds) {
+        for (const p of hold) {
+          if (!resultIds.has(p.identity)) {
+            result.push(p);
+            resultIds.add(p.identity);
+          }
+        }
+      }
+
+      return result;
+    },
+  );
+
+  /**
+   * The media tiles to be displayed in the call view.
+   */
+  public readonly tiles = state(
+    combineLatest([
+      this.remoteParticipants,
+      observeParticipantMedia(this.livekitRoom.localParticipant),
+    ]).pipe(
+      scan((ts, [remoteParticipants, { participant: localParticipant }]) => {
+        const ps = [localParticipant, ...remoteParticipants];
+        const tilesById = new Map(ts.map((t) => [t.id, t]));
+        const now = Date.now();
+        let allGhosts = true;
+
+        const newTiles = ps.flatMap((p) => {
+          const userMediaId = p.identity;
+          const member = findMatrixMember(this.matrixRoom, userMediaId);
+          allGhosts &&= member === undefined;
+          const spokeRecently =
+            p.lastSpokeAt !== undefined && now - +p.lastSpokeAt <= 10000;
+
+          // We always start with a local participant with the empty string as
+          // their ID before we're connected, this is fine and we'll be in
+          // "all ghosts" mode.
+          if (userMediaId !== "" && member === undefined) {
+            logger.warn(
+              `Ruh, roh! No matrix member found for SFU participant '${userMediaId}': creating g-g-g-ghost!`,
+            );
+          }
+
+          const userMediaVm =
+            tilesById.get(userMediaId)?.data ??
+            new UserMediaTileViewModel(userMediaId, member, p, this.encrypted);
+          tilesById.delete(userMediaId);
+
+          const userMediaTile: TileDescriptor<TileViewModel> = {
+            id: userMediaId,
+            focused: false,
+            isPresenter: p.isScreenShareEnabled,
+            isSpeaker: (p.isSpeaking || spokeRecently) && !p.isLocal,
+            hasVideo: p.isCameraEnabled,
+            local: p.isLocal,
+            largeBaseSize: false,
+            data: userMediaVm,
+          };
+
+          if (p.isScreenShareEnabled) {
+            const screenShareId = `${userMediaId}:screen-share`;
+            const screenShareVm =
+              tilesById.get(screenShareId)?.data ??
+              new ScreenShareTileViewModel(
+                screenShareId,
+                member,
+                p,
+                this.encrypted,
+              );
+            tilesById.delete(screenShareId);
+
+            const screenShareTile: TileDescriptor<TileViewModel> = {
+              id: screenShareId,
+              focused: true,
+              isPresenter: false,
+              isSpeaker: false,
+              hasVideo: true,
+              local: p.isLocal,
+              largeBaseSize: true,
+              placeNear: userMediaId,
+              data: screenShareVm,
+            };
+            return [userMediaTile, screenShareTile];
+          } else {
+            return [userMediaTile];
+          }
+        });
+
+        // Any tiles left in the map are unused and should be destroyed
+        for (const t of tilesById.values()) t.data.destroy();
+
+        // If every item is a ghost, that probably means we're still connecting
+        // and shouldn't bother showing anything yet
+        return allGhosts ? [] : newTiles;
+      }, [] as TileDescriptor<TileViewModel>[]),
+      finalizeValue((ts) => {
+        for (const t of ts) t.data.destroy();
+      }),
+    ),
+  );
+
+  public constructor(
+    // A call is permanently tied to a single Matrix room and LiveKit room
+    private readonly matrixRoom: MatrixRoom,
+    private readonly livekitRoom: LivekitRoom,
+    private readonly encrypted: boolean,
+    private readonly connectionState: Observable<ECConnectionState>,
+  ) {
+    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!;
+}
--- a/src/state/TileViewModel.ts
+++ b/src/state/TileViewModel.ts
@@ -0,0 +1,232 @@
+/*
+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 {
+  AudioSource,
+  TrackReferenceOrPlaceholder,
+  VideoSource,
+  observeParticipantEvents,
+  observeParticipantMedia,
+} from "@livekit/components-core";
+import { StateObservable, state } from "@react-rxjs/core";
+import {
+  LocalParticipant,
+  LocalTrack,
+  Participant,
+  ParticipantEvent,
+  RemoteParticipant,
+  Track,
+  TrackEvent,
+  facingModeFromLocalTrack,
+} from "livekit-client";
+import { RoomMember } from "matrix-js-sdk/src/matrix";
+import {
+  BehaviorSubject,
+  combineLatest,
+  distinctUntilChanged,
+  distinctUntilKeyChanged,
+  fromEvent,
+  map,
+  of,
+  startWith,
+  switchMap,
+  takeUntil,
+} from "rxjs";
+
+import { ViewModel } from "./ViewModel";
+
+function observeTrackReference(
+  participant: Participant,
+  source: Track.Source,
+): StateObservable<TrackReferenceOrPlaceholder> {
+  return state(
+    observeParticipantMedia(participant).pipe(
+      map(() => ({
+        participant,
+        publication: participant.getTrack(source),
+        source,
+      })),
+      distinctUntilKeyChanged("publication"),
+    ),
+  );
+}
+
+abstract class BaseTileViewModel extends ViewModel {
+  /**
+   * Whether the tile belongs to the local user.
+   */
+  public readonly local = this.participant.isLocal;
+  /**
+   * The LiveKit video track to be shown on this tile.
+   */
+  public readonly video: StateObservable<TrackReferenceOrPlaceholder>;
+  /**
+   * Whether there should be a warning that this media is unencrypted.
+   */
+  public readonly unencryptedWarning: StateObservable<boolean>;
+
+  public constructor(
+    // TODO: This is only needed for full screen toggling and can be removed as
+    // soon as that code is moved into the view models
+    public readonly id: string,
+    /**
+     * The Matrix room member to which this tile belongs.
+     */
+    // TODO: Fully separate the data layer from the UI layer by keeping the
+    // member object internal
+    public readonly member: RoomMember | undefined,
+    protected readonly participant: LocalParticipant | RemoteParticipant,
+    callEncrypted: boolean,
+    audioSource: AudioSource,
+    videoSource: VideoSource,
+  ) {
+    super();
+    const audio = observeTrackReference(participant, audioSource);
+    this.video = observeTrackReference(participant, videoSource);
+    this.unencryptedWarning = state(
+      combineLatest(
+        [audio, this.video],
+        (a, v) =>
+          callEncrypted &&
+          (a.publication?.isEncrypted === false ||
+            v.publication?.isEncrypted === false),
+      ).pipe(distinctUntilChanged()),
+    );
+  }
+}
+
+/**
+ * A tile displaying some media.
+ */
+export type TileViewModel = UserMediaTileViewModel | ScreenShareTileViewModel;
+
+/**
+ * A tile displaying some participant's user media.
+ */
+export class UserMediaTileViewModel extends BaseTileViewModel {
+  /**
+   * Whether the video should be mirrored.
+   */
+  public readonly mirror = state(
+    this.video.pipe(
+      switchMap((v) => {
+        const track = v.publication?.track;
+        if (!(track instanceof LocalTrack)) return of(false);
+        // Watch for track restarts, because they indicate a camera switch
+        return fromEvent(track, TrackEvent.Restarted).pipe(
+          startWith(null),
+          // Mirror only front-facing cameras (those that face the user)
+          map(() => facingModeFromLocalTrack(track).facingMode === "user"),
+        );
+      }),
+    ),
+  );
+
+  /**
+   * Whether the participant is speaking.
+   */
+  public readonly speaking = state(
+    observeParticipantEvents(
+      this.participant,
+      ParticipantEvent.IsSpeakingChanged,
+    ).pipe(map((p) => p.isSpeaking)),
+  );
+
+  private readonly _locallyMuted = new BehaviorSubject(false);
+  /**
+   * Whether we've disabled this participant's audio.
+   */
+  public readonly locallyMuted = state(this._locallyMuted);
+
+  private readonly _localVolume = new BehaviorSubject(1);
+  /**
+   * The volume to which we've set this participant's audio, as a scalar
+   * multiplier.
+   */
+  public readonly localVolume = state(this._localVolume);
+
+  /**
+   * Whether this participant is sending audio (i.e. is unmuted on their side).
+   */
+  public readonly audioEnabled: StateObservable<boolean>;
+  /**
+   * Whether this participant is sending video.
+   */
+  public readonly videoEnabled: StateObservable<boolean>;
+
+  public constructor(
+    id: string,
+    member: RoomMember | undefined,
+    participant: LocalParticipant | RemoteParticipant,
+    callEncrypted: boolean,
+  ) {
+    super(
+      id,
+      member,
+      participant,
+      callEncrypted,
+      Track.Source.Microphone,
+      Track.Source.Camera,
+    );
+
+    const media = observeParticipantMedia(participant);
+    this.audioEnabled = state(
+      media.pipe(map((m) => m.microphoneTrack?.isMuted === false)),
+    );
+    this.videoEnabled = state(
+      media.pipe(map((m) => m.cameraTrack?.isMuted === false)),
+    );
+
+    // Sync the local mute state and volume with LiveKit
+    if (!this.local)
+      combineLatest([this._locallyMuted, this._localVolume], (muted, volume) =>
+        muted ? 0 : volume,
+      )
+        .pipe(takeUntil(this.destroyed))
+        .subscribe((volume) => {
+          (this.participant as RemoteParticipant).setVolume(volume);
+        });
+  }
+
+  public toggleLocallyMuted(): void {
+    this._locallyMuted.next(!this._locallyMuted.value);
+  }
+
+  public setLocalVolume(value: number): void {
+    this._localVolume.next(value);
+  }
+}
+
+/**
+ * A tile displaying some participant's screen share.
+ */
+export class ScreenShareTileViewModel extends BaseTileViewModel {
+  public constructor(
+    id: string,
+    member: RoomMember | undefined,
+    participant: LocalParticipant | RemoteParticipant,
+    callEncrypted: boolean,
+  ) {
+    super(
+      id,
+      member,
+      participant,
+      callEncrypted,
+      Track.Source.ScreenShareAudio,
+      Track.Source.ScreenShare,
+    );
+  }
+}
--- a/src/button/VolumeIcon.tsx
+++ b/src/button/VolumeIcon.tsx
@@ -1,6 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
-
+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.
@@ -15,21 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { ComponentPropsWithoutRef, FC } from "react";
+import { Subject } from "rxjs";

-import AudioMuted from "../icons/AudioMuted.svg?react";
-import AudioLow from "../icons/AudioLow.svg?react";
-import Audio from "../icons/Audio.svg?react";
+/**
+ * An MVVM view model.
+ */
+export abstract class ViewModel {
+  protected readonly destroyed = new Subject<void>();

-interface Props extends ComponentPropsWithoutRef<"svg"> {
  /**
-   * Number between 0 and 1
+   * Instructs the ViewModel to clean up its resources. If you forget to call
+   * this, there may be memory leaks!
   */
-  volume: number;
+  public destroy(): void {
+    this.destroyed.next();
+    this.destroyed.complete();
+  }
 }
-
-export const VolumeIcon: FC<Props> = ({ volume, ...rest }) => {
-  if (volume <= 0) return <AudioMuted {...rest} />;
-  if (volume <= 0.5) return <AudioLow {...rest} />;
-  return <Audio {...rest} />;
-};
--- a/src/state/subscribe.tsx
+++ b/src/state/subscribe.tsx
@@ -0,0 +1,49 @@
+/*
+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 {
+  ForwardRefExoticComponent,
+  ForwardRefRenderFunction,
+  PropsWithoutRef,
+  RefAttributes,
+  forwardRef,
+} from "react";
+// eslint-disable-next-line no-restricted-imports
+import { Subscribe, RemoveSubscribe } from "@react-rxjs/core";
+
+/**
+ * Wraps a React component that consumes Observables, resulting in a component
+ * that safely subscribes to its Observables before rendering. The component
+ * will return null until the subscriptions are created.
+ */
+export function subscribe<P, R>(
+  render: ForwardRefRenderFunction<R, P>,
+): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<R>> {
+  const Subscriber = forwardRef<R, { p: P }>(({ p }, ref) => (
+    <RemoveSubscribe>{render(p, ref)}</RemoveSubscribe>
+  ));
+  Subscriber.displayName = "Subscriber";
+
+  // eslint-disable-next-line react/display-name
+  const OuterComponent = forwardRef<R, P>((p, ref) => (
+    <Subscribe>
+      <Subscriber ref={ref} p={p} />
+    </Subscribe>
+  ));
+  // Copy over the component's display name, default props, etc.
+  Object.assign(OuterComponent, render);
+  return OuterComponent;
+}
--- a/src/state/useObservable.ts
+++ b/src/state/useObservable.ts
@@ -0,0 +1,31 @@
+/*
+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 { useEffect, useRef } from "react";
+import { BehaviorSubject, Observable } from "rxjs";
+
+/**
+ * React hook that creates an Observable from a changing value. The Observable
+ * replays its current value upon subscription, emits whenever the value
+ * changes, and completes when the component is unmounted.
+ */
+export function useObservable<T>(value: T): Observable<T> {
+  const subject = useRef<BehaviorSubject<T>>();
+  subject.current ??= new BehaviorSubject(value);
+  if (value !== subject.current.value) subject.current.next(value);
+  useEffect(() => subject.current!.complete(), []);
+  return subject.current;
+}
--- a/src/typography/Typography.tsx
+++ b/src/typography/Typography.tsx
@@ -57,6 +57,8 @@ export const Headline = forwardRef<HTMLHeadingElement, TypographyProps>(
  },
 );

+Headline.displayName = "Headline";
+
 export const Title = forwardRef<HTMLHeadingElement, TypographyProps>(
  (
    {
@@ -85,6 +87,8 @@ export const Title = forwardRef<HTMLHeadingElement, TypographyProps>(
  },
 );

+Title.displayName = "Title";
+
 export const Subtitle = forwardRef<HTMLParagraphElement, TypographyProps>(
  (
    {
@@ -113,6 +117,8 @@ export const Subtitle = forwardRef<HTMLParagraphElement, TypographyProps>(
  },
 );

+Subtitle.displayName = "Subtitle";
+
 export const Body = forwardRef<HTMLParagraphElement, TypographyProps>(
  (
    {
@@ -141,6 +147,8 @@ export const Body = forwardRef<HTMLParagraphElement, TypographyProps>(
  },
 );

+Body.displayName = "Body";
+
 export const Caption = forwardRef<HTMLParagraphElement, TypographyProps>(
  (
    {
@@ -170,6 +178,8 @@ export const Caption = forwardRef<HTMLParagraphElement, TypographyProps>(
  },
 );

+Caption.displayName = "Caption";
+
 export const Micro = forwardRef<HTMLParagraphElement, TypographyProps>(
  (
    {
@@ -199,11 +209,14 @@ export const Micro = forwardRef<HTMLParagraphElement, TypographyProps>(
  },
 );

+Micro.displayName = "Micro";
+
 interface LinkProps extends TypographyProps {
  to?: H.LocationDescriptor<unknown>;
  color?: string;
  href?: string;
 }
+
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
  (
    {
@@ -254,3 +267,5 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
    );
  },
 );
+
+Link.displayName = "Link";
--- a/src/usePrevious.ts
+++ b/src/usePrevious.ts
@@ -0,0 +1,27 @@
+/*
+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;
+}
--- a/src/video-grid/BigGrid.tsx
+++ b/src/video-grid/BigGrid.tsx
@@ -19,11 +19,11 @@ import { RectReadOnly } from "react-use-measure";
 import { FC, memo, ReactNode } from "react";
 import { zip } from "lodash";

-import { TileDescriptor } from "./VideoGrid";
 import { Slot } from "./NewVideoGrid";
 import { Layout } from "./Layout";
 import { count, findLastIndex } from "../array-utils";
 import styles from "./BigGrid.module.css";
+import { TileDescriptor } from "../state/CallViewModel";

 /**
 * A 1×1 cell in a grid which belongs to a tile.
@@ -1010,6 +1010,8 @@ const Slots: FC<{ s: Grid }> = memo(({ s: g }) => {
  );
 });

+Slots.displayName = "Slots";
+
 /**
 * Given a tile and numbers in the range [0, 1) describing a position within the
 * tile, this returns the index of the specific cell in which that position
--- a/src/video-grid/Layout.tsx
+++ b/src/video-grid/Layout.tsx
@@ -18,7 +18,7 @@ import { ComponentType, ReactNode, useCallback, useMemo, useRef } from "react";

 import type { RectReadOnly } from "react-use-measure";
 import { useReactiveState } from "../useReactiveState";
-import type { TileDescriptor } from "./VideoGrid";
+import { TileDescriptor } from "../state/CallViewModel";

 /**
 * A video grid layout system with concrete states of type State.
--- a/src/video-grid/NewVideoGrid.tsx
+++ b/src/video-grid/NewVideoGrid.tsx
@@ -32,7 +32,6 @@ import styles from "./NewVideoGrid.module.css";
 import {
  VideoGridProps as Props,
  TileSpring,
-  TileDescriptor,
  ChildrenProperties,
 } from "./VideoGrid";
 import { useReactiveState } from "../useReactiveState";
@@ -40,6 +39,7 @@ import { useMergedRefs } from "../useMergedRefs";
 import { TileWrapper } from "./TileWrapper";
 import { BigGrid } from "./BigGrid";
 import { useLayout } from "./Layout";
+import { TileDescriptor } from "../state/CallViewModel";

 interface Rect {
  x: number;
--- a/src/video-grid/TileWrapper.tsx
+++ b/src/video-grid/TileWrapper.tsx
@@ -43,12 +43,8 @@ interface Props<T> {
  children: (props: ChildrenProperties<T>) => ReactNode;
 }

-/**
- * A wrapper around a tile in a video grid. This component exists to decouple
- * child components from the grid.
- */
-export const TileWrapper = memo(
-  ({
+const TileWrapper_ = memo(
+  <T,>({
    id,
    onDragRef,
    targetWidth,
@@ -64,7 +60,7 @@ export const TileWrapper = memo(
    width,
    height,
    children,
-  }) => {
+  }: Props<T>) => {
    const ref = useRef<HTMLElement | null>(null);

    useDrag((state) => onDragRef?.current!(id, state), {
@@ -97,7 +93,15 @@ export const TileWrapper = memo(
      </>
    );
  },
-  // We pretend this component is a simple function rather than a
-  // NamedExoticComponent, because that's the only way we can fit in a type
-  // parameter
-) as <T>(props: Props<T>) => JSX.Element;
+);
+
+TileWrapper_.displayName = "TileWrapper";
+
+/**
+ * A wrapper around a tile in a video grid. This component exists to decouple
+ * child components from the grid.
+ */
+// We pretend this component is a simple function rather than a
+// NamedExoticComponent, because that's the only way we can fit in a type
+// parameter
+export const TileWrapper = TileWrapper_ as <T>(props: Props<T>) => JSX.Element;
--- a/src/video-grid/VideoGrid.tsx
+++ b/src/video-grid/VideoGrid.tsx
@@ -16,7 +16,6 @@ limitations under the License.

 import {
  ComponentProps,
-  Key,
  MutableRefObject,
  ReactNode,
  Ref,
@@ -45,6 +44,7 @@ import styles from "./VideoGrid.module.css";
 import { Layout } from "../room/LayoutToggle";
 import { TileWrapper } from "./TileWrapper";
 import { LayoutStatesMap } from "./Layout";
+import { TileDescriptor } from "../state/CallViewModel";

 interface TilePosition {
  x: number;
@@ -112,7 +112,7 @@ export function useVideoGridLayout(hasScreenshareFeeds: boolean): {
  return { layout: layoutRef.current, setLayout };
 }

-const GAP = 8;
+const GAP = 20;

 function useIsMounted(): MutableRefObject<boolean> {
  const isMountedRef = useRef<boolean>(false);
@@ -812,7 +812,7 @@ export function reorderTiles<T>(
 interface DragTileData {
  offsetX: number;
  offsetY: number;
-  key: Key;
+  key: string;
  x: number;
  y: number;
 }
@@ -839,20 +839,6 @@ export interface VideoGridProps<T> {
  children: (props: ChildrenProperties<T>) => ReactNode;
 }

-// Represents something that should get a tile on the layout,
-// ie. a user's video feed or a screen share feed.
-export interface TileDescriptor<T> {
-  id: string;
-  focused: boolean;
-  isPresenter: boolean;
-  isSpeaker: boolean;
-  hasVideo: boolean;
-  local: boolean;
-  largeBaseSize: boolean;
-  placeNear?: string;
-  data: T;
-}
-
 export function VideoGrid<T>({
  items,
  layout,
@@ -872,7 +858,7 @@ export function VideoGrid<T>({
  });
  const [scrollPosition, setScrollPosition] = useState<number>(0);
  const draggingTileRef = useRef<DragTileData | null>(null);
-  const lastTappedRef = useRef<{ [index: Key]: number }>({});
+  const lastTappedRef = useRef<{ [index: string]: number }>({});
  const lastLayoutRef = useRef<Layout>(layout);
  const isMounted = useIsMounted();

@@ -887,7 +873,7 @@ export function VideoGrid<T>({
  useEffect(() => {
    setTileState(({ tiles, ...rest }) => {
      const newTiles: Tile<T>[] = [];
-      const removedTileKeys: Set<Key> = new Set();
+      const removedTileKeys: Set<string> = new Set();

      for (const tile of tiles) {
        let item = items.find((item) => item.id === tile.key);
@@ -1149,7 +1135,7 @@ export function VideoGrid<T>({
  ]) as unknown as [SpringValues<TileSpring>[], SpringRef<TileSpring>];

  const onTap = useCallback(
-    (tileKey: Key) => {
+    (tileKey: string) => {
      const lastTapped = lastTappedRef.current[tileKey];

      if (!lastTapped || Date.now() - lastTapped > 500) {
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-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.
@@ -16,60 +16,134 @@ limitations under the License.

 .videoTile {
  position: absolute;
-  contain: strict;
  top: 0;
  container-name: videoTile;
  container-type: size;
  border-radius: var(--cpd-space-4x);
-  overflow: hidden;
-  cursor: pointer;
-  outline: 2px solid rgba(0, 0, 0, 0);
-  transition:
-    outline-radius ease 0.15s,
-    outline-color ease 0.15s;
+  transition: outline-color ease 0.15s;
+  outline: var(--cpd-border-width-2) solid rgb(0 0 0 / 0);
 }

-.videoTile * {
-  user-select: none;
-}
-
-.videoTile video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  background-color: var(--cpd-color-bg-subtle-primary);
-}
-
-.videoTile.isLocal:not(.screenshare) video {
-  transform: scaleX(-1);
+/* Use a pseudo-element to create the expressive speaking border, since CSS
+borders don't support gradients */
+.videoTile::before {
+  content: "";
+  position: absolute;
+  z-index: -1; /* Put it below the outline */
+  opacity: 0; /* Hidden unless speaking */
+  transition: opacity ease 0.15s;
+  inset: calc(-1 * var(--cpd-border-width-4));
+  border-radius: var(--cpd-space-5x);
+  background: linear-gradient(
+      119deg,
+      rgba(13, 92, 189, 0.7) 0%,
+      rgba(13, 189, 168, 0.7) 100%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(13, 92, 189, 0.9) 0%,
+      rgba(13, 189, 168, 0.9) 100%
+    );
+  background-blend-mode: overlay, normal;
 }

 .videoTile.speaking {
  /* !important because speaking border should take priority over hover */
-  outline: 4px solid var(--cpd-color-border-accent) !important;
+  outline: var(--cpd-border-width-1) solid var(--cpd-color-bg-canvas-default) !important;
+}
+
+.videoTile.speaking::before {
+  opacity: 1;
 }

@media (hover: hover) {
  .videoTile:hover {
-    outline: 2px solid var(--cpd-color-gray-1400);
+    outline: var(--cpd-border-width-2) solid
+      var(--cpd-color-border-interactive-hovered);
  }
 }

 .videoTile.maximised {
  position: relative;
  border-radius: 0;
-  height: 100%;
-  width: 100%;
+  inline-size: 100%;
+  block-size: 100%;
 }

-.videoTile.screenshare > video {
+.videoTile video {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  background-color: var(--cpd-color-bg-subtle-primary);
+  /* This transform is a no-op, but it forces Firefox to use a different
+  rendering path, one that actually clips the corners of <video> elements into
+  the intended rounded shape. We can remove this if Firefox stops being broken. */
+  transform: translate(0);
+}
+
+.videoTile.mirror video {
+  transform: scaleX(-1);
+}
+
+.videoTile.screenshare video {
  object-fit: contain;
 }

-.nameTag {
+.videoTile.videoMuted video {
+  display: none;
+}
+
+.bg {
+  background-color: var(--cpd-color-bg-subtle-secondary);
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: inherit;
+  contain: strict;
+}
+
+.avatar {
+  display: none;
  position: absolute;
-  inset-inline-start: var(--cpd-space-1x);
-  inset-block-end: var(--cpd-space-1x);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.videoTile.videoMuted .avatar {
+  display: initial;
+}
+
+/* CSS makes us put a condition here, even though all we want to do is
+unconditionally select the container so we can use cqmin units */
+@container videoTile (width > 0) {
+  .avatar {
+    /* Half of the smallest dimension of the tile */
+    inline-size: 50cqmin;
+    block-size: 50cqmin;
+  }
+}
+
+.avatar > img {
+  /* To make avatars scale smoothly with their tiles during animations, we
+  override the styles set on the element */
+  inline-size: 100% !important;
+  block-size: 100% !important;
+}
+
+.fg {
+  position: absolute;
+  inset: var(--cpd-space-1x);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr auto;
+  grid-template-areas: ". button2" "nameTag button1";
+  gap: var(--cpd-space-1x);
+  place-items: start;
+}
+
+.nameTag {
+  grid-area: nameTag;
  padding: var(--cpd-space-1x);
  padding-block: var(--cpd-space-1x);
  color: var(--cpd-color-text-primary);
@@ -78,13 +152,14 @@ limitations under the License.
  align-items: center;
  border-radius: var(--cpd-radius-pill-effect);
  user-select: none;
-  max-width: calc(100% - 48px);
  overflow: hidden;
-  z-index: 1;
  box-shadow: var(--small-drop-shadow);
+  box-sizing: border-box;
+  max-inline-size: 100%;
 }

-.nameTag > svg {
+.nameTag > svg,
+.nameTag > span {
  flex-shrink: 0;
 }

@@ -96,105 +171,69 @@ limitations under the License.
  color: var(--cpd-color-icon-primary);
 }

-.nameTag span {
+.nameTag > .name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-inline: var(--cpd-space-2x);
+  flex-shrink: 1;
 }

 .errorIcon {
+  display: block;
  color: var(--cpd-color-icon-critical-primary);
 }

-.toolbar {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 42px;
-
-  color: var(--cpd-color-text-primary);
-  background-color: var(--stopgap-background-85);
-
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-
-  overflow: hidden;
-  z-index: 1;
-
+.fg > button {
+  appearance: none;
+  border: none;
+  border-radius: var(--cpd-radius-pill-effect);
+  padding: var(--cpd-space-1x);
+  background: var(--cpd-color-bg-action-primary-rest);
+  box-shadow: var(--small-drop-shadow);
+  cursor: pointer;
+  opacity: 0;
  transition: opacity ease 0.15s;
 }

-.toolbar:not(:hover) {
-  opacity: 0;
+.fg > button:focus-visible,
+.fg > :focus-visible ~ button,
+.fg > button[data-enabled="true"],
+.fg > button[data-state="open"] {
+  opacity: 1;
 }

-.toolbar:hover + .presenterLabel {
-  top: calc(42px + 20px); /* toolbar + margin */
-}
+@media (hover) {
+  .fg:hover > button {
+    opacity: 1;
+  }

-.button {
-  margin-right: 16px;
-}
-
-.button svg {
-  width: 16px;
-  height: 16px;
-}
-
-.videoMutedOverlay {
-  width: 100%;
-  height: 100%;
-  background-color: var(--cpd-color-bg-subtle-secondary);
-}
-
-.presenterLabel {
-  position: absolute;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: var(--stopgap-background-85);
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 4px 8px;
-  font-weight: normal;
-  font-size: var(--font-size-caption);
-  line-height: var(--font-size-body);
-}
-
-.screensharePIP {
-  bottom: 8px;
-  right: 8px;
-  width: 25%;
-  max-width: 360px;
-  border-radius: 20px;
-}
-
-.debugInfo {
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-/* CSS makes us put a condition here, even though all we want to do is
-unconditionally select the container so we can use cqmin units */
-@container videoTile (width > 0) {
-  .avatar {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    /* To make avatars scale smoothly with their tiles during animations, we
-    override the styles set on the element */
-    --avatarSize: 50cqmin; /* Half of the smallest dimension of the tile */
-    width: var(--avatarSize) !important;
-    height: var(--avatarSize) !important;
-    border-radius: 10000px !important;
+  .fg > button:hover {
+    background: var(--cpd-color-bg-action-primary-hovered);
  }
 }
+
+.fg > button:active {
+  background: var(--cpd-color-bg-action-primary-pressed) !important;
+}
+
+.fg > button[data-state="open"] {
+  background: var(--cpd-color-bg-action-primary-pressed);
+}
+
+.fg > button > svg {
+  display: block;
+  color: var(--cpd-color-icon-on-solid-primary);
+}
+
+.fg > button:first-of-type {
+  grid-area: button1;
+}
+
+.fg > button:nth-of-type(2) {
+  grid-area: button2;
+}
+
+.volumeSlider {
+  width: 100%;
+}
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -16,6 +16,8 @@ limitations under the License.

 import {
  ComponentProps,
+  ForwardedRef,
+  ReactNode,
  forwardRef,
  useCallback,
  useEffect,
@@ -24,11 +26,9 @@ import {
 import { animated } from "@react-spring/web";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
-import { LocalParticipant, RemoteParticipant, Track } from "livekit-client";
 import {
-  ConnectionQualityIndicator,
+  TrackReferenceOrPlaceholder,
  VideoTrack,
-  useMediaTrack,
 } from "@livekit/components-react";
 import {
  RoomMember,
@@ -37,237 +37,443 @@ import {
 import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react";
 import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react";
 import ErrorIcon from "@vector-im/compound-design-tokens/icons/error.svg?react";
-import { Text, Tooltip } from "@vector-im/compound-web";
+import MicOffOutlineIcon from "@vector-im/compound-design-tokens/icons/mic-off-outline.svg?react";
+import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg?react";
+import VolumeOnIcon from "@vector-im/compound-design-tokens/icons/volume-on.svg?react";
+import VolumeOffIcon from "@vector-im/compound-design-tokens/icons/volume-off.svg?react";
+import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg?react";
+import ExpandIcon from "@vector-im/compound-design-tokens/icons/expand.svg?react";
+import CollapseIcon from "@vector-im/compound-design-tokens/icons/collapse.svg?react";
+import {
+  Text,
+  Tooltip,
+  ContextMenu,
+  MenuItem,
+  ToggleMenuItem,
+  Menu,
+} from "@vector-im/compound-web";
+import { useStateObservable } from "@react-rxjs/core";

 import { Avatar } from "../Avatar";
 import styles from "./VideoTile.module.css";
 import { useReactiveState } from "../useReactiveState";
-import { AudioButton, FullscreenButton } from "../button/Button";
-import { VideoTileSettingsModal } from "./VideoTileSettingsModal";
-import { MatrixInfo } from "../room/VideoPreview";
+import {
+  ScreenShareTileViewModel,
+  TileViewModel,
+  UserMediaTileViewModel,
+} from "../state/TileViewModel";
+import { subscribe } from "../state/subscribe";
+import { useMergedRefs } from "../useMergedRefs";
+import { Slider } from "../Slider";

-export interface ItemData {
-  id: string;
-  member?: RoomMember;
-  sfuParticipant: LocalParticipant | RemoteParticipant;
-  content: TileContent;
-}
-
-export enum TileContent {
-  UserMedia = "user-media",
-  ScreenShare = "screen-share",
-}
-
-interface Props {
-  data: ItemData;
-  maximised: boolean;
-  fullscreen: boolean;
-  onToggleFullscreen: (itemId: string) => void;
-  // TODO: Refactor these props.
-  targetWidth: number;
-  targetHeight: number;
+interface TileProps {
+  tileRef?: ForwardedRef<HTMLDivElement>;
  className?: string;
  style?: ComponentProps<typeof animated.div>["style"];
-  showSpeakingIndicator: boolean;
-  showConnectionStats: boolean;
-  // TODO: This dependency in particular should probably not be here. We can fix
-  // this with a view model.
-  matrixInfo: MatrixInfo;
+  targetWidth: number;
+  targetHeight: number;
+  video: TrackReferenceOrPlaceholder;
+  member: RoomMember | undefined;
+  videoEnabled: boolean;
+  maximised: boolean;
+  unencryptedWarning: boolean;
+  nameTagLeadingIcon?: ReactNode;
+  nameTag: string;
+  displayName: string;
+  primaryButton: ReactNode;
+  secondaryButton?: ReactNode;
+  [k: string]: unknown;
 }

-export const VideoTile = forwardRef<HTMLDivElement, Props>(
+const Tile = forwardRef<HTMLDivElement, TileProps>(
  (
    {
-      data,
-      maximised,
-      fullscreen,
-      onToggleFullscreen,
+      tileRef = null,
      className,
      style,
      targetWidth,
      targetHeight,
-      showSpeakingIndicator,
-      showConnectionStats,
-      matrixInfo,
+      video,
+      member,
+      videoEnabled,
+      maximised,
+      unencryptedWarning,
+      nameTagLeadingIcon,
+      nameTag,
+      displayName,
+      primaryButton,
+      secondaryButton,
+      ...props
    },
-    tileRef,
+    ref,
  ) => {
    const { t } = useTranslation();
-
-    const { content, sfuParticipant, member } = data;
-
-    // Handle display name changes.
-    const [displayName, setDisplayName] = useReactiveState(
-      () => member?.rawDisplayName ?? "[👻]",
-      [member],
-    );
-    useEffect(() => {
-      if (member) {
-        const updateName = (): void => {
-          setDisplayName(member.rawDisplayName);
-        };
-
-        member!.on(RoomMemberEvent.Name, updateName);
-        return (): void => {
-          member!.removeListener(RoomMemberEvent.Name, updateName);
-        };
-      }
-    }, [member, setDisplayName]);
-
-    const audioInfo = useMediaTrack(
-      content === TileContent.UserMedia
-        ? Track.Source.Microphone
-        : Track.Source.ScreenShareAudio,
-      sfuParticipant,
-    );
-    const videoInfo = useMediaTrack(
-      content === TileContent.UserMedia
-        ? Track.Source.Camera
-        : Track.Source.ScreenShare,
-      sfuParticipant,
-    );
-    const muted = audioInfo.isMuted !== false;
-    const encrypted =
-      audioInfo.publication?.isEncrypted !== false &&
-      videoInfo.publication?.isEncrypted !== false;
-
-    const MicIcon = muted ? MicOffSolidIcon : MicOnSolidIcon;
-
-    const onFullscreen = useCallback(() => {
-      onToggleFullscreen(data.id);
-    }, [data, onToggleFullscreen]);
-
-    const [videoTileSettingsModalOpen, setVideoTileSettingsModalOpen] =
-      useState(false);
-    const openVideoTileSettingsModal = useCallback(
-      () => setVideoTileSettingsModalOpen(true),
-      [setVideoTileSettingsModalOpen],
-    );
-    const closeVideoTileSettingsModal = useCallback(
-      () => setVideoTileSettingsModalOpen(false),
-      [setVideoTileSettingsModalOpen],
-    );
-
-    const toolbarButtons: JSX.Element[] = [];
-    if (!sfuParticipant.isLocal) {
-      toolbarButtons.push(
-        <AudioButton
-          key="localVolume"
-          className={styles.button}
-          volume={(sfuParticipant as RemoteParticipant).getVolume() ?? 0}
-          onPress={openVideoTileSettingsModal}
-        />,
-      );
-
-      if (content === TileContent.ScreenShare) {
-        toolbarButtons.push(
-          <FullscreenButton
-            key="fullscreen"
-            className={styles.button}
-            fullscreen={fullscreen}
-            onPress={onFullscreen}
-          />,
-        );
-      }
-    }
+    const mergedRef = useMergedRefs(tileRef, ref);

    return (
      <animated.div
        className={classNames(styles.videoTile, className, {
-          [styles.isLocal]: sfuParticipant.isLocal,
-          [styles.speaking]:
-            sfuParticipant.isSpeaking &&
-            content === TileContent.UserMedia &&
-            showSpeakingIndicator,
-          [styles.screenshare]: content === TileContent.ScreenShare,
          [styles.maximised]: maximised,
+          [styles.videoMuted]: !videoEnabled,
        })}
        style={style}
-        ref={tileRef}
+        ref={mergedRef}
        data-testid="videoTile"
+        {...props}
      >
-        {toolbarButtons.length > 0 && (!maximised || fullscreen) && (
-          <div className={classNames(styles.toolbar)}>{toolbarButtons}</div>
-        )}
-        {content === TileContent.UserMedia &&
-          !sfuParticipant.isCameraEnabled && (
-            <>
-              <div className={styles.videoMutedOverlay} />
-              <Avatar
-                key={member?.userId}
-                id={member?.userId ?? displayName}
-                name={displayName}
-                size={Math.round(Math.min(targetWidth, targetHeight) / 2)}
-                src={member?.getMxcAvatarUrl()}
-                className={styles.avatar}
-              />
-            </>
-          )}
-        {content === TileContent.ScreenShare ? (
-          <div className={styles.presenterLabel}>
-            <span>{t("video_tile.presenter_label", { displayName })}</span>
-          </div>
-        ) : (
-          <div className={styles.nameTag}>
-            <MicIcon
-              width={20}
-              height={20}
-              aria-label={muted ? t("microphone_off") : t("microphone_on")}
-              data-muted={muted}
-              className={styles.muteIcon}
+        <div className={styles.bg}>
+          <Avatar
+            id={member?.userId ?? displayName}
+            name={displayName}
+            size={Math.round(Math.min(targetWidth, targetHeight) / 2)}
+            src={member?.getMxcAvatarUrl()}
+            className={styles.avatar}
+          />
+          {video.publication !== undefined && (
+            <VideoTrack
+              trackRef={video}
+              // There's no reason for this to be focusable
+              tabIndex={-1}
+              // React supports the disablePictureInPicture attribute, but Firefox
+              // only recognizes a value of "true", whereas React sets it to the empty
+              // string. So we need to bypass React and set it specifically to "true".
+              // https://bugzilla.mozilla.org/show_bug.cgi?id=1865748
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              // eslint-disable-next-line react/no-unknown-property
+              disablepictureinpicture="true"
            />
-            <Text as="span" size="sm" weight="medium">
-              {sfuParticipant.isLocal
-                ? t("video_tile.sfu_participant_local")
-                : displayName}
+          )}
+        </div>
+        <div className={styles.fg}>
+          <div className={styles.nameTag}>
+            {nameTagLeadingIcon}
+            <Text as="span" size="sm" weight="medium" className={styles.name}>
+              {nameTag}
            </Text>
-            {matrixInfo.roomEncrypted && !encrypted && (
-              <Tooltip label={t("common.unencrypted")} side="bottom">
+            {unencryptedWarning && (
+              <Tooltip
+                label={t("common.unencrypted")}
+                side="bottom"
+                isTriggerInteractive={false}
+              >
                <ErrorIcon
                  width={20}
                  height={20}
                  aria-label={t("common.unencrypted")}
                  className={styles.errorIcon}
-                  // Make the icon focusable so that the tooltip can be opened
-                  // with keyboard navigation
-                  // TODO: Replace this with the solution from
-                  // https://github.com/vector-im/compound-web/pull/130 once it
-                  // lands
-                  tabIndex={0}
                />
              </Tooltip>
            )}
-            {showConnectionStats && (
-              <ConnectionQualityIndicator participant={sfuParticipant} />
-            )}
          </div>
-        )}
-        <VideoTrack
-          participant={sfuParticipant}
-          source={
-            content === TileContent.UserMedia
-              ? Track.Source.Camera
-              : Track.Source.ScreenShare
-          }
-          // There's no reason for this to be focusable
-          tabIndex={-1}
-          // React supports the disablePictureInPicture attribute, but Firefox
-          // only recognizes a value of "true", whereas React sets it to the empty
-          // string. So we need to bypass React and set it specifically to "true".
-          // https://bugzilla.mozilla.org/show_bug.cgi?id=1865748
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          // eslint-disable-next-line react/no-unknown-property
-          disablepictureinpicture="true"
-        />
-        {!maximised && (
-          <VideoTileSettingsModal
-            data={data}
-            open={videoTileSettingsModalOpen}
-            onDismiss={closeVideoTileSettingsModal}
-          />
-        )}
+          {primaryButton}
+          {secondaryButton}
+        </div>
      </animated.div>
    );
  },
 );
+
+Tile.displayName = "Tile";
+
+interface UserMediaTileProps {
+  vm: UserMediaTileViewModel;
+  className?: string;
+  style?: ComponentProps<typeof animated.div>["style"];
+  targetWidth: number;
+  targetHeight: number;
+  nameTag: string;
+  displayName: string;
+  maximised: boolean;
+  onOpenProfile: () => void;
+  showSpeakingIndicator: boolean;
+}
+
+const UserMediaTile = subscribe<UserMediaTileProps, HTMLDivElement>(
+  (
+    {
+      vm,
+      className,
+      style,
+      targetWidth,
+      targetHeight,
+      nameTag,
+      displayName,
+      maximised,
+      onOpenProfile,
+      showSpeakingIndicator,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+    const video = useStateObservable(vm.video);
+    const audioEnabled = useStateObservable(vm.audioEnabled);
+    const videoEnabled = useStateObservable(vm.videoEnabled);
+    const unencryptedWarning = useStateObservable(vm.unencryptedWarning);
+    const mirror = useStateObservable(vm.mirror);
+    const speaking = useStateObservable(vm.speaking);
+    const locallyMuted = useStateObservable(vm.locallyMuted);
+    const localVolume = useStateObservable(vm.localVolume);
+    const onChangeMute = useCallback(() => vm.toggleLocallyMuted(), [vm]);
+    const onSelectMute = useCallback((e: Event) => e.preventDefault(), []);
+    const onChangeLocalVolume = useCallback(
+      (v: number) => vm.setLocalVolume(v),
+      [vm],
+    );
+
+    const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;
+    const VolumeIcon = locallyMuted ? VolumeOffIcon : VolumeOnIcon;
+
+    const [menuOpen, setMenuOpen] = useState(false);
+    const menu = vm.local ? (
+      <>
+        <MenuItem
+          Icon={UserProfileIcon}
+          label={t("common.profile")}
+          onSelect={onOpenProfile}
+        />
+      </>
+    ) : (
+      <>
+        <ToggleMenuItem
+          Icon={MicOffOutlineIcon}
+          label={t("video_tile.mute_for_me")}
+          checked={locallyMuted}
+          onChange={onChangeMute}
+          onSelect={onSelectMute}
+        />
+        {/* TODO: Figure out how to make this slider keyboard accessible */}
+        <MenuItem as="div" Icon={VolumeIcon} label={null} onSelect={null}>
+          <Slider
+            className={styles.volumeSlider}
+            label={t("video_tile.volume")}
+            value={localVolume}
+            onValueChange={onChangeLocalVolume}
+            min={0.1}
+            max={1}
+            step={0.01}
+            disabled={locallyMuted}
+          />
+        </MenuItem>
+      </>
+    );
+
+    const tile = (
+      <Tile
+        tileRef={ref}
+        className={classNames(className, {
+          [styles.mirror]: mirror,
+          [styles.speaking]: showSpeakingIndicator && speaking,
+        })}
+        style={style}
+        targetWidth={targetWidth}
+        targetHeight={targetHeight}
+        video={video}
+        member={vm.member}
+        videoEnabled={videoEnabled}
+        maximised={maximised}
+        unencryptedWarning={unencryptedWarning}
+        nameTagLeadingIcon={
+          <MicIcon
+            width={20}
+            height={20}
+            aria-label={audioEnabled ? t("microphone_on") : t("microphone_off")}
+            data-muted={!audioEnabled}
+            className={styles.muteIcon}
+          />
+        }
+        nameTag={nameTag}
+        displayName={displayName}
+        primaryButton={
+          <Menu
+            open={menuOpen}
+            onOpenChange={setMenuOpen}
+            title={nameTag}
+            trigger={
+              <button aria-label={t("common.options")}>
+                <OverflowHorizontalIcon aria-hidden width={20} height={20} />
+              </button>
+            }
+            side="left"
+            align="start"
+          >
+            {menu}
+          </Menu>
+        }
+      />
+    );
+
+    return (
+      <ContextMenu title={nameTag} trigger={tile} hasAccessibleAlternative>
+        {menu}
+      </ContextMenu>
+    );
+  },
+);
+
+UserMediaTile.displayName = "UserMediaTile";
+
+interface ScreenShareTileProps {
+  vm: ScreenShareTileViewModel;
+  className?: string;
+  style?: ComponentProps<typeof animated.div>["style"];
+  targetWidth: number;
+  targetHeight: number;
+  nameTag: string;
+  displayName: string;
+  maximised: boolean;
+  fullscreen: boolean;
+  onToggleFullscreen: (itemId: string) => void;
+}
+
+const ScreenShareTile = subscribe<ScreenShareTileProps, HTMLDivElement>(
+  (
+    {
+      vm,
+      className,
+      style,
+      targetWidth,
+      targetHeight,
+      nameTag,
+      displayName,
+      maximised,
+      fullscreen,
+      onToggleFullscreen,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+    const video = useStateObservable(vm.video);
+    const unencryptedWarning = useStateObservable(vm.unencryptedWarning);
+    const onClickFullScreen = useCallback(
+      () => onToggleFullscreen(vm.id),
+      [onToggleFullscreen, vm],
+    );
+
+    const FullScreenIcon = fullscreen ? CollapseIcon : ExpandIcon;
+
+    return (
+      <Tile
+        ref={ref}
+        className={classNames(className, styles.screenshare)}
+        style={style}
+        targetWidth={targetWidth}
+        targetHeight={targetHeight}
+        video={video}
+        member={vm.member}
+        videoEnabled={true}
+        maximised={maximised}
+        unencryptedWarning={unencryptedWarning}
+        nameTag={nameTag}
+        displayName={displayName}
+        primaryButton={
+          !vm.local && (
+            <button
+              aria-label={
+                fullscreen
+                  ? t("video_tile.full_screen")
+                  : t("video_tile.exit_full_screen")
+              }
+              onClick={onClickFullScreen}
+            >
+              <FullScreenIcon aria-hidden width={20} height={20} />
+            </button>
+          )
+        }
+      />
+    );
+  },
+);
+
+ScreenShareTile.displayName = "ScreenShareTile";
+
+interface Props {
+  vm: TileViewModel;
+  maximised: boolean;
+  fullscreen: boolean;
+  onToggleFullscreen: (itemId: string) => void;
+  onOpenProfile: () => void;
+  targetWidth: number;
+  targetHeight: number;
+  className?: string;
+  style?: ComponentProps<typeof animated.div>["style"];
+  showSpeakingIndicator: boolean;
+}
+
+export const VideoTile = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      vm,
+      maximised,
+      fullscreen,
+      onToggleFullscreen,
+      onOpenProfile,
+      className,
+      style,
+      targetWidth,
+      targetHeight,
+      showSpeakingIndicator,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+
+    // Handle display name changes.
+    // TODO: Move this into the view model
+    const [displayName, setDisplayName] = useReactiveState(
+      () => vm.member?.rawDisplayName ?? "[👻]",
+      [vm.member],
+    );
+    useEffect(() => {
+      if (vm.member) {
+        const updateName = (): void => {
+          setDisplayName(vm.member!.rawDisplayName);
+        };
+
+        vm.member!.on(RoomMemberEvent.Name, updateName);
+        return (): void => {
+          vm.member!.removeListener(RoomMemberEvent.Name, updateName);
+        };
+      }
+    }, [vm.member, setDisplayName]);
+    const nameTag = vm.local
+      ? t("video_tile.sfu_participant_local")
+      : displayName;
+
+    if (vm instanceof UserMediaTileViewModel) {
+      return (
+        <UserMediaTile
+          ref={ref}
+          className={className}
+          style={style}
+          vm={vm}
+          targetWidth={targetWidth}
+          targetHeight={targetHeight}
+          nameTag={nameTag}
+          displayName={displayName}
+          maximised={maximised}
+          onOpenProfile={onOpenProfile}
+          showSpeakingIndicator={showSpeakingIndicator}
+        />
+      );
+    } else {
+      return (
+        <ScreenShareTile
+          ref={ref}
+          className={className}
+          style={style}
+          vm={vm}
+          targetWidth={targetWidth}
+          targetHeight={targetHeight}
+          nameTag={nameTag}
+          displayName={displayName}
+          maximised={maximised}
+          fullscreen={fullscreen}
+          onToggleFullscreen={onToggleFullscreen}
+        />
+      );
+    }
+  },
+);
+
+VideoTile.displayName = "VideoTile";
--- a/src/video-grid/VideoTileSettingsModal.module.css
+++ b/src/video-grid/VideoTileSettingsModal.module.css
@@ -1,120 +0,0 @@
-/*
-Copyright 2022 - 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.
-*/
-
-.videoTileSettingsModal {
-  width: 700px;
-  height: 316px;
-  display: flex;
-}
-
-.content {
-  position: relative;
-  margin: 27px 34px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.localVolumePercentage {
-  width: 3ch;
-}
-
-.localVolumeSlider[type="range"] {
-  -ms-appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-
-  background-color: transparent;
-  --slider-color: var(--cpd-color-bg-subtle-primary);
-  --slider-height: 4px;
-  --thumb-color: var(--cpd-color-text-action-accent);
-  --thumb-radius: 100%;
-  --thumb-size: 16px;
-  --thumb-margin-top: -6px;
-
-  cursor: pointer;
-  width: 100%;
-}
-
-.localVolumeSlider[type="range"]::-moz-range-track {
-  -moz-appearance: none;
-  appearance: none;
-
-  background-color: var(--slider-color);
-  height: var(--slider-height);
-}
-.localVolumeSlider[type="range"]::-ms-track {
-  -ms-appearance: none;
-  appearance: none;
-
-  background-color: var(--slider-color);
-  height: var(--slider-height);
-}
-.localVolumeSlider[type="range"]::-webkit-slider-runnable-track {
-  -webkit-appearance: none;
-  appearance: none;
-
-  background-color: var(--slider-color);
-  height: var(--slider-height);
-}
-
-.localVolumeSlider[type="range"]::-moz-range-thumb {
-  -moz-appearance: none;
-  appearance: none;
-
-  height: var(--thumb-size);
-  width: var(--thumb-size);
-  margin-top: var(--thumb-margin-top);
-  border-radius: var(--thumb-radius);
-  background: var(--thumb-color);
-}
-.localVolumeSlider[type="range"]::-ms-thumb {
-  -ms-appearance: none;
-  appearance: none;
-
-  height: var(--thumb-size);
-  width: var(--thumb-size);
-  margin-top: var(--thumb-margin-top);
-  border-radius: var(--thumb-radius);
-  background: var(--thumb-color);
-}
-.localVolumeSlider[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-
-  height: var(--thumb-size);
-  width: var(--thumb-size);
-  margin-top: var(--thumb-margin-top);
-  border-radius: var(--thumb-radius);
-  background: var(--thumb-color);
-}
-
-.localVolumeSlider[type="range"]::-moz-range-progress {
-  -moz-appearance: none;
-  appearance: none;
-
-  height: var(--slider-height);
-  background: var(--thumb-color);
-}
-.localVolumeSlider[type="range"]::-ms-fill-lower {
-  -moz-appearance: none;
-  appearance: none;
-
-  height: var(--slider-height);
-  background: var(--thumb-color);
-}
--- a/src/video-grid/VideoTileSettingsModal.tsx
+++ b/src/video-grid/VideoTileSettingsModal.tsx
@@ -1,97 +0,0 @@
-/*
-Copyright 2022 - 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 { ChangeEvent, FC, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { RemoteParticipant, Track } from "livekit-client";
-
-import { FieldRow } from "../input/Input";
-import { Modal } from "../Modal";
-import styles from "./VideoTileSettingsModal.module.css";
-import { VolumeIcon } from "../button/VolumeIcon";
-import { ItemData, TileContent } from "./VideoTile";
-
-interface LocalVolumeProps {
-  participant: RemoteParticipant;
-  content: TileContent;
-}
-
-const LocalVolume: FC<LocalVolumeProps> = ({
-  participant,
-  content,
-}: LocalVolumeProps) => {
-  const source =
-    content === TileContent.UserMedia
-      ? Track.Source.Microphone
-      : Track.Source.ScreenShareAudio;
-
-  const [localVolume, setLocalVolume] = useState<number>(
-    participant.getVolume(source) ?? 0,
-  );
-
-  const onLocalVolumeChanged = (event: ChangeEvent<HTMLInputElement>): void => {
-    const value: number = +event.target.value;
-    setLocalVolume(value);
-    participant.setVolume(value, source);
-  };
-
-  return (
-    <>
-      <FieldRow>
-        <VolumeIcon volume={localVolume} />
-        <input
-          className={styles.localVolumeSlider}
-          type="range"
-          min="0"
-          max="1"
-          step="0.01"
-          value={localVolume}
-          onChange={onLocalVolumeChanged}
-        />
-      </FieldRow>
-    </>
-  );
-};
-
-interface Props {
-  data: ItemData;
-  open: boolean;
-  onDismiss: () => void;
-}
-
-export const VideoTileSettingsModal: FC<Props> = ({
-  data,
-  open,
-  onDismiss,
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <Modal
-      className={styles.videoTileSettingsModal}
-      title={t("local_volume_label")}
-      open={open}
-      onDismiss={onDismiss}
-    >
-      <div className={styles.content}>
-        <LocalVolume
-          participant={data.sfuParticipant as RemoteParticipant}
-          content={data.content}
-        />
-      </div>
-    </Modal>
-  );
-};
--- a/test/snapshots/Toast-test.tsx.snap
+++ b/test/snapshots/Toast-test.tsx.snap
@@ -13,7 +13,7 @@ exports[`Toast renders 1`] = `
  type="button"
 >
  <h3
-    class="_font-body-sm-semibold_1jx6b_45"
+    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45"
    id="radix-:r4:"
  >
    Hello world!
--- a/test/video-grid/BigGrid-test.ts
+++ b/test/video-grid/BigGrid-test.ts
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+import { TileDescriptor } from "../../src/state/CallViewModel";
 import {
  addItems,
  column,
@@ -26,7 +27,6 @@ import {
  row,
  moveTile,
 } from "../../src/video-grid/BigGrid";
-import { TileDescriptor } from "../../src/video-grid/VideoGrid";

 /**
 * Builds a grid from a string specifying the contents of each cell as a letter.
@@ -315,7 +315,7 @@ jk`;
  const grid = mkGrid(input);
  let gridAfter = grid;

-  const toggle = (tileId: string) => {
+  const toggle = (tileId: string): void => {
    const tile = grid.cells.find((c) => c?.item.id === tileId)!.item;
    gridAfter = cycleTileSize(gridAfter, tile);
  };
--- a/test/video-grid/VideoGrid-test.ts
+++ b/test/video-grid/VideoGrid-test.ts
@@ -14,11 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {
-  Tile,
-  TileDescriptor,
-  reorderTiles,
-} from "../../src/video-grid/VideoGrid";
+import { TileDescriptor } from "../../src/state/CallViewModel";
+import { Tile, reorderTiles } from "../../src/video-grid/VideoGrid";

 const alice: Tile<unknown> = {
  key: "alice",
--- a/vite.config.js
+++ b/vite.config.js
@@ -77,6 +77,11 @@ export default defineConfig(({ mode }) => {
        "matrix-js-sdk",
        "react-use-measure",
        "@juggle/resize-observer",
+        // These packages modify the document based on some module-level global
+        // state, and don't play nicely with duplicate copies of themselves
+        // https://github.com/radix-ui/primitives/issues/1241#issuecomment-1847837850
+        "@radix-ui/react-focus-guards",
+        "@radix-ui/react-dismissable-layer",
      ],
    },
  };
--- a/yarn.lock
+++ b/yarn.lock