Better logging of to device events / usernames

Add version to console, rageshake, and settings modal
Prevent scroll in call view
2022-02-17 14:08:53 -08:00 · 2022-02-16 11:29:43 -08:00 · 2022-02-16 11:17:33 -08:00 · 2022-02-16 10:52:07 -08:00 · 2022-02-15 15:00:06 -08:00 · 2022-02-15 14:49:50 -08:00
119 changed files with 14420 additions and 3650 deletions
--- a/.env
+++ b/.env
@@ -7,8 +7,8 @@
 # Used for determining the homeserver to use for short urls etc.
 # VITE_DEFAULT_HOMESERVER=http://localhost:8008

-# The room id for the space to use for listing public group call rooms
-# VITE_PUBLIC_SPACE_ROOM_ID=!hjdfshkdskjdsk:myhomeserver.com
+# Used for submitting debug logs to an external rageshake server
+# VITE_RAGESHAKE_SUBMIT_URL=http://localhost:9110/api/submit

 # The Sentry DSN to use for error reporting. Leave undefined to disable.
 # VITE_SENTRY_DSN=https://examplePublicKey@o0.ingest.sentry.io/0
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -0,0 +1,30 @@
+const svgrPlugin = require("vite-plugin-svgr");
+const path = require("path");
+
+module.exports = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  framework: "@storybook/react",
+  core: {
+    builder: "storybook-builder-vite",
+  },
+  async viteFinal(config) {
+    config.plugins = config.plugins.filter(
+      (item) =>
+        !(
+          Array.isArray(item) &&
+          item.length > 0 &&
+          item[0].name === "vite-plugin-mdx"
+        )
+    );
+    config.plugins.push(svgrPlugin());
+    config.resolve = config.resolve || {};
+    config.resolve.alias = config.resolve.alias || {};
+    config.resolve.alias["$(res)"] = path.resolve(
+      __dirname,
+      "../node_modules/matrix-react-sdk/res"
+    );
+    config.resolve.dedupe = config.resolve.dedupe || [];
+    config.resolve.dedupe.push("react", "react-dom", "matrix-js-sdk");
+    return config;
+  },
+};
--- a/.storybook/preview.jsx
+++ b/.storybook/preview.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { addDecorator } from "@storybook/react";
+import { MemoryRouter } from "react-router-dom";
+import { usePageFocusStyle } from "../src/usePageFocusStyle";
+import { OverlayProvider } from "@react-aria/overlays";
+import "../src/index.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+addDecorator((story) => {
+  usePageFocusStyle();
+  return (
+    <MemoryRouter initialEntries={["/"]}>
+      <OverlayProvider>{story()}</OverlayProvider>
+    </MemoryRouter>
+  );
+});
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -0,0 +1,4 @@
+Contributing code to Element
+============================
+
+Element follows the same pattern as the [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md).
--- a/10
+++ b/10
@@ -6,9 +6,13 @@ COPY . /src/matrix-video-chat
 RUN matrix-video-chat/scripts/dockerbuild.sh

 # App
-FROM nginx:alpine
+FROM nginxinc/nginx-unprivileged:alpine

 COPY --from=builder /src/matrix-video-chat/dist /app
+COPY scripts/default.conf /etc/nginx/conf.d/

-RUN rm -rf /usr/share/nginx/html \
-  && ln -s /app /usr/share/nginx/html
+USER root
+
+RUN rm -rf /usr/share/nginx/html
+
+USER 101
--- a/index.html
+++ b/index.html
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-    <title>Matrix Video Chat</title>
-    <script>
-      window.global = window;
-    </script>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
--- a/package.json
+++ b/package.json
@@ -3,9 +3,12 @@
  "scripts": {
    "dev": "vite",
    "build": "vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
  },
  "dependencies": {
+    "@juggle/resize-observer": "^3.3.1",
    "@react-aria/button": "^3.3.4",
    "@react-aria/dialog": "^3.1.4",
    "@react-aria/focus": "^3.5.0",
@@ -27,6 +30,9 @@
    "events": "^3.3.0",
    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#robertlong/group-call",
    "matrix-react-sdk": "github:matrix-org/matrix-react-sdk#robertlong/group-call",
+    "mermaid": "^8.13.8",
+    "normalize.css": "^8.0.1",
+    "pako": "^2.0.4",
    "postcss-preset-env": "^6.7.0",
    "re-resizable": "^6.9.0",
    "react": "^17.0.0",
@@ -34,11 +40,18 @@
    "react-json-view": "^1.21.3",
    "react-router": "6",
    "react-router-dom": "^5.2.0",
-    "react-use-clipboard": "^1.0.7"
+    "react-use-clipboard": "^1.0.7",
+    "react-use-measure": "^2.1.1",
+    "unique-names-generator": "^4.6.0"
  },
  "devDependencies": {
+    "@babel/core": "^7.16.5",
+    "@storybook/react": "^6.5.0-alpha.5",
+    "babel-loader": "^8.2.3",
    "sass": "^1.42.1",
+    "storybook-builder-vite": "^0.1.12",
    "vite": "^2.4.2",
+    "vite-plugin-html-template": "^1.1.0",
    "vite-plugin-svgr": "^0.4.0"
  }
 }
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="favicon.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <title>
+    <%- title %>
+  </title>
+  <script>
+    window.global = window;
+  </script>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
--- a/scripts/default.conf
+++ b/scripts/default.conf
@@ -0,0 +1,10 @@
+server {
+    listen       8080;
+    server_name  localhost;
+
+    location / {
+        root   /app;
+        try_files $uri /$uri /index.html;
+    }
+}
+
--- a/scripts/dockerbuild.sh
+++ b/scripts/dockerbuild.sh
@@ -2,8 +2,9 @@

 set -ex

-VITE_DEFAULT_HOMESERVER=https://call.ems.host
-VITE_SENTRY_DSN=https://b1e328d49be3402ba96101338989fb35@sentry.matrix.org/41
+export VITE_DEFAULT_HOMESERVER=https://call.ems.host
+export VITE_SENTRY_DSN=https://b1e328d49be3402ba96101338989fb35@sentry.matrix.org/41
+export VITE_RAGESHAKE_SUBMIT_URL=https://element.io/bugreports/submit

 git clone https://github.com/matrix-org/matrix-js-sdk.git
 cd matrix-js-sdk
@@ -23,6 +24,9 @@ yarn link
 cd ..

 cd matrix-video-chat
+
+export VITE_APP_VERSION=$(git describe --tags --abbrev=0)
+
 yarn link matrix-js-sdk
 yarn link matrix-react-sdk
 yarn install
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -14,47 +14,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, { useEffect, useState } from "react";
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  useLocation,
-  useHistory,
-} from "react-router-dom";
+import React from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { OverlayProvider } from "@react-aria/overlays";
-import { Home } from "./Home";
-import { LoginPage } from "./LoginPage";
-import { RegisterPage } from "./RegisterPage";
-import { Room } from "./Room";
-import {
-  ClientProvider,
-  defaultHomeserverHost,
-} from "./ConferenceCallManagerHooks";
-import { useFocusVisible } from "@react-aria/interactions";
-import styles from "./App.module.css";
-import { LoadingView } from "./FullScreenView";
+import { HomePage } from "./home/HomePage";
+import { LoginPage } from "./auth/LoginPage";
+import { RegisterPage } from "./auth/RegisterPage";
+import { RoomPage } from "./room/RoomPage";
+import { RoomRedirect } from "./room/RoomRedirect";
+import { ClientProvider } from "./ClientContext";
+import { usePageFocusStyle } from "./usePageFocusStyle";
+import { SequenceDiagramViewerPage } from "./SequenceDiagramViewerPage";

 const SentryRoute = Sentry.withSentryRouting(Route);

 export default function App({ history }) {
-  const { isFocusVisible } = useFocusVisible();
-
-  useEffect(() => {
-    const classList = document.body.classList;
-    const hasClass = classList.contains(styles.hideFocus);
-
-    if (isFocusVisible && hasClass) {
-      classList.remove(styles.hideFocus);
-    } else if (!isFocusVisible && !hasClass) {
-      classList.add(styles.hideFocus);
-    }
-
-    return () => {
-      classList.remove(styles.hideFocus);
-    };
-  }, [isFocusVisible]);
+  usePageFocusStyle();

  return (
    <Router history={history}>
@@ -62,7 +38,7 @@ export default function App({ history }) {
        <OverlayProvider>
          <Switch>
            <SentryRoute exact path="/">
-              <Home />
+              <HomePage />
            </SentryRoute>
            <SentryRoute exact path="/login">
              <LoginPage />
@@ -71,7 +47,10 @@ export default function App({ history }) {
              <RegisterPage />
            </SentryRoute>
            <SentryRoute path="/room/:roomId?">
-              <Room />
+              <RoomPage />
+            </SentryRoute>
+            <SentryRoute path="/inspector">
+              <SequenceDiagramViewerPage />
            </SentryRoute>
            <SentryRoute path="*">
              <RoomRedirect />
@@ -82,24 +61,3 @@ export default function App({ history }) {
    </Router>
  );
 }
-
-function RoomRedirect() {
-  const { pathname } = useLocation();
-  const history = useHistory();
-
-  useEffect(() => {
-    let roomId = pathname;
-
-    if (pathname.startsWith("/")) {
-      roomId = roomId.substr(1, roomId.length);
-    }
-
-    if (!roomId.startsWith("#") && !roomId.startsWith("!")) {
-      roomId = `#${roomId}:${defaultHomeserverHost}`;
-    }
-
-    history.replace(`/room/${roomId}`);
-  }, [pathname, history]);
-
-  return <LoadingView />;
-}
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -1,3 +0,0 @@
-.hideFocus * {
-  outline: none;
-}
--- a/src/Avatar.module.css
+++ b/src/Avatar.module.css
@@ -49,7 +49,7 @@
  width: 42px;
  height: 42px;
  border-radius: 42px;
-  font-size: 36px;
+  font-size: 24px;
 }

 .xl {
--- a/src/CallList.jsx
+++ b/src/CallList.jsx
@@ -1,57 +0,0 @@
-import React, { useMemo } from "react";
-import { Link } from "react-router-dom";
-import { CopyButton } from "./button";
-import { Facepile } from "./Facepile";
-import { Avatar } from "./Avatar";
-import { ReactComponent as VideoIcon } from "./icons/Video.svg";
-import styles from "./CallList.module.css";
-import { getRoomUrl } from "./ConferenceCallManagerHooks";
-
-export function CallList({ title, rooms, client }) {
-  return (
-    <>
-      <h3>{title}</h3>
-      <div className={styles.callList}>
-        {rooms.map(({ roomId, roomName, avatarUrl, participants }) => (
-          <CallTile
-            key={roomId}
-            client={client}
-            name={roomName}
-            avatarUrl={avatarUrl}
-            roomId={roomId}
-            participants={participants}
-          />
-        ))}
-      </div>
-    </>
-  );
-}
-
-function CallTile({ name, avatarUrl, roomId, participants, client }) {
-  return (
-    <div className={styles.callTile}>
-      <Link to={`/room/${roomId}`} className={styles.callTileLink}>
-        <Avatar
-          size="md"
-          bgKey={name}
-          src={avatarUrl}
-          fallback={<VideoIcon width={16} height={16} />}
-          className={styles.avatar}
-        />
-        <div className={styles.callInfo}>
-          <h5>{name}</h5>
-          <p>{getRoomUrl(roomId)}</p>
-          {participants && (
-            <Facepile client={client} participants={participants} />
-          )}
-        </div>
-        <div className={styles.copyButtonSpacer} />
-      </Link>
-      <CopyButton
-        className={styles.copyButton}
-        variant="icon"
-        value={getRoomUrl(roomId)}
-      />
-    </div>
-  );
-}
--- a/src/ClientContext.jsx
+++ b/src/ClientContext.jsx
@@ -0,0 +1,251 @@
+/*
+Copyright 2021 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 React, {
+  useCallback,
+  useEffect,
+  useState,
+  createContext,
+  useMemo,
+  useContext,
+} from "react";
+import { useHistory } from "react-router-dom";
+import { ErrorView } from "./FullScreenView";
+import { initClient, defaultHomeserver } from "./matrix-utils";
+
+const ClientContext = createContext();
+
+export function ClientProvider({ children }) {
+  const history = useHistory();
+  const [
+    { loading, isAuthenticated, isPasswordlessUser, client, userName, error },
+    setState,
+  ] = useState({
+    loading: true,
+    isAuthenticated: false,
+    isPasswordlessUser: false,
+    client: undefined,
+    userName: null,
+    error: undefined,
+  });
+
+  useEffect(() => {
+    async function restore() {
+      try {
+        const authStore = localStorage.getItem("matrix-auth-store");
+
+        if (authStore) {
+          const {
+            user_id,
+            device_id,
+            access_token,
+            passwordlessUser,
+            tempPassword,
+          } = JSON.parse(authStore);
+
+          const client = await initClient({
+            baseUrl: defaultHomeserver,
+            accessToken: access_token,
+            userId: user_id,
+            deviceId: device_id,
+          });
+
+          localStorage.setItem(
+            "matrix-auth-store",
+            JSON.stringify({
+              user_id,
+              device_id,
+              access_token,
+
+              passwordlessUser,
+              tempPassword,
+            })
+          );
+
+          return { client, passwordlessUser };
+        }
+
+        return { client: undefined };
+      } catch (err) {
+        console.error(err);
+        localStorage.removeItem("matrix-auth-store");
+        throw err;
+      }
+    }
+
+    restore()
+      .then(({ client, passwordlessUser }) => {
+        setState({
+          client,
+          loading: false,
+          isAuthenticated: !!client,
+          isPasswordlessUser: !!passwordlessUser,
+          userName: client?.getUserIdLocalpart(),
+        });
+      })
+      .catch(() => {
+        setState({
+          client: undefined,
+          loading: false,
+          isAuthenticated: false,
+          isPasswordlessUser: false,
+          userName: null,
+        });
+      });
+  }, []);
+
+  const changePassword = useCallback(
+    async (password) => {
+      const { tempPassword, passwordlessUser, ...existingSession } = JSON.parse(
+        localStorage.getItem("matrix-auth-store")
+      );
+
+      await client.setPassword(
+        {
+          type: "m.login.password",
+          identifier: {
+            type: "m.id.user",
+            user: existingSession.user_id,
+          },
+          user: existingSession.user_id,
+          password: tempPassword,
+        },
+        password
+      );
+
+      localStorage.setItem(
+        "matrix-auth-store",
+        JSON.stringify({
+          ...existingSession,
+          passwordlessUser: false,
+        })
+      );
+
+      setState({
+        client,
+        loading: false,
+        isAuthenticated: true,
+        isPasswordlessUser: false,
+        userName: client.getUserIdLocalpart(),
+      });
+    },
+    [client]
+  );
+
+  const setClient = useCallback(
+    (newClient, session) => {
+      if (client && client !== newClient) {
+        client.stopClient();
+      }
+
+      if (newClient) {
+        localStorage.setItem("matrix-auth-store", JSON.stringify(session));
+
+        setState({
+          client: newClient,
+          loading: false,
+          isAuthenticated: true,
+          isPasswordlessUser: !!session.passwordlessUser,
+          userName: newClient.getUserIdLocalpart(),
+        });
+      } else {
+        localStorage.removeItem("matrix-auth-store");
+
+        setState({
+          client: undefined,
+          loading: false,
+          isAuthenticated: false,
+          isPasswordlessUser: false,
+          userName: null,
+        });
+      }
+    },
+    [client]
+  );
+
+  const logout = useCallback(() => {
+    localStorage.removeItem("matrix-auth-store");
+    window.location = "/";
+  }, [history]);
+
+  useEffect(() => {
+    if ("BroadcastChannel" in window) {
+      const loadTime = Date.now();
+      const broadcastChannel = new BroadcastChannel("matrix-video-chat");
+
+      function onMessage({ data }) {
+        if (data.load !== undefined && data.load > loadTime) {
+          if (client) {
+            client.stopClient();
+          }
+
+          setState((prev) => ({
+            ...prev,
+            error: new Error(
+              "This application has been opened in another tab."
+            ),
+          }));
+        }
+      }
+
+      broadcastChannel.addEventListener("message", onMessage);
+      broadcastChannel.postMessage({ load: loadTime });
+
+      return () => {
+        broadcastChannel.removeEventListener("message", onMessage);
+      };
+    }
+  }, [client]);
+
+  const context = useMemo(
+    () => ({
+      loading,
+      isAuthenticated,
+      isPasswordlessUser,
+      client,
+      changePassword,
+      logout,
+      userName,
+      setClient,
+    }),
+    [
+      loading,
+      isAuthenticated,
+      isPasswordlessUser,
+      client,
+      changePassword,
+      logout,
+      userName,
+      setClient,
+    ]
+  );
+
+  useEffect(() => {
+    window.matrixclient = client;
+  }, [client]);
+
+  if (error) {
+    return <ErrorView error={error} />;
+  }
+
+  return (
+    <ClientContext.Provider value={context}>{children}</ClientContext.Provider>
+  );
+}
+
+export function useClient() {
+  return useContext(ClientContext);
+}
--- a/src/ConferenceCallDebugger.js
+++ b/src/ConferenceCallDebugger.js
@@ -1,437 +0,0 @@
-/*
-Copyright 2021 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 EventEmitter from "events";
-
-export class ConferenceCallDebugger extends EventEmitter {
-  constructor(client, groupCall) {
-    super();
-
-    this.client = client;
-    this.groupCall = groupCall;
-
-    this.debugState = {
-      users: new Map(),
-      calls: new Map(),
-    };
-
-    this.bufferedEvents = [];
-
-    client.on("event", this._onEvent);
-    groupCall.on("call", this._onCall);
-    groupCall.on("debugstate", this._onDebugStateChanged);
-    groupCall.on("entered", this._onEntered);
-    groupCall.on("left", this._onLeft);
-  }
-
-  _onEntered = () => {
-    const eventCount = this.bufferedEvents.length;
-
-    for (let i = 0; i < eventCount; i++) {
-      const event = this.bufferedEvents.pop();
-      this._onEvent(event);
-    }
-  };
-
-  _onLeft = () => {
-    this.bufferedEvents = [];
-    this.debugState = {
-      users: new Map(),
-      calls: new Map(),
-    };
-    this.emit("debug");
-  };
-
-  _onEvent = (event) => {
-    if (!this.groupCall.entered) {
-      this.bufferedEvents.push(event);
-      return;
-    }
-
-    const roomId = event.getRoomId();
-    const type = event.getType();
-
-    if (
-      roomId === this.groupCall.room.roomId &&
-      (type.startsWith("m.call.") ||
-        type === "me.robertlong.call.info" ||
-        type === "m.room.member")
-    ) {
-      const sender = event.getSender();
-      const { call_id } = event.getContent();
-
-      if (call_id) {
-        if (this.debugState.calls.has(call_id)) {
-          const callState = this.debugState.calls.get(call_id);
-          callState.events.push(event);
-        } else {
-          this.debugState.calls.set(call_id, {
-            state: "unknown",
-            events: [event],
-          });
-        }
-      }
-
-      if (this.debugState.users.has(sender)) {
-        const userState = this.debugState.users.get(sender);
-        userState.events.push(event);
-      } else {
-        this.debugState.users.set(sender, {
-          state: "unknown",
-          events: [event],
-        });
-      }
-
-      this.emit("debug");
-    }
-  };
-
-  _onDebugStateChanged = (userId, callId, state) => {
-    if (userId) {
-      const userState = this.debugState.users.get(userId);
-
-      if (userState) {
-        userState.state = state;
-      } else {
-        this.debugState.users.set(userId, {
-          state,
-          events: [],
-        });
-      }
-    }
-
-    if (callId) {
-      const callState = this.debugState.calls.get(callId);
-
-      if (callState) {
-        callState.state = state;
-      } else {
-        this.debugState.calls.set(callId, {
-          state,
-          events: [],
-        });
-      }
-    }
-
-    this.emit("debug");
-  };
-
-  _onCall = (call) => {
-    const peerConnection = call.peerConn;
-
-    if (!peerConnection) {
-      return;
-    }
-
-    const sendWebRTCInfoEvent = async (eventType) => {
-      const event = {
-        call_id: call.callId,
-        eventType,
-        iceConnectionState: peerConnection.iceConnectionState,
-        iceGatheringState: peerConnection.iceGatheringState,
-        signalingState: peerConnection.signalingState,
-        selectedCandidatePair: null,
-        localCandidate: null,
-        remoteCandidate: null,
-      };
-
-      // getStats doesn't support selectors in Firefox so get all stats by passing null.
-      // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/getStats#browser_compatibility
-      const stats = await peerConnection.getStats(null);
-
-      const statsArr = Array.from(stats.values());
-
-      // Matrix doesn't support floats so we convert time in seconds to ms
-      function secToMs(time) {
-        if (time === undefined) {
-          return undefined;
-        }
-
-        return Math.round(time * 1000);
-      }
-
-      function processTransportStats(transportStats) {
-        if (!transportStats) {
-          return undefined;
-        }
-
-        return {
-          packetsSent: transportStats.packetsSent,
-          packetsReceived: transportStats.packetsReceived,
-          bytesSent: transportStats.bytesSent,
-          bytesReceived: transportStats.bytesReceived,
-          iceRole: transportStats.iceRole,
-          iceState: transportStats.iceState,
-          dtlsState: transportStats.dtlsState,
-          dtlsCipher: transportStats.dtlsCipher,
-          tlsVersion: transportStats.tlsVersion,
-        };
-      }
-
-      function processCandidateStats(candidateStats) {
-        if (!candidateStats) {
-          return undefined;
-        }
-
-        // TODO: Figure out how to normalize ip and address across browsers
-        // networkType property excluded for privacy reasons:
-        // https://www.w3.org/TR/webrtc-stats/#sotd
-        return {
-          priority:
-            candidateStats.priority && candidateStats.priority.toString(),
-          candidateType: candidateStats.candidateType,
-          protocol: candidateStats.protocol,
-          address: !!candidateStats.address
-            ? candidateStats.address
-            : candidateStats.ip,
-          port: candidateStats.port,
-          url: candidateStats.url,
-          relayProtocol: candidateStats.relayProtocol,
-        };
-      }
-
-      function processCandidatePair(candidatePairStats) {
-        if (!candidatePairStats) {
-          return undefined;
-        }
-
-        const localCandidateStats = statsArr.find(
-          (stat) => stat.id === candidatePairStats.localCandidateId
-        );
-        event.localCandidate = processCandidateStats(localCandidateStats);
-
-        const remoteCandidateStats = statsArr.find(
-          (stat) => stat.id === candidatePairStats.remoteCandidateId
-        );
-        event.remoteCandidate = processCandidateStats(remoteCandidateStats);
-
-        const transportStats = statsArr.find(
-          (stat) => stat.id === candidatePairStats.transportId
-        );
-        event.transport = processTransportStats(transportStats);
-
-        return {
-          state: candidatePairStats.state,
-          bytesSent: candidatePairStats.bytesSent,
-          bytesReceived: candidatePairStats.bytesReceived,
-          requestsSent: candidatePairStats.requestsSent,
-          requestsReceived: candidatePairStats.requestsReceived,
-          responsesSent: candidatePairStats.responsesSent,
-          responsesReceived: candidatePairStats.responsesReceived,
-          currentRoundTripTime: secToMs(
-            candidatePairStats.currentRoundTripTime
-          ),
-          totalRoundTripTime: secToMs(candidatePairStats.totalRoundTripTime),
-        };
-      }
-
-      // Firefox uses the deprecated "selected" property for the nominated ice candidate.
-      const selectedCandidatePair = statsArr.find(
-        (stat) =>
-          stat.type === "candidate-pair" && (stat.selected || stat.nominated)
-      );
-
-      event.selectedCandidatePair = processCandidatePair(selectedCandidatePair);
-
-      function processCodecStats(codecStats) {
-        if (!codecStats) {
-          return undefined;
-        }
-
-        // Payload type enums and MIME types listed here:
-        // https://www.iana.org/assignments/rtp-parameters/rtp-parameters.xhtml
-        return {
-          mimeType: codecStats.mimeType,
-          clockRate: codecStats.clockRate,
-          payloadType: codecStats.payloadType,
-          channels: codecStats.channels,
-          sdpFmtpLine: codecStats.sdpFmtpLine,
-        };
-      }
-
-      function processRTPStreamStats(rtpStreamStats) {
-        const codecStats = statsArr.find(
-          (stat) => stat.id === rtpStreamStats.codecId
-        );
-        const codec = processCodecStats(codecStats);
-
-        return {
-          kind: rtpStreamStats.kind,
-          codec,
-        };
-      }
-
-      function processInboundRTPStats(inboundRTPStats) {
-        const rtpStreamStats = processRTPStreamStats(inboundRTPStats);
-
-        return {
-          ...rtpStreamStats,
-          decoderImplementation: inboundRTPStats.decoderImplementation,
-          bytesReceived: inboundRTPStats.bytesReceived,
-          packetsReceived: inboundRTPStats.packetsReceived,
-          packetsLost: inboundRTPStats.packetsLost,
-          jitter: secToMs(inboundRTPStats.jitter),
-          frameWidth: inboundRTPStats.frameWidth,
-          frameHeight: inboundRTPStats.frameHeight,
-          frameBitDepth: inboundRTPStats.frameBitDepth,
-          framesPerSecond:
-            inboundRTPStats.framesPerSecond &&
-            inboundRTPStats.framesPerSecond.toString(),
-          framesReceived: inboundRTPStats.framesReceived,
-          framesDecoded: inboundRTPStats.framesDecoded,
-          framesDropped: inboundRTPStats.framesDropped,
-          totalSamplesDecoded: inboundRTPStats.totalSamplesDecoded,
-          totalDecodeTime: secToMs(inboundRTPStats.totalDecodeTime),
-          totalProcessingDelay: secToMs(inboundRTPStats.totalProcessingDelay),
-        };
-      }
-
-      function processOutboundRTPStats(outboundRTPStats) {
-        const rtpStreamStats = processRTPStreamStats(outboundRTPStats);
-
-        return {
-          ...rtpStreamStats,
-          encoderImplementation: outboundRTPStats.encoderImplementation,
-          bytesSent: outboundRTPStats.bytesSent,
-          packetsSent: outboundRTPStats.packetsSent,
-          frameWidth: outboundRTPStats.frameWidth,
-          frameHeight: outboundRTPStats.frameHeight,
-          frameBitDepth: outboundRTPStats.frameBitDepth,
-          framesPerSecond:
-            outboundRTPStats.framesPerSecond &&
-            outboundRTPStats.framesPerSecond.toString(),
-          framesSent: outboundRTPStats.framesSent,
-          framesEncoded: outboundRTPStats.framesEncoded,
-          qualityLimitationReason: outboundRTPStats.qualityLimitationReason,
-          qualityLimitationResolutionChanges:
-            outboundRTPStats.qualityLimitationResolutionChanges,
-          totalEncodeTime: secToMs(outboundRTPStats.totalEncodeTime),
-          totalPacketSendDelay: secToMs(outboundRTPStats.totalPacketSendDelay),
-        };
-      }
-
-      function processRemoteInboundRTPStats(remoteInboundRTPStats) {
-        const rtpStreamStats = processRTPStreamStats(remoteInboundRTPStats);
-
-        return {
-          ...rtpStreamStats,
-          packetsReceived: remoteInboundRTPStats.packetsReceived,
-          packetsLost: remoteInboundRTPStats.packetsLost,
-          jitter: secToMs(remoteInboundRTPStats.jitter),
-          framesDropped: remoteInboundRTPStats.framesDropped,
-          roundTripTime: secToMs(remoteInboundRTPStats.roundTripTime),
-          totalRoundTripTime: secToMs(remoteInboundRTPStats.totalRoundTripTime),
-          fractionLost:
-            remoteInboundRTPStats.fractionLost !== undefined &&
-            remoteInboundRTPStats.fractionLost.toString(),
-          reportsReceived: remoteInboundRTPStats.reportsReceived,
-          roundTripTimeMeasurements:
-            remoteInboundRTPStats.roundTripTimeMeasurements,
-        };
-      }
-
-      function processRemoteOutboundRTPStats(remoteOutboundRTPStats) {
-        const rtpStreamStats = processRTPStreamStats(remoteOutboundRTPStats);
-
-        return {
-          ...rtpStreamStats,
-          encoderImplementation: remoteOutboundRTPStats.encoderImplementation,
-          bytesSent: remoteOutboundRTPStats.bytesSent,
-          packetsSent: remoteOutboundRTPStats.packetsSent,
-          roundTripTime: secToMs(remoteOutboundRTPStats.roundTripTime),
-          totalRoundTripTime: secToMs(
-            remoteOutboundRTPStats.totalRoundTripTime
-          ),
-          reportsSent: remoteOutboundRTPStats.reportsSent,
-          roundTripTimeMeasurements:
-            remoteOutboundRTPStats.roundTripTimeMeasurements,
-        };
-      }
-
-      event.inboundRTP = statsArr
-        .filter((stat) => stat.type === "inbound-rtp")
-        .map(processInboundRTPStats);
-
-      event.outboundRTP = statsArr
-        .filter((stat) => stat.type === "outbound-rtp")
-        .map(processOutboundRTPStats);
-
-      event.remoteInboundRTP = statsArr
-        .filter((stat) => stat.type === "remote-inbound-rtp")
-        .map(processRemoteInboundRTPStats);
-
-      event.remoteOutboundRTP = statsArr
-        .filter((stat) => stat.type === "remote-outbound-rtp")
-        .map(processRemoteOutboundRTPStats);
-
-      this.client.sendEvent(
-        this.groupCall.room.roomId,
-        "me.robertlong.call.info",
-        event
-      );
-    };
-
-    let statsTimeout;
-
-    const sendStats = () => {
-      if (
-        call.state === "ended" ||
-        peerConnection.connectionState === "closed"
-      ) {
-        clearTimeout(statsTimeout);
-        return;
-      }
-
-      sendWebRTCInfoEvent("stats");
-      statsTimeout = setTimeout(sendStats, 30 * 1000);
-    };
-
-    setTimeout(sendStats, 30 * 1000);
-
-    peerConnection.addEventListener("iceconnectionstatechange", () => {
-      sendWebRTCInfoEvent("iceconnectionstatechange");
-    });
-    peerConnection.addEventListener("icegatheringstatechange", () => {
-      sendWebRTCInfoEvent("icegatheringstatechange");
-    });
-    peerConnection.addEventListener("negotiationneeded", () => {
-      sendWebRTCInfoEvent("negotiationneeded");
-    });
-    peerConnection.addEventListener("track", () => {
-      sendWebRTCInfoEvent("track");
-    });
-    // NOTE: Not available on Firefox
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1561441
-    peerConnection.addEventListener(
-      "icecandidateerror",
-      ({ errorCode, url, errorText }) => {
-        this.client.sendEvent(
-          this.groupCall.room.roomId,
-          "me.robertlong.call.ice_error",
-          {
-            call_id: call.callId,
-            errorCode,
-            url,
-            errorText,
-          }
-        );
-      }
-    );
-    peerConnection.addEventListener("signalingstatechange", () => {
-      sendWebRTCInfoEvent("signalingstatechange");
-    });
-  };
-}
--- a/src/ConferenceCallManagerHooks.jsx
+++ b/src/ConferenceCallManagerHooks.jsx
@@ -1,720 +0,0 @@
-/*
-Copyright 2021 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 React, {
-  useCallback,
-  useEffect,
-  useState,
-  createContext,
-  useMemo,
-  useContext,
-} from "react";
-import matrix from "matrix-js-sdk/src/browser-index";
-import {
-  GroupCallIntent,
-  GroupCallType,
-} from "matrix-js-sdk/src/browser-index";
-import { useHistory } from "react-router-dom";
-
-export const defaultHomeserver =
-  import.meta.env.VITE_DEFAULT_HOMESERVER ||
-  `${window.location.protocol}//${window.location.host}`;
-
-export const defaultHomeserverHost = new URL(defaultHomeserver).host;
-
-const ClientContext = createContext();
-
-function waitForSync(client) {
-  return new Promise((resolve, reject) => {
-    const onSync = (state, _old, data) => {
-      if (state === "PREPARED") {
-        resolve();
-        client.removeListener("sync", onSync);
-      } else if (state === "ERROR") {
-        reject(data?.error);
-        client.removeListener("sync", onSync);
-      }
-    };
-    client.on("sync", onSync);
-  });
-}
-
-async function initClient(clientOptions, guest) {
-  const client = matrix.createClient(clientOptions);
-
-  if (guest) {
-    client.setGuest(true);
-  }
-
-  await client.startClient({
-    // dirty hack to reduce chance of gappy syncs
-    // should be fixed by spotting gaps and backpaginating
-    initialSyncLimit: 50,
-  });
-
-  await waitForSync(client);
-
-  return client;
-}
-
-export async function fetchGroupCall(
-  client,
-  roomIdOrAlias,
-  viaServers = undefined,
-  timeout = 5000
-) {
-  const { roomId } = await client.joinRoom(roomIdOrAlias, { viaServers });
-
-  return new Promise((resolve, reject) => {
-    let timeoutId;
-
-    function onGroupCallIncoming(groupCall) {
-      if (groupCall && groupCall.room.roomId === roomId) {
-        clearTimeout(timeoutId);
-        client.removeListener("GroupCall.incoming", onGroupCallIncoming);
-        resolve(groupCall);
-      }
-    }
-
-    const groupCall = client.getGroupCallForRoom(roomId);
-
-    if (groupCall) {
-      resolve(groupCall);
-    }
-
-    client.on("GroupCall.incoming", onGroupCallIncoming);
-
-    if (timeout) {
-      timeoutId = setTimeout(() => {
-        client.removeListener("GroupCall.incoming", onGroupCallIncoming);
-        reject(new Error("Fetching group call timed out."));
-      }, timeout);
-    }
-  });
-}
-
-export function ClientProvider({ children }) {
-  const history = useHistory();
-  const [
-    { loading, isAuthenticated, isPasswordlessUser, isGuest, client, userName },
-    setState,
-  ] = useState({
-    loading: true,
-    isAuthenticated: false,
-    isPasswordlessUser: false,
-    isGuest: false,
-    client: undefined,
-    userName: null,
-  });
-
-  useEffect(() => {
-    async function restore() {
-      try {
-        const authStore = localStorage.getItem("matrix-auth-store");
-
-        if (authStore) {
-          const {
-            user_id,
-            device_id,
-            access_token,
-            guest,
-            passwordlessUser,
-            tempPassword,
-          } = JSON.parse(authStore);
-
-          const client = await initClient(
-            {
-              baseUrl: defaultHomeserver,
-              accessToken: access_token,
-              userId: user_id,
-              deviceId: device_id,
-            },
-            guest
-          );
-
-          localStorage.setItem(
-            "matrix-auth-store",
-            JSON.stringify({
-              user_id,
-              device_id,
-              access_token,
-              guest,
-              passwordlessUser,
-              tempPassword,
-            })
-          );
-
-          return { client, guest, passwordlessUser };
-        }
-
-        return { client: undefined, guest: false };
-      } catch (err) {
-        localStorage.removeItem("matrix-auth-store");
-        throw err;
-      }
-    }
-
-    restore()
-      .then(({ client, guest, passwordlessUser }) => {
-        setState({
-          client,
-          loading: false,
-          isAuthenticated: !!client,
-          isPasswordlessUser: !!passwordlessUser,
-          isGuest: guest,
-          userName: client?.getUserIdLocalpart(),
-        });
-      })
-      .catch(() => {
-        setState({
-          client: undefined,
-          loading: false,
-          isAuthenticated: false,
-          isPasswordlessUser: false,
-          isGuest: false,
-          userName: null,
-        });
-      });
-  }, []);
-
-  const login = useCallback(async (homeserver, username, password) => {
-    try {
-      let loginHomeserverUrl = homeserver.trim();
-
-      if (!loginHomeserverUrl.includes("://")) {
-        loginHomeserverUrl = "https://" + loginHomeserverUrl;
-      }
-
-      try {
-        const wellKnownUrl = new URL(
-          "/.well-known/matrix/client",
-          window.location
-        );
-        const response = await fetch(wellKnownUrl);
-        const config = await response.json();
-
-        if (config["m.homeserver"]) {
-          loginHomeserverUrl = config["m.homeserver"];
-        }
-      } catch (error) {}
-
-      const registrationClient = matrix.createClient(loginHomeserverUrl);
-
-      const { user_id, device_id, access_token } =
-        await registrationClient.loginWithPassword(username, password);
-
-      const client = await initClient({
-        baseUrl: loginHomeserverUrl,
-        accessToken: access_token,
-        userId: user_id,
-        deviceId: device_id,
-      });
-
-      localStorage.setItem(
-        "matrix-auth-store",
-        JSON.stringify({ user_id, device_id, access_token })
-      );
-
-      setState({
-        client,
-        loading: false,
-        isAuthenticated: true,
-        isPasswordlessUser: false,
-        isGuest: false,
-        userName: client.getUserIdLocalpart(),
-      });
-    } catch (err) {
-      localStorage.removeItem("matrix-auth-store");
-      setState({
-        client: undefined,
-        loading: false,
-        isAuthenticated: false,
-        isPasswordlessUser: false,
-        isGuest: false,
-        userName: null,
-      });
-      throw err;
-    }
-  }, []);
-
-  const registerGuest = useCallback(async () => {
-    try {
-      const registrationClient = matrix.createClient(defaultHomeserver);
-
-      const { user_id, device_id, access_token } =
-        await registrationClient.registerGuest({});
-
-      const client = await initClient(
-        {
-          baseUrl: defaultHomeserver,
-          accessToken: access_token,
-          userId: user_id,
-          deviceId: device_id,
-        },
-        true
-      );
-
-      await client.setProfileInfo("displayname", {
-        displayname: `Guest ${client.getUserIdLocalpart()}`,
-      });
-
-      localStorage.setItem(
-        "matrix-auth-store",
-        JSON.stringify({ user_id, device_id, access_token, guest: true })
-      );
-
-      setState({
-        client,
-        loading: false,
-        isAuthenticated: true,
-        isGuest: true,
-        isPasswordlessUser: false,
-        userName: client.getUserIdLocalpart(),
-      });
-    } catch (err) {
-      localStorage.removeItem("matrix-auth-store");
-      setState({
-        client: undefined,
-        loading: false,
-        isAuthenticated: false,
-        isPasswordlessUser: false,
-        isGuest: false,
-        userName: null,
-      });
-      throw err;
-    }
-  }, []);
-
-  const register = useCallback(async (username, password, passwordlessUser) => {
-    try {
-      const registrationClient = matrix.createClient(defaultHomeserver);
-
-      const { user_id, device_id, access_token } =
-        await registrationClient.register(username, password, null, {
-          type: "m.login.dummy",
-        });
-
-      const client = await initClient({
-        baseUrl: defaultHomeserver,
-        accessToken: access_token,
-        userId: user_id,
-        deviceId: device_id,
-      });
-
-      const session = { user_id, device_id, access_token, passwordlessUser };
-
-      if (passwordlessUser) {
-        session.tempPassword = password;
-      }
-
-      localStorage.setItem("matrix-auth-store", JSON.stringify(session));
-
-      setState({
-        client,
-        loading: false,
-        isGuest: false,
-        isAuthenticated: true,
-        isPasswordlessUser: passwordlessUser,
-        userName: client.getUserIdLocalpart(),
-      });
-
-      return client;
-    } catch (err) {
-      localStorage.removeItem("matrix-auth-store");
-      setState({
-        client: undefined,
-        loading: false,
-        isGuest: false,
-        isAuthenticated: false,
-        isPasswordlessUser: false,
-        userName: null,
-      });
-      throw err;
-    }
-  }, []);
-
-  const changePassword = useCallback(
-    async (password) => {
-      const { tempPassword, passwordlessUser, ...existingSession } = JSON.parse(
-        localStorage.getItem("matrix-auth-store")
-      );
-
-      await client.setPassword(
-        {
-          type: "m.login.password",
-          identifier: {
-            type: "m.id.user",
-            user: existingSession.user_id,
-          },
-          user: existingSession.user_id,
-          password: tempPassword,
-        },
-        password
-      );
-
-      localStorage.setItem(
-        "matrix-auth-store",
-        JSON.stringify({
-          ...existingSession,
-          passwordlessUser: false,
-        })
-      );
-
-      setState({
-        client,
-        loading: false,
-        isGuest: false,
-        isAuthenticated: true,
-        isPasswordlessUser: false,
-        userName: client.getUserIdLocalpart(),
-      });
-    },
-    [client]
-  );
-
-  const logout = useCallback(() => {
-    localStorage.removeItem("matrix-auth-store");
-    window.location = "/";
-  }, [history]);
-
-  const context = useMemo(
-    () => ({
-      loading,
-      isAuthenticated,
-      isPasswordlessUser,
-      isGuest,
-      client,
-      login,
-      registerGuest,
-      register,
-      changePassword,
-      logout,
-      userName,
-    }),
-    [
-      loading,
-      isAuthenticated,
-      isPasswordlessUser,
-      isGuest,
-      client,
-      login,
-      registerGuest,
-      register,
-      changePassword,
-      logout,
-      userName,
-    ]
-  );
-
-  return (
-    <ClientContext.Provider value={context}>{children}</ClientContext.Provider>
-  );
-}
-
-export function useClient() {
-  return useContext(ClientContext);
-}
-
-export function roomAliasFromRoomName(roomName) {
-  return roomName
-    .trim()
-    .replace(/\s/g, "-")
-    .replace(/[^\w-]/g, "")
-    .toLowerCase();
-}
-
-export async function createRoom(client, name) {
-  const { room_id, room_alias } = await client.createRoom({
-    visibility: "private",
-    preset: "public_chat",
-    name,
-    room_alias_name: roomAliasFromRoomName(name),
-    power_level_content_override: {
-      invite: 100,
-      kick: 100,
-      ban: 100,
-      redact: 50,
-      state_default: 0,
-      events_default: 0,
-      users_default: 0,
-      events: {
-        "m.room.power_levels": 100,
-        "m.room.history_visibility": 100,
-        "m.room.tombstone": 100,
-        "m.room.encryption": 100,
-        "m.room.name": 50,
-        "m.room.message": 0,
-        "m.room.encrypted": 50,
-        "m.sticker": 50,
-        "org.matrix.msc3401.call.member": 0,
-      },
-      users: {
-        [client.getUserId()]: 100,
-      },
-    },
-  });
-
-  await client.setGuestAccess(room_id, {
-    allowJoin: true,
-    allowRead: true,
-  });
-
-  await client.createGroupCall(
-    room_id,
-    GroupCallType.Video,
-    GroupCallIntent.Prompt
-  );
-
-  return room_alias || room_id;
-}
-
-export function useLoadGroupCall(client, roomId, viaServers) {
-  const [state, setState] = useState({
-    loading: true,
-    error: undefined,
-    groupCall: undefined,
-  });
-
-  useEffect(() => {
-    setState({ loading: true });
-    fetchGroupCall(client, roomId, viaServers, 30000)
-      .then((groupCall) => setState({ loading: false, groupCall }))
-      .catch((error) => setState({ loading: false, error }));
-  }, [client, roomId]);
-
-  return state;
-}
-
-const tsCache = {};
-
-function getLastTs(client, r) {
-  if (tsCache[r.roomId]) {
-    return tsCache[r.roomId];
-  }
-
-  if (!r || !r.timeline) {
-    const ts = Number.MAX_SAFE_INTEGER;
-    tsCache[r.roomId] = ts;
-    return ts;
-  }
-
-  const myUserId = client.getUserId();
-
-  if (r.getMyMembership() !== "join") {
-    const membershipEvent = r.currentState.getStateEvents(
-      "m.room.member",
-      myUserId
-    );
-
-    if (membershipEvent && !Array.isArray(membershipEvent)) {
-      const ts = membershipEvent.getTs();
-      tsCache[r.roomId] = ts;
-      return ts;
-    }
-  }
-
-  for (let i = r.timeline.length - 1; i >= 0; --i) {
-    const ev = r.timeline[i];
-    const ts = ev.getTs();
-
-    if (ts) {
-      tsCache[r.roomId] = ts;
-      return ts;
-    }
-  }
-
-  const ts = Number.MAX_SAFE_INTEGER;
-  tsCache[r.roomId] = ts;
-  return ts;
-}
-
-function sortRooms(client, rooms) {
-  return rooms.sort((a, b) => {
-    return getLastTs(client, b) - getLastTs(client, a);
-  });
-}
-
-export function useGroupCallRooms(client) {
-  const [rooms, setRooms] = useState([]);
-
-  useEffect(() => {
-    function updateRooms() {
-      const groupCalls = client.groupCallEventHandler.groupCalls.values();
-      const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room);
-      const sortedRooms = sortRooms(client, rooms);
-      const items = sortedRooms.map((room) => {
-        const groupCall = client.getGroupCallForRoom(room.roomId);
-
-        return {
-          roomId: room.getCanonicalAlias() || room.roomId,
-          roomName: room.name,
-          avatarUrl: null,
-          room,
-          groupCall,
-          participants: [...groupCall.participants],
-        };
-      });
-      setRooms(items);
-    }
-
-    updateRooms();
-
-    client.on("GroupCall.incoming", updateRooms);
-    client.on("GroupCall.participants", updateRooms);
-
-    return () => {
-      client.removeListener("GroupCall.incoming", updateRooms);
-      client.removeListener("GroupCall.participants", updateRooms);
-    };
-  }, []);
-
-  return rooms;
-}
-
-export function usePublicRooms(client, publicSpaceRoomId, maxRooms = 50) {
-  const [rooms, setRooms] = useState([]);
-
-  useEffect(() => {
-    if (publicSpaceRoomId) {
-      client.getRoomHierarchy(publicSpaceRoomId, maxRooms).then(({ rooms }) => {
-        const filteredRooms = rooms
-          .filter((room) => room.room_type !== "m.space")
-          .map((room) => ({
-            roomId: room.room_alias || room.room_id,
-            roomName: room.name,
-            avatarUrl: null,
-            room,
-            participants: [],
-          }));
-
-        setRooms(filteredRooms);
-      });
-    } else {
-      setRooms([]);
-    }
-  }, [publicSpaceRoomId]);
-
-  return rooms;
-}
-
-export function getRoomUrl(roomId) {
-  if (roomId.startsWith("#")) {
-    const [localPart, host] = roomId.replace("#", "").split(":");
-
-    if (host !== defaultHomeserverHost) {
-      return `${window.location.host}/room/${roomId}`;
-    } else {
-      return `${window.location.host}/${localPart}`;
-    }
-  } else {
-    return `${window.location.host}/room/${roomId}`;
-  }
-}
-
-export function getAvatarUrl(client, mxcUrl, avatarSize = 96) {
-  const width = Math.floor(avatarSize * window.devicePixelRatio);
-  const height = Math.floor(avatarSize * window.devicePixelRatio);
-  return mxcUrl && client.mxcUrlToHttp(mxcUrl, width, height, "crop");
-}
-
-export function useProfile(client) {
-  const [{ loading, displayName, avatarUrl, error, success }, setState] =
-    useState(() => {
-      const user = client?.getUser(client.getUserId());
-
-      return {
-        success: false,
-        loading: false,
-        displayName: user?.displayName,
-        avatarUrl: user && client && getAvatarUrl(client, user.avatarUrl),
-        error: null,
-      };
-    });
-
-  useEffect(() => {
-    const onChangeUser = (_event, { displayName, avatarUrl }) => {
-      setState({
-        success: false,
-        loading: false,
-        displayName,
-        avatarUrl: getAvatarUrl(client, avatarUrl),
-        error: null,
-      });
-    };
-
-    let user;
-
-    if (client) {
-      const userId = client.getUserId();
-      user = client.getUser(userId);
-      user.on("User.displayName", onChangeUser);
-      user.on("User.avatarUrl", onChangeUser);
-    }
-
-    return () => {
-      if (user) {
-        user.removeListener("User.displayName", onChangeUser);
-        user.removeListener("User.avatarUrl", onChangeUser);
-      }
-    };
-  }, [client]);
-
-  const saveProfile = useCallback(
-    async ({ displayName, avatar }) => {
-      if (client) {
-        setState((prev) => ({
-          ...prev,
-          loading: true,
-          error: null,
-          success: false,
-        }));
-
-        try {
-          await client.setDisplayName(displayName);
-
-          let mxcAvatarUrl;
-
-          if (avatar) {
-            mxcAvatarUrl = await client.uploadContent(avatar);
-            await client.setAvatarUrl(mxcAvatarUrl);
-          }
-
-          setState((prev) => ({
-            ...prev,
-            displayName,
-            avatarUrl: mxcAvatarUrl
-              ? getAvatarUrl(client, mxcAvatarUrl)
-              : prev.avatarUrl,
-            loading: false,
-            success: true,
-          }));
-        } catch (error) {
-          setState((prev) => ({
-            ...prev,
-            loading: false,
-            error,
-            success: false,
-          }));
-        }
-      } else {
-        console.error("Client not initialized before calling saveProfile");
-      }
-    },
-    [client]
-  );
-
-  return { loading, error, displayName, avatarUrl, saveProfile, success };
-}
--- a/src/Facepile.jsx
+++ b/src/Facepile.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import styles from "./Facepile.module.css";
 import classNames from "classnames";
 import { Avatar } from "./Avatar";
-import { getAvatarUrl } from "./ConferenceCallManagerHooks";
+import { getAvatarUrl } from "./matrix-utils";

 export function Facepile({ className, client, participants, ...rest }) {
  return (
--- a/src/GroupCallInspector.jsx
+++ b/src/GroupCallInspector.jsx
@@ -1,204 +0,0 @@
-import { Resizable } from "re-resizable";
-import React, { useEffect, useState, useMemo } from "react";
-import { useCallback } from "react";
-import ReactJson from "react-json-view";
-
-function getCallUserId(call) {
-  return call.getOpponentMember()?.userId || call.invitee || null;
-}
-
-function getCallState(call) {
-  return {
-    id: call.callId,
-    opponentMemberId: getCallUserId(call),
-    state: call.state,
-    direction: call.direction,
-  };
-}
-
-function getHangupCallState(call) {
-  return {
-    ...getCallState(call),
-    hangupReason: call.hangupReason,
-  };
-}
-
-export function GroupCallInspector({ client, groupCall, show }) {
-  const [roomStateEvents, setRoomStateEvents] = useState([]);
-  const [toDeviceEvents, setToDeviceEvents] = useState([]);
-  const [state, setState] = useState({
-    userId: client.getUserId(),
-  });
-
-  const updateState = useCallback(
-    (next) => setState((prev) => ({ ...prev, ...next })),
-    []
-  );
-
-  useEffect(() => {
-    function onUpdateRoomState(event) {
-      if (event) {
-        setRoomStateEvents((prev) => [
-          ...prev,
-          {
-            eventType: event.getType(),
-            stateKey: event.getStateKey(),
-            content: event.getContent(),
-          },
-        ]);
-      }
-
-      const roomEvent = groupCall.room.currentState
-        .getStateEvents("org.matrix.msc3401.call", groupCall.groupCallId)
-        .getContent();
-
-      const memberEvents = Object.fromEntries(
-        groupCall.room.currentState
-          .getStateEvents("org.matrix.msc3401.call.member")
-          .map((event) => [event.getStateKey(), event.getContent()])
-      );
-
-      updateState({
-        ["org.matrix.msc3401.call"]: roomEvent,
-        ["org.matrix.msc3401.call.member"]: memberEvents,
-      });
-    }
-
-    function onCallsChanged() {
-      const calls = groupCall.calls.reduce((obj, call) => {
-        obj[
-          `${call.callId} (${call.getOpponentMember()?.userId || call.sender})`
-        ] = getCallState(call);
-        return obj;
-      }, {});
-
-      updateState({ calls });
-    }
-
-    function onCallHangup(call) {
-      setState(({ hangupCalls, ...rest }) => ({
-        ...rest,
-        hangupCalls: {
-          ...hangupCalls,
-          [`${call.callId} (${
-            call.getOpponentMember()?.userId || call.sender
-          })`]: getHangupCallState(call),
-        },
-      }));
-    }
-
-    function onToDeviceEvent(event) {
-      const eventType = event.getType();
-
-      if (
-        !(
-          eventType.startsWith("m.call.") ||
-          eventType.startsWith("org.matrix.call.")
-        )
-      ) {
-        return;
-      }
-
-      const content = event.getContent();
-
-      if (content.conf_id && content.conf_id !== groupCall.groupCallId) {
-        return;
-      }
-
-      setToDeviceEvents((prev) => [
-        ...prev,
-        { eventType, content, sender: event.getSender() },
-      ]);
-    }
-
-    client.on("RoomState.events", onUpdateRoomState);
-    groupCall.on("calls_changed", onCallsChanged);
-    client.on("state", onCallsChanged);
-    client.on("hangup", onCallHangup);
-    client.on("toDeviceEvent", onToDeviceEvent);
-
-    onUpdateRoomState();
-  }, [client, groupCall]);
-
-  const toDeviceEventsByCall = useMemo(() => {
-    const result = {};
-
-    for (const event of toDeviceEvents) {
-      const callId = event.content.call_id;
-      const key = `${callId} (${event.sender})`;
-      result[key] = result[key] || [];
-      result[key].push(event);
-    }
-
-    return result;
-  }, [toDeviceEvents]);
-
-  useEffect(() => {
-    let timeout;
-
-    async function updateCallStats() {
-      const callIds = groupCall.calls.map(
-        (call) =>
-          `${call.callId} (${call.getOpponentMember()?.userId || call.sender})`
-      );
-      const stats = await Promise.all(
-        groupCall.calls.map((call) =>
-          call.peerConn
-            ? call.peerConn
-                .getStats(null)
-                .then((stats) =>
-                  Object.fromEntries(
-                    Array.from(stats).map(([_id, report], i) => [
-                      report.type + i,
-                      report,
-                    ])
-                  )
-                )
-            : Promise.resolve(null)
-        )
-      );
-
-      const callStats = {};
-
-      for (let i = 0; i < groupCall.calls.length; i++) {
-        callStats[callIds[i]] = stats[i];
-      }
-
-      updateState({ callStats });
-      timeout = setTimeout(updateCallStats, 1000);
-    }
-
-    if (show) {
-      updateCallStats();
-    }
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [show]);
-
-  if (!show) {
-    return null;
-  }
-
-  return (
-    <Resizable enable={{ top: true }} defaultSize={{ height: 200 }}>
-      <ReactJson
-        theme="monokai"
-        src={{
-          ...state,
-          roomStateEvents,
-          toDeviceEvents,
-          toDeviceEventsByCall,
-        }}
-        name={null}
-        indentWidth={2}
-        collapsed={1}
-        displayDataTypes={false}
-        displayObjectSize={false}
-        enableClipboard={false}
-        style={{ height: "100%", overflowY: "scroll" }}
-      />
-    </Resizable>
-  );
-}
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -6,6 +6,8 @@ import { ReactComponent as Logo } from "./icons/Logo.svg";
 import { ReactComponent as VideoIcon } from "./icons/Video.svg";
 import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
 import { useButton } from "@react-aria/button";
+import { Subtitle } from "./typography/Typography";
+import { Avatar } from "./Avatar";

 export function Header({ children, className, ...rest }) {
  return (
@@ -15,10 +17,15 @@ export function Header({ children, className, ...rest }) {
  );
 }

-export function LeftNav({ children, className, ...rest }) {
+export function LeftNav({ children, className, hideMobile, ...rest }) {
  return (
    <div
-      className={classNames(styles.nav, styles.leftNav, className)}
+      className={classNames(
+        styles.nav,
+        styles.leftNav,
+        { [styles.hideMobile]: hideMobile },
+        className
+      )}
      {...rest}
    >
      {children}
@@ -26,10 +33,15 @@ export function LeftNav({ children, className, ...rest }) {
  );
 }

-export function RightNav({ children, className, ...rest }) {
+export function RightNav({ children, className, hideMobile, ...rest }) {
  return (
    <div
-      className={classNames(styles.nav, styles.rightNav, className)}
+      className={classNames(
+        styles.nav,
+        styles.rightNav,
+        { [styles.hideMobile]: hideMobile },
+        className
+      )}
      {...rest}
    >
      {children}
@@ -37,9 +49,9 @@ export function RightNav({ children, className, ...rest }) {
  );
 }

-export function HeaderLogo() {
+export function HeaderLogo({ className }) {
  return (
-    <Link className={styles.logo} to="/">
+    <Link className={classNames(styles.headerLogo, className)} to="/">
      <Logo />
    </Link>
  );
@@ -49,9 +61,14 @@ export function RoomHeaderInfo({ roomName }) {
  return (
    <>
      <div className={styles.roomAvatar}>
+        <Avatar
+          size="md"
+          bgKey={roomName}
+          fallback={roomName.slice(0, 1).toUpperCase()}
+        />
        <VideoIcon width={16} height={16} />
      </div>
-      <h3>{roomName}</h3>
+      <Subtitle fontWeight="semiBold">{roomName}</Subtitle>
    </>
  );
 }
--- a/src/Header.module.css
+++ b/src/Header.module.css
@@ -16,16 +16,24 @@
  height: 64px;
 }

-.logo {
-  display: flex;
+.headerLogo {
+  display: none;
  align-items: center;
  text-decoration: none;
 }

+.leftNav.hideMobile {
+  display: none;
+}
+
 .leftNav > * {
  margin-right: 12px;
 }

+.leftNav h3 {
+  margin: 0;
+}
+
 .rightNav {
  justify-content: flex-end;
 }
@@ -34,13 +42,17 @@
  margin-right: 24px;
 }

+.rightNav.hideMobile {
+  display: none;
+}
+
 .nav > :last-child {
  margin-right: 0;
 }

 .roomAvatar {
  position: relative;
-  display: flex;
+  display: none;
  justify-content: center;
  align-items: center;
  width: 36px;
@@ -93,7 +105,18 @@
 }

@media (min-width: 800px) {
+  .headerLogo,
+  .roomAvatar,
+  .leftNav.hideMobile,
+  .rightNav.hideMobile {
+    display: flex;
+  }
+
+  .leftNav h3 {
+    font-size: 18px;
+  }
+
  .nav {
-    height: 98px;
+    height: 76px;
  }
 }
--- a/src/Header.stories.jsx
+++ b/src/Header.stories.jsx
@@ -0,0 +1,106 @@
+import React from "react";
+import { GridLayoutMenu } from "./room/GridLayoutMenu";
+import {
+  Header,
+  HeaderLogo,
+  LeftNav,
+  RightNav,
+  RoomHeaderInfo,
+} from "./Header";
+import { UserMenu } from "./UserMenu";
+
+export default {
+  title: "Header",
+  component: Header,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const HomeAnonymous = () => (
+  <Header>
+    <LeftNav>
+      <HeaderLogo />
+    </LeftNav>
+    <RightNav>
+      <UserMenu />
+    </RightNav>
+  </Header>
+);
+
+export const HomeNamedGuest = () => (
+  <Header>
+    <LeftNav>
+      <HeaderLogo />
+    </LeftNav>
+    <RightNav>
+      <UserMenu isAuthenticated isPasswordlessUser displayName="Yara" />
+    </RightNav>
+  </Header>
+);
+
+export const HomeLoggedIn = () => (
+  <Header>
+    <LeftNav>
+      <HeaderLogo />
+    </LeftNav>
+    <RightNav>
+      <UserMenu isAuthenticated displayName="Yara" />
+    </RightNav>
+  </Header>
+);
+
+export const LobbyNamedGuest = () => (
+  <Header>
+    <LeftNav>
+      <RoomHeaderInfo roomName="Q4Roadmap" />
+    </LeftNav>
+    <RightNav>
+      <UserMenu isAuthenticated isPasswordlessUser displayName="Yara" />
+    </RightNav>
+  </Header>
+);
+
+export const LobbyLoggedIn = () => (
+  <Header>
+    <LeftNav>
+      <RoomHeaderInfo roomName="Q4Roadmap" />
+    </LeftNav>
+    <RightNav>
+      <UserMenu isAuthenticated displayName="Yara" />
+    </RightNav>
+  </Header>
+);
+
+export const InRoomNamedGuest = () => (
+  <Header>
+    <LeftNav>
+      <RoomHeaderInfo roomName="Q4Roadmap" />
+    </LeftNav>
+    <RightNav>
+      <GridLayoutMenu layout="freedom" />
+      <UserMenu isAuthenticated isPasswordlessUser displayName="Yara" />
+    </RightNav>
+  </Header>
+);
+
+export const InRoomLoggedIn = () => (
+  <Header>
+    <LeftNav>
+      <RoomHeaderInfo roomName="Q4Roadmap" />
+    </LeftNav>
+    <RightNav>
+      <GridLayoutMenu layout="freedom" />
+      <UserMenu isAuthenticated displayName="Yara" />
+    </RightNav>
+  </Header>
+);
+
+export const CreateAccount = () => (
+  <Header>
+    <LeftNav>
+      <HeaderLogo />
+    </LeftNav>
+    <RightNav></RightNav>
+  </Header>
+);
--- a/src/Home.jsx
+++ b/src/Home.jsx
@@ -1,352 +0,0 @@
-/*
-Copyright 2021 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 React, { useCallback, useState } from "react";
-import { useHistory, Link } from "react-router-dom";
-import {
-  useClient,
-  useGroupCallRooms,
-  usePublicRooms,
-  createRoom,
-  roomAliasFromRoomName,
-} from "./ConferenceCallManagerHooks";
-import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
-import styles from "./Home.module.css";
-import { FieldRow, InputField, ErrorMessage } from "./Input";
-import { UserMenu } from "./UserMenu";
-import { Button } from "./button";
-import { CallList } from "./CallList";
-import classNames from "classnames";
-import { ErrorView, LoadingView } from "./FullScreenView";
-import { useModalTriggerState } from "./Modal";
-import { randomString } from "matrix-js-sdk/src/randomstring";
-import { JoinExistingCallModal } from "./JoinExistingCallModal";
-
-export function Home() {
-  const {
-    isAuthenticated,
-    isGuest,
-    isPasswordlessUser,
-    loading,
-    error,
-    client,
-    register,
-  } = useClient();
-
-  const history = useHistory();
-  const [creatingRoom, setCreatingRoom] = useState(false);
-  const [createRoomError, setCreateRoomError] = useState();
-  const { modalState, modalProps } = useModalTriggerState();
-  const [existingRoomId, setExistingRoomId] = useState();
-
-  const onCreateRoom = useCallback(
-    (e) => {
-      e.preventDefault();
-      const data = new FormData(e.target);
-      const roomName = data.get("roomName");
-      const userName = data.get("userName");
-
-      async function onCreateRoom() {
-        let _client = client;
-
-        if (!_client || isGuest) {
-          _client = await register(userName, randomString(16), true);
-        }
-
-        const roomIdOrAlias = await createRoom(_client, roomName);
-
-        if (roomIdOrAlias) {
-          history.push(`/room/${roomIdOrAlias}`);
-        }
-      }
-
-      setCreateRoomError(undefined);
-      setCreatingRoom(true);
-
-      return onCreateRoom().catch((error) => {
-        if (error.errcode === "M_ROOM_IN_USE") {
-          setExistingRoomId(roomAliasFromRoomName(roomName));
-          setCreateRoomError(undefined);
-          modalState.open();
-        } else {
-          setCreateRoomError(error);
-        }
-
-        setCreatingRoom(false);
-      });
-    },
-    [client, history, register, isGuest]
-  );
-
-  const onJoinRoom = useCallback(
-    (e) => {
-      e.preventDefault();
-      const data = new FormData(e.target);
-      const roomId = data.get("roomId");
-      history.push(`/${roomId}`);
-    },
-    [history]
-  );
-
-  const onJoinExistingRoom = useCallback(() => {
-    history.push(`/${existingRoomId}`);
-  }, [history, existingRoomId]);
-
-  if (loading) {
-    return <LoadingView />;
-  } else if (error) {
-    return <ErrorView error={error} />;
-  } else {
-    return (
-      <>
-        {!isAuthenticated || isGuest ? (
-          <UnregisteredView
-            onCreateRoom={onCreateRoom}
-            createRoomError={createRoomError}
-            creatingRoom={creatingRoom}
-            onJoinRoom={onJoinRoom}
-          />
-        ) : (
-          <RegisteredView
-            client={client}
-            isPasswordlessUser={isPasswordlessUser}
-            isGuest={isGuest}
-            onCreateRoom={onCreateRoom}
-            createRoomError={createRoomError}
-            creatingRoom={creatingRoom}
-            onJoinRoom={onJoinRoom}
-          />
-        )}
-        {modalState.isOpen && (
-          <JoinExistingCallModal onJoin={onJoinExistingRoom} {...modalProps} />
-        )}
-      </>
-    );
-  }
-}
-
-function UnregisteredView({
-  onCreateRoom,
-  createRoomError,
-  creatingRoom,
-  onJoinRoom,
-}) {
-  return (
-    <div className={classNames(styles.home, styles.fullWidth)}>
-      <Header className={styles.header}>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
-        <RightNav>
-          <UserMenu />
-        </RightNav>
-      </Header>
-      <div className={styles.splitContainer}>
-        <div className={styles.left}>
-          <div className={styles.content}>
-            <div className={styles.centered}>
-              <form onSubmit={onJoinRoom}>
-                <h1>Join a call</h1>
-                <FieldRow className={styles.fieldRow}>
-                  <InputField
-                    id="roomId"
-                    name="roomId"
-                    label="Call ID"
-                    type="text"
-                    required
-                    autoComplete="off"
-                    placeholder="Call ID"
-                  />
-                </FieldRow>
-                <FieldRow className={styles.fieldRow}>
-                  <Button className={styles.button} type="submit">
-                    Join call
-                  </Button>
-                </FieldRow>
-              </form>
-              <hr />
-              <form onSubmit={onCreateRoom}>
-                <h1>Create a call</h1>
-                <FieldRow className={styles.fieldRow}>
-                  <InputField
-                    id="userName"
-                    name="userName"
-                    label="Username"
-                    type="text"
-                    required
-                    autoComplete="off"
-                    placeholder="Username"
-                  />
-                </FieldRow>
-                <FieldRow className={styles.fieldRow}>
-                  <InputField
-                    id="roomName"
-                    name="roomName"
-                    label="Room Name"
-                    type="text"
-                    required
-                    autoComplete="off"
-                    placeholder="Room Name"
-                  />
-                </FieldRow>
-                {createRoomError && (
-                  <FieldRow className={styles.fieldRow}>
-                    <ErrorMessage>{createRoomError.message}</ErrorMessage>
-                  </FieldRow>
-                )}
-                <FieldRow className={styles.fieldRow}>
-                  <Button
-                    className={styles.button}
-                    type="submit"
-                    disabled={creatingRoom}
-                  >
-                    {creatingRoom ? "Creating call..." : "Create call"}
-                  </Button>
-                </FieldRow>
-              </form>
-
-              <div className={styles.authLinks}>
-                <p>
-                  Not registered yet?{" "}
-                  <Link to="/register">Create an account</Link>
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function RegisteredView({
-  client,
-  isPasswordlessUser,
-  isGuest,
-  onCreateRoom,
-  createRoomError,
-  creatingRoom,
-  onJoinRoom,
-}) {
-  const publicRooms = usePublicRooms(
-    client,
-    import.meta.env.VITE_PUBLIC_SPACE_ROOM_ID
-  );
-  const recentRooms = useGroupCallRooms(client);
-
-  const hideCallList = publicRooms.length === 0 && recentRooms.length === 0;
-
-  return (
-    <div
-      className={classNames(styles.home, {
-        [styles.fullWidth]: hideCallList,
-      })}
-    >
-      <Header className={styles.header}>
-        <LeftNav className={styles.leftNav}>
-          <HeaderLogo />
-        </LeftNav>
-        <RightNav>
-          <UserMenu />
-        </RightNav>
-      </Header>
-      <div className={styles.splitContainer}>
-        <div className={styles.left}>
-          <div className={styles.content}>
-            <div className={styles.centered}>
-              <form onSubmit={onJoinRoom}>
-                <h1>Join a call</h1>
-                <FieldRow className={styles.fieldRow}>
-                  <InputField
-                    id="roomId"
-                    name="roomId"
-                    label="Call ID"
-                    type="text"
-                    required
-                    autoComplete="off"
-                    placeholder="Call ID"
-                  />
-                </FieldRow>
-                <FieldRow className={styles.fieldRow}>
-                  <Button className={styles.button} type="submit">
-                    Join call
-                  </Button>
-                </FieldRow>
-              </form>
-              <hr />
-              <form onSubmit={onCreateRoom}>
-                <h1>Create a call</h1>
-                <FieldRow className={styles.fieldRow}>
-                  <InputField
-                    id="roomName"
-                    name="roomName"
-                    label="Room Name"
-                    type="text"
-                    required
-                    autoComplete="off"
-                    placeholder="Room Name"
-                  />
-                </FieldRow>
-                {createRoomError && (
-                  <FieldRow className={styles.fieldRow}>
-                    <ErrorMessage>{createRoomError.message}</ErrorMessage>
-                  </FieldRow>
-                )}
-                <FieldRow className={styles.fieldRow}>
-                  <Button
-                    className={styles.button}
-                    type="submit"
-                    disabled={creatingRoom}
-                  >
-                    {creatingRoom ? "Creating call..." : "Create call"}
-                  </Button>
-                </FieldRow>
-              </form>
-              {(isPasswordlessUser || isGuest) && (
-                <div className={styles.authLinks}>
-                  <p>
-                    Not registered yet?{" "}
-                    <Link to="/register">Create an account</Link>
-                  </p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-        {!hideCallList && (
-          <div className={styles.right}>
-            <div className={styles.content}>
-              {publicRooms.length > 0 && (
-                <CallList
-                  title="Public Calls"
-                  rooms={publicRooms}
-                  client={client}
-                />
-              )}
-              {recentRooms.length > 0 && (
-                <CallList
-                  title="Recent Calls"
-                  rooms={recentRooms}
-                  client={client}
-                />
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
--- a/src/Home.module.css
+++ b/src/Home.module.css
@@ -1,139 +0,0 @@
-.home {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 100%;
-}
-
-.splitContainer {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-}
-
-.left,
-.right {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.fullWidth {
-  background-color: var(--bgColor1);
-}
-
-.fullWidth .header {
-  background-color: var(--bgColor1);
-}
-
-.centered {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: 100%;
-  max-width: 512px;
-  min-width: 0;
-}
-
-.content {
-  flex: 1;
-}
-
-.left .content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.left .content form > * {
-  margin-top: 0;
-  margin-bottom: 24px;
-}
-
-.left .content form > :last-child {
-  margin-bottom: 0;
-}
-
-.left .content hr:after {
-  background-color: var(--bgColor1);
-  content: "OR";
-  padding: 0 12px;
-  position: relative;
-  top: -12px;
-}
-
-.left .content form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 40px 92px;
-}
-
-.fieldRow {
-  width: 100%;
-}
-
-.button {
-  height: 40px;
-  width: 100%;
-  font-size: 15px;
-  font-weight: 600;
-}
-
-.left .content form:first-child {
-  padding-top: 0;
-}
-
-.left .content form:last-child {
-  padding-bottom: 40px;
-}
-
-.right .content {
-  padding: 0 40px 40px 40px;
-}
-
-.right .content h3:first-child {
-  margin-top: 0;
-}
-
-.authLinks {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.authLinks {
-  margin-bottom: 100px;
-  font-size: 15px;
-}
-
-.authLinks a {
-  color: #0dbd8b;
-  font-weight: normal;
-  text-decoration: none;
-}
-
-@media (min-width: 800px) {
-  .left {
-    background-color: var(--bgColor2);
-  }
-
-  .home:not(.fullWidth) .left {
-    max-width: 50%;
-  }
-
-  .home:not(.fullWidth) .leftNav {
-    background-color: var(--bgColor2);
-  }
-
-  .splitContainer {
-    flex-direction: row;
-  }
-
-  .fullWidth .content hr:after,
-  .left .content hr:after,
-  .fullWidth .header {
-    background-color: var(--bgColor2);
-  }
-}
--- a/src/ListBox.module.css
+++ b/src/ListBox.module.css
@@ -23,10 +23,6 @@
  min-height: 32px;
 }

-.option.selected {
-  color: #0dbd8b;
-}
-
 .option.focused {
  background-color: rgba(111, 120, 130, 0.2);
 }
--- a/src/Menu.module.css
+++ b/src/Menu.module.css
@@ -16,7 +16,7 @@
 }

 .menuItem > * {
-  margin-right: 10px;
+  margin: 0 10px 0 0;
 }

 .menuItem > :last-child {
--- a/src/Modal.module.css
+++ b/src/Modal.module.css
@@ -52,6 +52,12 @@
 }

@media (max-width: 799px) {
+  .modalHeader {
+    display: flex;
+    justify-content: space-between;
+    padding: 24px 24px 0 24px;
+  }
+
  .modal.mobileFullScreen {
    position: fixed;
    left: 0;
--- a/src/PopoverMenu.jsx
+++ b/src/PopoverMenu.jsx
@@ -1,72 +0,0 @@
-import React, { useRef } from "react";
-import styles from "./PopoverMenu.module.css";
-import { useMenuTriggerState } from "@react-stately/menu";
-import { useMenuTrigger } from "@react-aria/menu";
-import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
-import classNames from "classnames";
-import { Popover } from "./Popover";
-
-export function PopoverMenuTrigger({
-  children,
-  placement,
-  className,
-  disableOnState,
-  ...rest
-}) {
-  const popoverMenuState = useMenuTriggerState(rest);
-  const buttonRef = useRef();
-  const { menuTriggerProps, menuProps } = useMenuTrigger(
-    {},
-    popoverMenuState,
-    buttonRef
-  );
-
-  const popoverRef = useRef();
-
-  const { overlayProps } = useOverlayPosition({
-    targetRef: buttonRef,
-    overlayRef: popoverRef,
-    placement: placement || "top",
-    offset: 5,
-    isOpen: popoverMenuState.isOpen,
-  });
-
-  if (
-    !Array.isArray(children) ||
-    children.length > 2 ||
-    typeof children[1] !== "function"
-  ) {
-    throw new Error(
-      "PopoverMenu must have two props. The first being a button and the second being a render prop."
-    );
-  }
-
-  const [popoverTrigger, popoverMenu] = children;
-
-  return (
-    <div className={classNames(styles.popoverMenuTrigger, className)}>
-      <popoverTrigger.type
-        {...popoverTrigger.props}
-        {...menuTriggerProps}
-        on={!disableOnState && popoverMenuState.isOpen}
-        ref={buttonRef}
-      />
-      {popoverMenuState.isOpen && (
-        <OverlayContainer>
-          <Popover
-            {...overlayProps}
-            isOpen={popoverMenuState.isOpen}
-            onClose={popoverMenuState.close}
-            ref={popoverRef}
-          >
-            {popoverMenu({
-              ...menuProps,
-              autoFocus: popoverMenuState.focusStrategy,
-              onClose: popoverMenuState.close,
-            })}
-          </Popover>
-        </OverlayContainer>
-      )}
-    </div>
-  );
-}
--- a/src/Room.jsx
+++ b/src/Room.jsx
@@ -1,574 +0,0 @@
-/*
-Copyright 2021 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 React, { useCallback, useEffect, useMemo, useState } from "react";
-import styles from "./Room.module.css";
-import { useLocation, useParams, useHistory, Link } from "react-router-dom";
-import {
-  Button,
-  CopyButton,
-  HangupButton,
-  MicButton,
-  VideoButton,
-  ScreenshareButton,
-  LinkButton,
-} from "./button";
-import { Header, LeftNav, RightNav, RoomHeaderInfo } from "./Header";
-import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
-import VideoGrid, {
-  useVideoGridLayout,
-} from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid";
-import SimpleVideoGrid from "matrix-react-sdk/src/components/views/voip/GroupCallView/SimpleVideoGrid";
-import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss";
-import { useGroupCall } from "matrix-react-sdk/src/hooks/useGroupCall";
-import { useCallFeed } from "matrix-react-sdk/src/hooks/useCallFeed";
-import { useMediaStream } from "matrix-react-sdk/src/hooks/useMediaStream";
-import {
-  getAvatarUrl,
-  getRoomUrl,
-  useClient,
-  useLoadGroupCall,
-  useProfile,
-} from "./ConferenceCallManagerHooks";
-import { ErrorView, LoadingView, FullScreenView } from "./FullScreenView";
-import { GroupCallInspector } from "./GroupCallInspector";
-import * as Sentry from "@sentry/react";
-import { OverflowMenu } from "./OverflowMenu";
-import { GridLayoutMenu } from "./GridLayoutMenu";
-import { UserMenu } from "./UserMenu";
-import classNames from "classnames";
-import { Avatar } from "./Avatar";
-
-const canScreenshare = "getDisplayMedia" in navigator.mediaDevices;
-// There is currently a bug in Safari our our code with cloning and sending MediaStreams
-// or with getUsermedia and getDisplaymedia being used within the same session.
-// For now we can disable screensharing in Safari.
-const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-
-export function Room() {
-  const [registeringGuest, setRegisteringGuest] = useState(false);
-  const [registrationError, setRegistrationError] = useState();
-  const {
-    loading,
-    isAuthenticated,
-    error,
-    client,
-    registerGuest,
-    isGuest,
-    isPasswordlessUser,
-  } = useClient();
-
-  useEffect(() => {
-    if (!loading && !isAuthenticated) {
-      setRegisteringGuest(true);
-
-      registerGuest()
-        .then(() => {
-          setRegisteringGuest(false);
-        })
-        .catch((error) => {
-          setRegistrationError(error);
-          setRegisteringGuest(false);
-        });
-    }
-  }, [loading, isAuthenticated]);
-
-  if (loading || registeringGuest) {
-    return <LoadingView />;
-  }
-
-  if (registrationError || error) {
-    return <ErrorView error={registrationError || error} />;
-  }
-
-  return (
-    <GroupCall
-      client={client}
-      isGuest={isGuest}
-      isPasswordlessUser={isPasswordlessUser}
-    />
-  );
-}
-
-export function GroupCall({ client, isGuest, isPasswordlessUser }) {
-  const { roomId: maybeRoomId } = useParams();
-  const { hash, search } = useLocation();
-  const [simpleGrid, viaServers] = useMemo(() => {
-    const params = new URLSearchParams(search);
-    return [params.has("simple"), params.getAll("via")];
-  }, [search]);
-  const roomId = maybeRoomId || hash;
-  const { loading, error, groupCall } = useLoadGroupCall(
-    client,
-    roomId,
-    viaServers
-  );
-
-  useEffect(() => {
-    window.groupCall = groupCall;
-  }, [groupCall]);
-
-  if (loading) {
-    return <LoadingRoomView />;
-  }
-
-  if (error) {
-    return <ErrorView error={error} />;
-  }
-
-  return (
-    <GroupCallView
-      isGuest={isGuest}
-      isPasswordlessUser={isPasswordlessUser}
-      client={client}
-      roomId={roomId}
-      groupCall={groupCall}
-      simpleGrid={simpleGrid}
-    />
-  );
-}
-
-export function GroupCallView({
-  client,
-  isGuest,
-  isPasswordlessUser,
-  roomId,
-  groupCall,
-  simpleGrid,
-}) {
-  const [showInspector, setShowInspector] = useState(false);
-  const {
-    state,
-    error,
-    activeSpeaker,
-    userMediaFeeds,
-    microphoneMuted,
-    localVideoMuted,
-    localCallFeed,
-    initLocalCallFeed,
-    enter,
-    leave,
-    toggleLocalVideoMuted,
-    toggleMicrophoneMuted,
-    toggleScreensharing,
-    isScreensharing,
-    localScreenshareFeed,
-    screenshareFeeds,
-    hasLocalParticipant,
-  } = useGroupCall(groupCall);
-
-  useEffect(() => {
-    function onHangup(call) {
-      if (call.hangupReason === "ice_failed") {
-        Sentry.captureException(new Error("Call hangup due to ICE failure."));
-      }
-    }
-
-    function onError(error) {
-      Sentry.captureException(error);
-    }
-
-    if (groupCall) {
-      groupCall.on("hangup", onHangup);
-      groupCall.on("error", onError);
-    }
-
-    return () => {
-      if (groupCall) {
-        groupCall.removeListener("hangup", onHangup);
-        groupCall.removeListener("error", onError);
-      }
-    };
-  }, [groupCall]);
-
-  const [left, setLeft] = useState(false);
-  const history = useHistory();
-
-  const onLeave = useCallback(() => {
-    leave();
-
-    if (!isGuest && !isPasswordlessUser) {
-      history.push("/");
-    } else {
-      setLeft(true);
-    }
-  }, [leave, history, isGuest]);
-
-  if (error) {
-    return <ErrorView error={error} />;
-  } else if (state === GroupCallState.Entered) {
-    return (
-      <InRoomView
-        groupCall={groupCall}
-        client={client}
-        isGuest={isGuest}
-        roomName={groupCall.room.name}
-        microphoneMuted={microphoneMuted}
-        localVideoMuted={localVideoMuted}
-        toggleLocalVideoMuted={toggleLocalVideoMuted}
-        toggleMicrophoneMuted={toggleMicrophoneMuted}
-        userMediaFeeds={userMediaFeeds}
-        activeSpeaker={activeSpeaker}
-        onLeave={onLeave}
-        toggleScreensharing={toggleScreensharing}
-        isScreensharing={isScreensharing}
-        localScreenshareFeed={localScreenshareFeed}
-        screenshareFeeds={screenshareFeeds}
-        simpleGrid={simpleGrid}
-        setShowInspector={setShowInspector}
-        showInspector={showInspector}
-        roomId={roomId}
-      />
-    );
-  } else if (state === GroupCallState.Entering) {
-    return <EnteringRoomView />;
-  } else if (left) {
-    if (isPasswordlessUser) {
-      return <PasswordlessUserCallEndedScreen client={client} />;
-    } else {
-      return <GuestCallEndedScreen />;
-    }
-  } else {
-    return (
-      <RoomSetupView
-        isGuest={isGuest}
-        client={client}
-        hasLocalParticipant={hasLocalParticipant}
-        roomName={groupCall.room.name}
-        state={state}
-        onInitLocalCallFeed={initLocalCallFeed}
-        localCallFeed={localCallFeed}
-        onEnter={enter}
-        microphoneMuted={microphoneMuted}
-        localVideoMuted={localVideoMuted}
-        toggleLocalVideoMuted={toggleLocalVideoMuted}
-        toggleMicrophoneMuted={toggleMicrophoneMuted}
-        setShowInspector={setShowInspector}
-        showInspector={showInspector}
-        roomId={roomId}
-      />
-    );
-  }
-}
-
-export function LoadingRoomView() {
-  return (
-    <FullScreenView>
-      <h1>Loading room...</h1>
-    </FullScreenView>
-  );
-}
-
-export function EnteringRoomView() {
-  return (
-    <FullScreenView>
-      <h1>Entering room...</h1>
-    </FullScreenView>
-  );
-}
-
-function RoomSetupView({
-  client,
-  roomName,
-  state,
-  onInitLocalCallFeed,
-  onEnter,
-  localCallFeed,
-  microphoneMuted,
-  localVideoMuted,
-  toggleLocalVideoMuted,
-  toggleMicrophoneMuted,
-  setShowInspector,
-  showInspector,
-  roomId,
-}) {
-  const { stream } = useCallFeed(localCallFeed);
-  const videoRef = useMediaStream(stream, true);
-
-  useEffect(() => {
-    onInitLocalCallFeed();
-  }, [onInitLocalCallFeed]);
-
-  return (
-    <div className={styles.room}>
-      <Header>
-        <LeftNav>
-          <RoomHeaderInfo roomName={roomName} />
-        </LeftNav>
-        <RightNav>
-          <UserMenu />
-        </RightNav>
-      </Header>
-      <div className={styles.joinRoom}>
-        <div className={styles.joinRoomContent}>
-          <div className={styles.preview}>
-            <video ref={videoRef} muted playsInline disablePictureInPicture />
-            {state === GroupCallState.LocalCallFeedUninitialized && (
-              <p className={styles.webcamPermissions}>
-                Webcam/microphone permissions needed to join the call.
-              </p>
-            )}
-            {state === GroupCallState.InitializingLocalCallFeed && (
-              <p className={styles.webcamPermissions}>
-                Accept webcam/microphone permissions to join the call.
-              </p>
-            )}
-            {state === GroupCallState.LocalCallFeedInitialized && (
-              <>
-                <Button
-                  className={styles.joinCallButton}
-                  disabled={state !== GroupCallState.LocalCallFeedInitialized}
-                  onPress={onEnter}
-                >
-                  Join call now
-                </Button>
-                <div className={styles.previewButtons}>
-                  <MicButton
-                    muted={microphoneMuted}
-                    onPress={toggleMicrophoneMuted}
-                  />
-                  <VideoButton
-                    muted={localVideoMuted}
-                    onPress={toggleLocalVideoMuted}
-                  />
-                  <OverflowMenu
-                    roomId={roomId}
-                    setShowInspector={setShowInspector}
-                    showInspector={showInspector}
-                    client={client}
-                  />
-                </div>
-              </>
-            )}
-          </div>
-          <p>Or</p>
-          <CopyButton
-            value={getRoomUrl(roomId)}
-            className={styles.copyButton}
-            copiedMessage="Call link copied"
-          >
-            Copy call link and join later
-          </CopyButton>
-        </div>
-        <div className={styles.joinRoomFooter}>
-          <Link className={styles.homeLink} to="/">
-            Take me Home
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function InRoomView({
-  client,
-  isGuest,
-  groupCall,
-  roomName,
-  microphoneMuted,
-  localVideoMuted,
-  toggleLocalVideoMuted,
-  toggleMicrophoneMuted,
-  userMediaFeeds,
-  activeSpeaker,
-  onLeave,
-  toggleScreensharing,
-  isScreensharing,
-  screenshareFeeds,
-  simpleGrid,
-  setShowInspector,
-  showInspector,
-  roomId,
-}) {
-  const [layout, setLayout] = useVideoGridLayout();
-
-  const items = useMemo(() => {
-    const participants = [];
-
-    for (const callFeed of userMediaFeeds) {
-      participants.push({
-        id: callFeed.stream.id,
-        usermediaCallFeed: callFeed,
-        isActiveSpeaker:
-          screenshareFeeds.length === 0
-            ? callFeed.userId === activeSpeaker
-            : false,
-      });
-    }
-
-    for (const callFeed of screenshareFeeds) {
-      const participant = participants.find(
-        (p) => p.usermediaCallFeed.userId === callFeed.userId
-      );
-
-      if (participant) {
-        participant.screenshareCallFeed = callFeed;
-      }
-    }
-
-    return participants;
-  }, [userMediaFeeds, activeSpeaker, screenshareFeeds]);
-
-  const onFocusTile = useCallback(
-    (tiles, focusedTile) => {
-      if (layout === "freedom") {
-        return tiles.map((tile) => {
-          if (tile === focusedTile) {
-            return { ...tile, presenter: !tile.presenter };
-          }
-
-          return tile;
-        });
-      } else {
-        setLayout("spotlight");
-
-        return tiles.map((tile) => {
-          if (tile === focusedTile) {
-            return { ...tile, presenter: true };
-          }
-
-          return { ...tile, presenter: false };
-        });
-      }
-    },
-    [layout, setLayout]
-  );
-
-  const renderAvatar = useCallback(
-    (roomMember, width, height) => {
-      const avatarUrl = roomMember.user?.avatarUrl;
-      const size = Math.round(Math.min(width, height) / 2);
-
-      return (
-        <Avatar
-          key={roomMember.userId}
-          style={{
-            width: size,
-            height: size,
-            borderRadius: size,
-            fontSize: Math.round(size / 2),
-          }}
-          src={avatarUrl && getAvatarUrl(client, avatarUrl, 96)}
-          fallback={roomMember.name.slice(0, 1).toUpperCase()}
-          className={styles.avatar}
-        />
-      );
-    },
-    [client]
-  );
-
-  return (
-    <div className={classNames(styles.room, styles.inRoom)}>
-      <Header>
-        <LeftNav>
-          <RoomHeaderInfo roomName={roomName} />
-        </LeftNav>
-        <RightNav>
-          <GridLayoutMenu layout={layout} setLayout={setLayout} />
-          {!isGuest && <UserMenu disableLogout />}
-        </RightNav>
-      </Header>
-      {items.length === 0 ? (
-        <div className={styles.centerMessage}>
-          <p>Waiting for other participants...</p>
-        </div>
-      ) : simpleGrid ? (
-        <SimpleVideoGrid items={items} />
-      ) : (
-        <VideoGrid
-          items={items}
-          layout={layout}
-          getAvatar={renderAvatar}
-          onFocusTile={onFocusTile}
-          disableAnimations={isSafari}
-        />
-      )}
-      <div className={styles.footer}>
-        <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
-        <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
-        {canScreenshare && !isSafari && (
-          <ScreenshareButton
-            enabled={isScreensharing}
-            onPress={toggleScreensharing}
-          />
-        )}
-        <OverflowMenu
-          roomId={roomId}
-          setShowInspector={setShowInspector}
-          showInspector={showInspector}
-          client={client}
-        />
-        <HangupButton onPress={onLeave} />
-      </div>
-      <GroupCallInspector
-        client={client}
-        groupCall={groupCall}
-        show={showInspector}
-      />
-    </div>
-  );
-}
-
-export function GuestCallEndedScreen() {
-  return (
-    <FullScreenView className={styles.callEndedScreen}>
-      <h1>Your call is now ended</h1>
-      <div className={styles.callEndedContent}>
-        <p>Why not finish by creating an account?</p>
-        <p>You'll be able to:</p>
-        <ul>
-          <li>Easily access all your previous call links</li>
-          <li>Set a username and avatar</li>
-        </ul>
-        <LinkButton
-          className={styles.callEndedButton}
-          size="lg"
-          variant="default"
-          to="/register"
-        >
-          Create account
-        </LinkButton>
-      </div>
-      <Link to="/">Not now, return to home screen</Link>
-    </FullScreenView>
-  );
-}
-
-export function PasswordlessUserCallEndedScreen({ client }) {
-  const { displayName } = useProfile(client);
-
-  return (
-    <FullScreenView className={styles.callEndedScreen}>
-      <h1>{displayName}, your call is now ended</h1>
-      <div className={styles.callEndedContent}>
-        <p>Why not finish by setting up a password to keep your account?</p>
-        <p>
-          You'll be able to keep your name and set an avatar for use on future
-          calls
-        </p>
-        <LinkButton
-          className={styles.callEndedButton}
-          size="lg"
-          variant="default"
-          to="/register"
-        >
-          Create account
-        </LinkButton>
-      </div>
-      <Link to="/">Not now, return to home screen</Link>
-    </FullScreenView>
-  );
-}
--- a/src/SequenceDiagramViewerPage.jsx
+++ b/src/SequenceDiagramViewerPage.jsx
@@ -0,0 +1,41 @@
+import React, { useCallback, useState } from "react";
+import { SequenceDiagramViewer } from "./room/GroupCallInspector";
+import { FieldRow, InputField } from "./input/Input";
+import { usePageTitle } from "./usePageTitle";
+
+export function SequenceDiagramViewerPage() {
+  usePageTitle("Inspector");
+
+  const [debugLog, setDebugLog] = useState();
+  const [selectedUserId, setSelectedUserId] = useState();
+  const onChangeDebugLog = useCallback((e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      e.target.files[0].text().then((text) => {
+        setDebugLog(JSON.parse(text));
+      });
+    }
+  }, []);
+
+  return (
+    <div style={{ marginTop: 20 }}>
+      <FieldRow>
+        <InputField
+          type="file"
+          id="debugLog"
+          name="debugLog"
+          label="Debug Log"
+          onChange={onChangeDebugLog}
+        />
+      </FieldRow>
+      {debugLog && (
+        <SequenceDiagramViewer
+          localUserId={debugLog.localUserId}
+          selectedUserId={selectedUserId}
+          onSelectUserId={setSelectedUserId}
+          remoteUserIds={debugLog.remoteUserIds}
+          events={debugLog.eventsByUserId[selectedUserId]}
+        />
+      )}
+    </div>
+  );
+}
--- a/src/Tooltip.jsx
+++ b/src/Tooltip.jsx
@@ -1,33 +1,46 @@
 import React, { forwardRef, useRef } from "react";
 import { useTooltipTriggerState } from "@react-stately/tooltip";
+import { FocusableProvider } from "@react-aria/focus";
 import { useTooltipTrigger, useTooltip } from "@react-aria/tooltip";
-import { mergeProps } from "@react-aria/utils";
+import { mergeProps, useObjectRef } from "@react-aria/utils";
 import styles from "./Tooltip.module.css";
 import classNames from "classnames";
+import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";

-export function Tooltip({ position, state, ...props }) {
-  let { tooltipProps } = useTooltip(props, state);
+export const Tooltip = forwardRef(
+  ({ position, state, className, ...props }, ref) => {
+    let { tooltipProps } = useTooltip(props, state);

-  return (
-    <div
-      className={classNames(styles.tooltip, styles[position || "bottom"])}
-      {...mergeProps(props, tooltipProps)}
-    >
-      {props.children}
-    </div>
-  );
-}
+    return (
+      <div
+        className={classNames(styles.tooltip, className)}
+        {...mergeProps(props, tooltipProps)}
+        ref={ref}
+      >
+        {props.children}
+      </div>
+    );
+  }
+);

 export const TooltipTrigger = forwardRef(({ children, ...rest }, ref) => {
  const tooltipState = useTooltipTriggerState(rest);
-  const fallbackRef = useRef();
-  const triggerRef = ref || fallbackRef;
+  const triggerRef = useObjectRef(ref);
+  const overlayRef = useRef();
  const { triggerProps, tooltipProps } = useTooltipTrigger(
    rest,
    tooltipState,
    triggerRef
  );

+  const { overlayProps } = useOverlayPosition({
+    placement: rest.placement || "top",
+    targetRef: triggerRef,
+    overlayRef,
+    isOpen: tooltipState.isOpen,
+    offset: 5,
+  });
+
  if (
    !Array.isArray(children) ||
    children.length > 2 ||
@@ -41,13 +54,20 @@ export const TooltipTrigger = forwardRef(({ children, ...rest }, ref) => {
  const [tooltipTrigger, tooltip] = children;

  return (
-    <div className={styles.tooltipContainer}>
-      <tooltipTrigger.type
-        {...mergeProps(triggerProps, tooltipTrigger.props, rest)}
-        ref={triggerRef}
-      />
-      {tooltipState.isOpen && tooltip({ state: tooltipState, ...tooltipProps })}
-    </div>
+    <FocusableProvider ref={triggerRef} {...triggerProps}>
+      {<tooltipTrigger.type {...mergeProps(tooltipTrigger.props, rest)} />}
+      {tooltipState.isOpen && (
+        <OverlayContainer>
+          <Tooltip
+            state={tooltipState}
+            {...mergeProps(tooltipProps, overlayProps)}
+            ref={overlayRef}
+          >
+            {tooltip()}
+          </Tooltip>
+        </OverlayContainer>
+      )}
+    </FocusableProvider>
  );
 });

--- a/src/Tooltip.module.css
+++ b/src/Tooltip.module.css
@@ -1,6 +1,5 @@
 .tooltip {
  background-color: var(--bgColor2);
-  position: absolute;
  flex-direction: row;
  justify-content: center;
  align-items: center;
@@ -9,25 +8,5 @@
  border-radius: 8px;
  max-width: 135px;
  width: max-content;
-  z-index: 1;
-  left: 50%;
-  transform: translateX(-50%);
  text-align: center;
 }
-
-.tooltip.top {
-  bottom: calc(100% + 6px);
-}
-
-.tooltip.bottom {
-  top: calc(100% + 6px);
-}
-
-.tooltip.bottomLeft {
-  top: calc(100% + 6px);
-  left: -25%;
-}
-
-.tooltipContainer {
-  position: relative;
-}
--- a/src/UserMenu.jsx
+++ b/src/UserMenu.jsx
@@ -1,61 +1,38 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useMemo } from "react";
+import { Item } from "@react-stately/collections";
 import { Button, LinkButton } from "./button";
-import { PopoverMenuTrigger } from "./PopoverMenu";
+import { PopoverMenuTrigger } from "./popover/PopoverMenu";
+import { Menu } from "./Menu";
+import { Tooltip, TooltipTrigger } from "./Tooltip";
+import { Avatar } from "./Avatar";
 import { ReactComponent as UserIcon } from "./icons/User.svg";
 import { ReactComponent as LoginIcon } from "./icons/Login.svg";
 import { ReactComponent as LogoutIcon } from "./icons/Logout.svg";
 import styles from "./UserMenu.module.css";
-import { Item } from "@react-stately/collections";
-import { Menu } from "./Menu";
-import { useHistory, useLocation } from "react-router-dom";
-import { useClient, useProfile } from "./ConferenceCallManagerHooks";
-import { useModalTriggerState } from "./Modal";
-import { ProfileModal } from "./ProfileModal";
-import { Tooltip, TooltipTrigger } from "./Tooltip";
-import { Avatar } from "./Avatar";
+import { useLocation } from "react-router-dom";
+import { Body } from "./typography/Typography";

-export function UserMenu({ disableLogout }) {
+export function UserMenu({
+  preventNavigation,
+  isAuthenticated,
+  isPasswordlessUser,
+  displayName,
+  avatarUrl,
+  onAction,
+}) {
  const location = useLocation();
-  const history = useHistory();
-  const {
-    isAuthenticated,
-    isGuest,
-    isPasswordlessUser,
-    logout,
-    userName,
-    client,
-  } = useClient();
-  const { displayName, avatarUrl } = useProfile(client);
-  const { modalState, modalProps } = useModalTriggerState();
-
-  const onAction = useCallback(
-    (value) => {
-      switch (value) {
-        case "user":
-          modalState.open();
-          break;
-        case "logout":
-          logout();
-          break;
-        case "login":
-          history.push("/login", { state: { from: location } });
-          break;
-      }
-    },
-    [history, location, logout, modalState]
-  );

  const items = useMemo(() => {
    const arr = [];

-    if (isAuthenticated && !isGuest) {
+    if (isAuthenticated) {
      arr.push({
        key: "user",
        icon: UserIcon,
-        label: displayName || userName,
+        label: displayName,
      });

-      if (isPasswordlessUser) {
+      if (isPasswordlessUser && !preventNavigation) {
        arr.push({
          key: "login",
          label: "Sign In",
@@ -63,7 +40,7 @@ export function UserMenu({ disableLogout }) {
        });
      }

-      if (!isPasswordlessUser && !disableLogout) {
+      if (!isPasswordlessUser && !preventNavigation) {
        arr.push({
          key: "logout",
          label: "Sign Out",
@@ -73,9 +50,9 @@ export function UserMenu({ disableLogout }) {
    }

    return arr;
-  }, [isAuthenticated, isGuest, userName, displayName]);
+  }, [isAuthenticated, isPasswordlessUser, displayName, preventNavigation]);

-  if (isGuest || !isAuthenticated) {
+  if (!isAuthenticated) {
    return (
      <LinkButton to={{ pathname: "/login", state: { from: location } }}>
        Log in
@@ -84,46 +61,32 @@ export function UserMenu({ disableLogout }) {
  }

  return (
-    <>
-      <PopoverMenuTrigger placement="bottom right">
-        <TooltipTrigger>
-          <Button variant="icon" className={styles.userButton}>
-            {isAuthenticated && !isGuest && !isPasswordlessUser ? (
-              <Avatar
-                size="sm"
-                src={avatarUrl}
-                fallback={(displayName || userName).slice(0, 1).toUpperCase()}
-              />
-            ) : (
-              <UserIcon />
-            )}
-          </Button>
-          {(props) => (
-            <Tooltip position="bottomLeft" {...props}>
-              Profile
-            </Tooltip>
+    <PopoverMenuTrigger placement="bottom right">
+      <TooltipTrigger placement="bottom left">
+        <Button variant="icon" className={styles.userButton}>
+          {isAuthenticated && (!isPasswordlessUser || avatarUrl) ? (
+            <Avatar
+              size="sm"
+              className={styles.avatar}
+              src={avatarUrl}
+              fallback={displayName.slice(0, 1).toUpperCase()}
+            />
+          ) : (
+            <UserIcon />
          )}
-        </TooltipTrigger>
-        {(props) => (
-          <Menu {...props} label="User menu" onAction={onAction}>
-            {items.map(({ key, icon: Icon, label }) => (
-              <Item key={key} textValue={label}>
-                <Icon />
-                <span>{label}</span>
-              </Item>
-            ))}
-          </Menu>
-        )}
-      </PopoverMenuTrigger>
-      {modalState.isOpen && (
-        <ProfileModal
-          client={client}
-          isAuthenticated={isAuthenticated}
-          isGuest={isGuest}
-          isPasswordlessUser={isPasswordlessUser}
-          {...modalProps}
-        />
+        </Button>
+        {() => "Profile"}
+      </TooltipTrigger>
+      {(props) => (
+        <Menu {...props} label="User menu" onAction={onAction}>
+          {items.map(({ key, icon: Icon, label }) => (
+            <Item key={key} textValue={label} className={styles.menuItem}>
+              <Icon width={24} height={24} className={styles.menuIcon} />
+              <Body overflowEllipsis>{label}</Body>
+            </Item>
+          ))}
+        </Menu>
      )}
-    </>
+    </PopoverMenuTrigger>
  );
 }
--- a/src/UserMenu.module.css
+++ b/src/UserMenu.module.css
@@ -1,3 +1,22 @@
+.menuIcon {
+  width: 24px;
+  height: 24px;
+}
+
 .userButton svg * {
  fill: var(--textColor1);
 }
+
+.avatar {
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+}
+
+@media (min-width: 800px) {
+  .avatar {
+    width: 32px;
+    height: 32px;
+    font-size: 15px;
+  }
+}
--- a/src/UserMenuContainer.jsx
+++ b/src/UserMenuContainer.jsx
@@ -0,0 +1,56 @@
+import React, { useCallback } from "react";
+import { useHistory, useLocation } from "react-router-dom";
+import { useClient } from "./ClientContext";
+import { useProfile } from "./profile/useProfile";
+import { useModalTriggerState } from "./Modal";
+import { ProfileModal } from "./profile/ProfileModal";
+import { UserMenu } from "./UserMenu";
+
+export function UserMenuContainer({ preventNavigation }) {
+  const location = useLocation();
+  const history = useHistory();
+  const { isAuthenticated, isPasswordlessUser, logout, userName, client } =
+    useClient();
+  const { displayName, avatarUrl } = useProfile(client);
+  const { modalState, modalProps } = useModalTriggerState();
+
+  const onAction = useCallback(
+    (value) => {
+      switch (value) {
+        case "user":
+          modalState.open();
+          break;
+        case "logout":
+          logout();
+          break;
+        case "login":
+          history.push("/login", { state: { from: location } });
+          break;
+      }
+    },
+    [history, location, logout, modalState]
+  );
+
+  return (
+    <>
+      <UserMenu
+        preventNavigation={preventNavigation}
+        isAuthenticated={isAuthenticated}
+        isPasswordlessUser={isPasswordlessUser}
+        avatarUrl={avatarUrl}
+        onAction={onAction}
+        displayName={
+          displayName || (userName ? userName.replace("@", "") : undefined)
+        }
+      />
+      {modalState.isOpen && (
+        <ProfileModal
+          client={client}
+          isAuthenticated={isAuthenticated}
+          isPasswordlessUser={isPasswordlessUser}
+          {...modalProps}
+        />
+      )}
+    </>
+  );
+}
--- a/src/auth/LoginPage.jsx
+++ b/src/auth/LoginPage.jsx
@@ -16,18 +16,18 @@ limitations under the License.

 import React, { useCallback, useRef, useState, useMemo } from "react";
 import { useHistory, useLocation, Link } from "react-router-dom";
-import { ReactComponent as Logo } from "./icons/LogoLarge.svg";
-import { FieldRow, InputField, ErrorMessage } from "./Input";
-import { Button } from "./button";
-import {
-  useClient,
-  defaultHomeserver,
-  defaultHomeserverHost,
-} from "./ConferenceCallManagerHooks";
+import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
+import { Button } from "../button";
+import { defaultHomeserver, defaultHomeserverHost } from "../matrix-utils";
 import styles from "./LoginPage.module.css";
+import { useInteractiveLogin } from "./useInteractiveLogin";
+import { usePageTitle } from "../usePageTitle";

 export function LoginPage() {
-  const { login } = useClient();
+  usePageTitle("Login");
+
+  const [_, login] = useInteractiveLogin();
  const [homeserver, setHomeServer] = useState(defaultHomeserver);
  const usernameRef = useRef();
  const passwordRef = useRef();
--- a/src/auth/LoginPage.module.css
+++ b/src/auth/LoginPage.module.css
@@ -1,6 +1,7 @@
 .logo {
  max-width: 300px;
  margin: 80px 0;
+  height: auto;
 }

 .container {
--- a/src/auth/RegisterPage.jsx
+++ b/src/auth/RegisterPage.jsx
@@ -15,23 +15,23 @@ limitations under the License.
 */

 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useHistory, useLocation, Link } from "react-router-dom";
-import { FieldRow, InputField, ErrorMessage } from "./Input";
-import { Button } from "./button";
-import { useClient, defaultHomeserverHost } from "./ConferenceCallManagerHooks";
+import { useHistory, useLocation } from "react-router-dom";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
+import { Button } from "../button";
+import { useClient } from "../ClientContext";
+import { defaultHomeserverHost } from "../matrix-utils";
+import { useInteractiveRegistration } from "./useInteractiveRegistration";
 import styles from "./LoginPage.module.css";
-import { ReactComponent as Logo } from "./icons/LogoLarge.svg";
-import { LoadingView } from "./FullScreenView";
+import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
+import { LoadingView } from "../FullScreenView";
+import { useRecaptcha } from "./useRecaptcha";
+import { Caption, Link } from "../typography/Typography";
+import { usePageTitle } from "../usePageTitle";

 export function RegisterPage() {
-  const {
-    loading,
-    client,
-    register,
-    changePassword,
-    isAuthenticated,
-    isPasswordlessUser,
-  } = useClient();
+  usePageTitle("Register");
+
+  const { loading, isAuthenticated, isPasswordlessUser, client } = useClient();
  const confirmPasswordRef = useRef();
  const history = useHistory();
  const location = useLocation();
@@ -39,6 +39,9 @@ export function RegisterPage() {
  const [error, setError] = useState();
  const [password, setPassword] = useState("");
  const [passwordConfirmation, setPasswordConfirmation] = useState("");
+  const [{ privacyPolicyUrl, recaptchaKey }, register] =
+    useInteractiveRegistration();
+  const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);

  const onSubmitRegisterForm = useCallback(
    (e) => {
@@ -52,37 +55,52 @@ export function RegisterPage() {
        return;
      }

-      setRegistering(true);
+      async function submit() {
+        setRegistering(true);

-      if (isPasswordlessUser) {
-        changePassword(password)
-          .then(() => {
-            if (location.state && location.state.from) {
-              history.push(location.state.from);
-            } else {
-              history.push("/");
+        let roomIds;
+
+        if (client && isPasswordlessUser) {
+          const groupCalls = client.groupCallEventHandler.groupCalls.values();
+          roomIds = Array.from(groupCalls).map(
+            (groupCall) => groupCall.room.roomId
+          );
+        }
+
+        const recaptchaResponse = await execute();
+        const newClient = await register(
+          userName,
+          password,
+          userName,
+          recaptchaResponse
+        );
+
+        if (roomIds) {
+          for (const roomId of roomIds) {
+            try {
+              await newClient.joinRoom(roomId);
+            } catch (error) {
+              console.warn(`Couldn't join room ${roomId}`, error);
            }
-          })
-          .catch((error) => {
-            setError(error);
-            setRegistering(false);
-          });
-      } else {
-        register(userName, password)
-          .then(() => {
-            if (location.state && location.state.from) {
-              history.push(location.state.from);
-            } else {
-              history.push("/");
-            }
-          })
-          .catch((error) => {
-            setError(error);
-            setRegistering(false);
-          });
+          }
+        }
      }
+
+      submit()
+        .then(() => {
+          if (location.state && location.state.from) {
+            history.push(location.state.from);
+          } else {
+            history.push("/");
+          }
+        })
+        .catch((error) => {
+          setError(error);
+          setRegistering(false);
+          reset();
+        });
    },
-    [register, changePassword, location, history, isPasswordlessUser]
+    [register, location, history, isPasswordlessUser, reset, execute, client]
  );

  useEffect(() => {
@@ -98,10 +116,10 @@ export function RegisterPage() {
  }, [password, passwordConfirmation]);

  useEffect(() => {
-    if (!loading && isAuthenticated && !isPasswordlessUser) {
+    if (!loading && isAuthenticated && !isPasswordlessUser && !registering) {
      history.push("/");
    }
-  }, [history, isAuthenticated, isPasswordlessUser]);
+  }, [history, isAuthenticated, isPasswordlessUser, registering]);

  if (loading) {
    return <LoadingView />;
@@ -125,12 +143,6 @@ export function RegisterPage() {
                  autoCapitalize="none"
                  prefix="@"
                  suffix={`:${defaultHomeserverHost}`}
-                  value={
-                    isAuthenticated && isPasswordlessUser
-                      ? client.getUserIdLocalpart()
-                      : undefined
-                  }
-                  disabled={isAuthenticated && isPasswordlessUser}
                />
              </FieldRow>
              <FieldRow>
@@ -156,6 +168,20 @@ export function RegisterPage() {
                  ref={confirmPasswordRef}
                />
              </FieldRow>
+              <Caption>
+                This site is protected by ReCAPTCHA and the Google{" "}
+                <Link href="https://www.google.com/policies/privacy/">
+                  Privacy Policy
+                </Link>{" "}
+                and{" "}
+                <Link href="https://policies.google.com/terms">
+                  Terms of Service
+                </Link>{" "}
+                apply.
+                <br />
+                By clicking "Register", you agree to our{" "}
+                <Link href={privacyPolicyUrl}>Terms and conditions</Link>
+              </Caption>
              {error && (
                <FieldRow>
                  <ErrorMessage>{error.message}</ErrorMessage>
@@ -166,6 +192,7 @@ export function RegisterPage() {
                  {registering ? "Registering..." : "Register"}
                </Button>
              </FieldRow>
+              <div id={recaptchaId} />
            </form>
          </div>
          <div className={styles.authLinks}>
--- a/src/auth/generateRandomName.js
+++ b/src/auth/generateRandomName.js
@@ -0,0 +1,137 @@
+import {
+  uniqueNamesGenerator,
+  adjectives,
+  colors,
+  animals,
+} from "unique-names-generator";
+
+const elements = [
+  "hydrogen",
+  "helium",
+  "lithium",
+  "beryllium",
+  "boron",
+  "carbon",
+  "nitrogen",
+  "oxygen",
+  "fluorine",
+  "neon",
+  "sodium",
+  "magnesium",
+  "aluminum",
+  "silicon",
+  "phosphorus",
+  "sulfur",
+  "chlorine",
+  "argon",
+  "potassium",
+  "calcium",
+  "scandium",
+  "titanium",
+  "vanadium",
+  "chromium",
+  "manganese",
+  "iron",
+  "cobalt",
+  "nickel",
+  "copper",
+  "zinc",
+  "gallium",
+  "germanium",
+  "arsenic",
+  "selenium",
+  "bromine",
+  "krypton",
+  "rubidium",
+  "strontium",
+  "yttrium",
+  "zirconium",
+  "niobium",
+  "molybdenum",
+  "technetium",
+  "ruthenium",
+  "rhodium",
+  "palladium",
+  "silver",
+  "cadmium",
+  "indium",
+  "tin",
+  "antimony",
+  "tellurium",
+  "iodine",
+  "xenon",
+  "cesium",
+  "barium",
+  "lanthanum",
+  "cerium",
+  "praseodymium",
+  "neodymium",
+  "promethium",
+  "samarium",
+  "europium",
+  "gadolinium",
+  "terbium",
+  "dysprosium",
+  "holmium",
+  "erbium",
+  "thulium",
+  "ytterbium",
+  "lutetium",
+  "hafnium",
+  "tantalum",
+  "wolfram",
+  "rhenium",
+  "osmium",
+  "iridium",
+  "platinum",
+  "gold",
+  "mercury",
+  "thallium",
+  "lead",
+  "bismuth",
+  "polonium",
+  "astatine",
+  "radon",
+  "francium",
+  "radium",
+  "actinium",
+  "thorium",
+  "protactinium",
+  "uranium",
+  "neptunium",
+  "plutonium",
+  "americium",
+  "curium",
+  "berkelium",
+  "californium",
+  "einsteinium",
+  "fermium",
+  "mendelevium",
+  "nobelium",
+  "lawrencium",
+  "rutherfordium",
+  "dubnium",
+  "seaborgium",
+  "bohrium",
+  "hassium",
+  "meitnerium",
+  "darmstadtium",
+  "roentgenium",
+  "copernicium",
+  "nihonium",
+  "flerovium",
+  "moscovium",
+  "livermorium",
+  "tennessine",
+  "oganesson",
+];
+
+export function generateRandomName(config) {
+  return uniqueNamesGenerator({
+    dictionaries: [colors, adjectives, animals, elements],
+    style: "lowerCase",
+    length: 3,
+    separator: "-",
+    ...config,
+  });
+}
--- a/src/auth/useInteractiveLogin.js
+++ b/src/auth/useInteractiveLogin.js
@@ -0,0 +1,45 @@
+import matrix, { InteractiveAuth } from "matrix-js-sdk/src/browser-index";
+import { useState, useCallback } from "react";
+import { useClient } from "../ClientContext";
+import { initClient, defaultHomeserver } from "../matrix-utils";
+
+export function useInteractiveLogin() {
+  const { setClient } = useClient();
+  const [state, setState] = useState({ loading: false });
+
+  const auth = useCallback(async (homeserver, username, password) => {
+    const authClient = matrix.createClient(homeserver);
+
+    const interactiveAuth = new InteractiveAuth({
+      matrixClient: authClient,
+      busyChanged(loading) {
+        setState((prev) => ({ ...prev, loading }));
+      },
+      async doRequest(_auth, _background) {
+        return authClient.login("m.login.password", {
+          identifier: {
+            type: "m.id.user",
+            user: username,
+          },
+          password,
+        });
+      },
+    });
+
+    const { user_id, access_token, device_id } =
+      await interactiveAuth.attemptAuth();
+
+    const client = await initClient({
+      baseUrl: defaultHomeserver,
+      accessToken: access_token,
+      userId: user_id,
+      deviceId: device_id,
+    });
+
+    setClient(client, { user_id, access_token, device_id });
+
+    return client;
+  }, []);
+
+  return [state, auth];
+}
--- a/src/auth/useInteractiveRegistration.js
+++ b/src/auth/useInteractiveRegistration.js
@@ -0,0 +1,91 @@
+import matrix, { InteractiveAuth } from "matrix-js-sdk/src/browser-index";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useClient } from "../ClientContext";
+import { initClient, defaultHomeserver } from "../matrix-utils";
+
+export function useInteractiveRegistration() {
+  const { setClient } = useClient();
+  const [state, setState] = useState({ privacyPolicyUrl: "#", loading: false });
+
+  const authClientRef = useRef();
+
+  useEffect(() => {
+    authClientRef.current = matrix.createClient(defaultHomeserver);
+
+    authClientRef.current.registerRequest({}).catch((error) => {
+      const privacyPolicyUrl =
+        error.data?.params["m.login.terms"]?.policies?.privacy_policy?.en?.url;
+
+      const recaptchaKey = error.data?.params["m.login.recaptcha"]?.public_key;
+
+      if (privacyPolicyUrl || recaptchaKey) {
+        setState((prev) => ({ ...prev, privacyPolicyUrl, recaptchaKey }));
+      }
+    });
+  }, []);
+
+  const register = useCallback(
+    async (
+      username,
+      password,
+      displayName,
+      recaptchaResponse,
+      passwordlessUser
+    ) => {
+      const interactiveAuth = new InteractiveAuth({
+        matrixClient: authClientRef.current,
+        busyChanged(loading) {
+          setState((prev) => ({ ...prev, loading }));
+        },
+        async doRequest(auth, _background) {
+          return authClientRef.current.registerRequest({
+            username,
+            password,
+            auth: auth || undefined,
+          });
+        },
+        stateUpdated(nextStage, status) {
+          if (status.error) {
+            throw new Error(error);
+          }
+
+          if (nextStage === "m.login.terms") {
+            interactiveAuth.submitAuthDict({
+              type: "m.login.terms",
+            });
+          } else if (nextStage === "m.login.recaptcha") {
+            interactiveAuth.submitAuthDict({
+              type: "m.login.recaptcha",
+              response: recaptchaResponse,
+            });
+          }
+        },
+      });
+
+      const { user_id, access_token, device_id } =
+        await interactiveAuth.attemptAuth();
+
+      const client = await initClient({
+        baseUrl: defaultHomeserver,
+        accessToken: access_token,
+        userId: user_id,
+        deviceId: device_id,
+      });
+
+      await client.setDisplayName(displayName);
+
+      const session = { user_id, device_id, access_token, passwordlessUser };
+
+      if (passwordlessUser) {
+        session.tempPassword = password;
+      }
+
+      setClient(client, session);
+
+      return client;
+    },
+    []
+  );
+
+  return [state, register];
+}
--- a/src/auth/useRecaptcha.js
+++ b/src/auth/useRecaptcha.js
@@ -0,0 +1,107 @@
+import { randomString } from "matrix-js-sdk/src/randomstring";
+import { useEffect, useCallback, useRef, useState } from "react";
+
+const RECAPTCHA_SCRIPT_URL =
+  "https://www.recaptcha.net/recaptcha/api.js?onload=mxOnRecaptchaLoaded&render=explicit";
+
+export function useRecaptcha(sitekey) {
+  const [recaptchaId] = useState(() => randomString(16));
+  const promiseRef = useRef();
+
+  useEffect(() => {
+    if (!sitekey) {
+      return;
+    }
+
+    const onRecaptchaLoaded = () => {
+      if (!document.getElementById(recaptchaId)) {
+        return;
+      }
+
+      window.grecaptcha.render(recaptchaId, {
+        sitekey,
+        size: "invisible",
+        callback: (response) => {
+          if (promiseRef.current) {
+            promiseRef.current.resolve(response);
+          }
+        },
+        "error-callback": (error) => {
+          if (promiseRef.current) {
+            promiseRef.current.reject(error);
+          }
+        },
+      });
+    };
+
+    if (
+      typeof window.grecaptcha !== "undefined" &&
+      typeof window.grecaptcha.render === "function"
+    ) {
+      onRecaptchaLoaded();
+    } else {
+      window.mxOnRecaptchaLoaded = onRecaptchaLoaded;
+
+      if (!document.querySelector(`script[src="${RECAPTCHA_SCRIPT_URL}"]`)) {
+        const scriptTag = document.createElement("script");
+        scriptTag.src = RECAPTCHA_SCRIPT_URL;
+        scriptTag.async = true;
+        document.body.appendChild(scriptTag);
+      }
+    }
+  }, [recaptchaId, sitekey]);
+
+  const execute = useCallback(() => {
+    if (!sitekey) {
+      return Promise.resolve(null);
+    }
+
+    if (!window.grecaptcha) {
+      console.log("Recaptcha not loaded");
+      return Promise.reject(new Error("Recaptcha not loaded"));
+    }
+
+    return new Promise((resolve, reject) => {
+      const observer = new MutationObserver((mutationsList) => {
+        for (const item of mutationsList) {
+          if (item.target?.style?.visibility !== "visible") {
+            reject(new Error("Recaptcha dismissed"));
+            observer.disconnect();
+            return;
+          }
+        }
+      });
+
+      promiseRef.current = {
+        resolve: (value) => {
+          resolve(value);
+          observer.disconnect();
+        },
+        reject: (error) => {
+          reject(error);
+          observer.disconnect();
+        },
+      };
+
+      window.grecaptcha.execute();
+
+      const iframe = document.querySelector(
+        'iframe[src*="recaptcha/api2/bframe"]'
+      );
+
+      if (iframe?.parentNode?.parentNode) {
+        observer.observe(iframe?.parentNode?.parentNode, {
+          attributes: true,
+        });
+      }
+    });
+  }, [recaptchaId, sitekey]);
+
+  const reset = useCallback(() => {
+    if (window.grecaptcha) {
+      window.grecaptcha.reset();
+    }
+  }, [recaptchaId]);
+
+  return { execute, reset, recaptchaId };
+}
--- a/src/button/Button.jsx
+++ b/src/button/Button.jsx
@@ -9,15 +9,17 @@ import { ReactComponent as HangupIcon } from "../icons/Hangup.svg";
 import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg";
 import { useButton } from "@react-aria/button";
 import { mergeProps, useObjectRef } from "@react-aria/utils";
-import { Tooltip, TooltipTrigger } from "../Tooltip";
+import { TooltipTrigger } from "../Tooltip";

 export const variantToClassName = {
  default: [styles.button],
  toolbar: [styles.toolbarButton],
+  toolbarSecondary: [styles.toolbarButtonSecondary],
  icon: [styles.iconButton],
  secondary: [styles.secondary],
  copy: [styles.copyButton],
  iconCopy: [styles.iconCopyButton],
+  secondaryCopy: [styles.copyButton],
 };

 export const sizeToClassName = {
@@ -34,12 +36,17 @@ export const Button = forwardRef(
      iconStyle,
      className,
      children,
+      onPress,
+      onPressStart,
      ...rest
    },
    ref
  ) => {
    const buttonRef = useObjectRef(ref);
-    const { buttonProps } = useButton(rest, buttonRef);
+    const { buttonProps } = useButton(
+      { onPress, onPressStart, ...rest },
+      buttonRef
+    );

    // TODO: react-aria's useButton hook prevents form submission via keyboard
    // Remove the hack below after this is merged https://github.com/adobe/react-spectrum/pull/904
@@ -60,9 +67,10 @@ export const Button = forwardRef(
          {
            [styles.on]: on,
            [styles.off]: off,
+            [styles.secondaryCopy]: variant === "secondaryCopy",
          }
        )}
-        {...filteredButtonProps}
+        {...mergeProps(rest, filteredButtonProps)}
        ref={buttonRef}
      >
        {children}
@@ -71,25 +79,13 @@ export const Button = forwardRef(
  }
 );

-export function ButtonTooltip({ className, children }) {
-  return (
-    <div className={classNames(styles.buttonTooltip, className)}>
-      {children}
-    </div>
-  );
-}
-
 export function MicButton({ muted, ...rest }) {
  return (
    <TooltipTrigger>
      <Button variant="toolbar" {...rest} off={muted}>
        {muted ? <MuteMicIcon /> : <MicIcon />}
      </Button>
-      {(props) => (
-        <Tooltip position="top" {...props}>
-          {muted ? "Unmute microphone" : "Mute microphone"}
-        </Tooltip>
-      )}
+      {() => (muted ? "Unmute microphone" : "Mute microphone")}
    </TooltipTrigger>
  );
 }
@@ -100,11 +96,7 @@ export function VideoButton({ muted, ...rest }) {
      <Button variant="toolbar" {...rest} off={muted}>
        {muted ? <DisableVideoIcon /> : <VideoIcon />}
      </Button>
-      {(props) => (
-        <Tooltip position="top" {...props}>
-          {muted ? "Turn on camera" : "Turn off camera"}
-        </Tooltip>
-      )}
+      {() => (muted ? "Turn on camera" : "Turn off camera")}
    </TooltipTrigger>
  );
 }
@@ -112,14 +104,10 @@ export function VideoButton({ muted, ...rest }) {
 export function ScreenshareButton({ enabled, className, ...rest }) {
  return (
    <TooltipTrigger>
-      <Button variant="toolbar" {...rest} on={enabled}>
+      <Button variant="toolbarSecondary" {...rest} on={enabled}>
        <ScreenshareIcon />
      </Button>
-      {(props) => (
-        <Tooltip position="top" {...props}>
-          {enabled ? "Stop sharing screen" : "Share screen"}
-        </Tooltip>
-      )}
+      {() => (enabled ? "Stop sharing screen" : "Share screen")}
    </TooltipTrigger>
  );
 }
@@ -134,11 +122,7 @@ export function HangupButton({ className, ...rest }) {
      >
        <HangupIcon />
      </Button>
-      {(props) => (
-        <Tooltip position="top" {...props}>
-          Leave
-        </Tooltip>
-      )}
+      {() => "Leave"}
    </TooltipTrigger>
  );
 }
--- a/src/button/Button.module.css
+++ b/src/button/Button.module.css
@@ -16,6 +16,7 @@ limitations under the License.

 .button,
 .toolbarButton,
+.toolbarButtonSecondary,
 .iconButton,
 .iconCopyButton,
 .secondary,
@@ -46,14 +47,26 @@ limitations under the License.
  background-color: var(--primaryColor);
 }

-.toolbarButton {
+.button:focus,
+.toolbarButton:focus,
+.toolbarButtonSecondary:focus,
+.iconButton:focus,
+.iconCopyButton:focus,
+.secondary:focus,
+.copyButton:focus {
+  outline: auto;
+}
+
+.toolbarButton,
+.toolbarButtonSecondary {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: var(--bgColor2);
 }

-.toolbarButton:hover {
+.toolbarButton:hover,
+.toolbarButtonSecondary:hover {
  background-color: var(--bgColor4);
 }

@@ -62,6 +75,10 @@ limitations under the License.
  background-color: #ffffff;
 }

+.toolbarButtonSecondary.on {
+  background-color: #0dbd8b;
+}
+
 .iconButton:not(.stroke) svg * {
  fill: #ffffff;
 }
@@ -91,33 +108,8 @@ limitations under the License.
  fill: #21262c;
 }

-.buttonTooltip {
-  display: none;
-  background-color: var(--bgColor2);
-  position: absolute;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 10px;
-  color: var(--textColor1);
-  border-radius: 8px;
-  max-width: 135px;
-  width: max-content;
-  z-index: 1;
-}
-
-.buttonTooltip.bottomRight {
-  right: 0;
-}
-
-.toolbarButton:hover .buttonTooltip {
-  display: flex;
-  bottom: calc(100% + 6px);
-}
-
-.iconButton:hover .buttonTooltip {
-  display: flex;
-  top: calc(100% + 6px);
+.toolbarButtonSecondary.on svg * {
+  fill: #ffffff;
 }

 .secondary,
@@ -127,6 +119,11 @@ limitations under the License.
  background-color: transparent;
 }

+.copyButton.secondaryCopy {
+  color: var(--textColor1);
+  border-color: var(--textColor1);
+}
+
 .copyButton {
  width: 100%;
  height: 40px;
@@ -160,6 +157,10 @@ limitations under the License.
  stroke: white;
 }

+.copyButton.secondaryCopy:not(.on) svg * {
+  fill: var(--textColor1);
+}
+
 .iconCopyButton svg * {
  fill: var(--textColor3);
 }
--- a/src/button/CopyButton.jsx
+++ b/src/button/CopyButton.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 import useClipboard from "react-use-clipboard";
 import { ReactComponent as CheckIcon } from "../icons/Check.svg";
 import { ReactComponent as CopyIcon } from "../icons/Copy.svg";
@@ -17,7 +17,7 @@ export function CopyButton({
  return (
    <Button
      {...rest}
-      variant={variant === "icon" ? "iconCopy" : "copy"}
+      variant={variant === "icon" ? "iconCopy" : variant || "copy"}
      on={isCopied}
      className={className}
      onPress={setCopied}
--- a/src/form/Form.jsx
+++ b/src/form/Form.jsx
@@ -0,0 +1,11 @@
+import classNames from "classnames";
+import React, { forwardRef } from "react";
+import styles from "./Form.module.css";
+
+export const Form = forwardRef(({ children, className, ...rest }, ref) => {
+  return (
+    <form {...rest} className={classNames(styles.form, className)} ref={ref}>
+      {children}
+    </form>
+  );
+});
--- a/src/form/Form.module.css
+++ b/src/form/Form.module.css
@@ -0,0 +1,4 @@
+.form {
+  display: flex;
+  flex-direction: column;
+}
--- a/src/home/CallList.jsx
+++ b/src/home/CallList.jsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { CopyButton } from "../button";
+import { Facepile } from "../Facepile";
+import { Avatar } from "../Avatar";
+import styles from "./CallList.module.css";
+import { getRoomUrl } from "../matrix-utils";
+import { Body, Caption } from "../typography/Typography";
+
+export function CallList({ rooms, client, disableFacepile }) {
+  return (
+    <>
+      <div className={styles.callList}>
+        {rooms.map(({ roomId, roomName, avatarUrl, participants }) => (
+          <CallTile
+            key={roomId}
+            client={client}
+            name={roomName}
+            avatarUrl={avatarUrl}
+            roomId={roomId}
+            participants={participants}
+            disableFacepile={disableFacepile}
+          />
+        ))}
+        {rooms.length > 3 && (
+          <>
+            <div className={styles.callTileSpacer} />
+            <div className={styles.callTileSpacer} />
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+function CallTile({
+  name,
+  avatarUrl,
+  roomId,
+  participants,
+  client,
+  disableFacepile,
+}) {
+  return (
+    <div className={styles.callTile}>
+      <Link to={`/room/${roomId}`} className={styles.callTileLink}>
+        <Avatar
+          size="lg"
+          bgKey={name}
+          src={avatarUrl}
+          fallback={name.slice(0, 1).toUpperCase()}
+          className={styles.avatar}
+        />
+        <div className={styles.callInfo}>
+          <Body overflowEllipsis fontWeight="semiBold">
+            {name}
+          </Body>
+          <Caption overflowEllipsis>{getRoomUrl(roomId)}</Caption>
+          {participants && !disableFacepile && (
+            <Facepile
+              className={styles.facePile}
+              client={client}
+              participants={participants}
+            />
+          )}
+        </div>
+        <div className={styles.copyButtonSpacer} />
+      </Link>
+      <CopyButton
+        className={styles.copyButton}
+        variant="icon"
+        value={getRoomUrl(roomId)}
+      />
+    </div>
+  );
+}
--- a/src/home/CallList.module.css
+++ b/src/home/CallList.module.css
@@ -1,6 +1,14 @@
+.callTileSpacer,
 .callTile {
-  min-width: 240px;
-  height: 94px;
+  width: 329px;
+}
+
+.callTileSpacer {
+  height: 0;
+}
+
+.callTile {
+  height: 95px;
  padding: 12px;
  background-color: var(--bgColor2);
  border-radius: 8px;
@@ -14,6 +22,8 @@
  display: flex;
  text-decoration: none;
  width: 100%;
+  height: 100%;
+  align-items: center;
 }

 .avatar,
@@ -31,28 +41,11 @@
 }

 .callInfo > * {
-  margin-top: 0;
-  margin-bottom: 8px;
-}
-
-.callInfo > :last-child {
  margin-bottom: 0;
 }

-.callInfo h5 {
-  font-size: 15px;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.callInfo p {
-  font-weight: 400;
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.facePile {
+  margin-top: 8px;
 }

 .copyButtonSpacer,
@@ -68,7 +61,12 @@
 }

 .callList {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  display: flex;
+  flex-wrap: wrap;
+  max-width: calc((329px + 24px) * 3);
+  width: calc(100% - 48px);
  gap: 24px;
+  padding: 0 24px;
+  justify-content: center;
+  margin-bottom: 24px;
 }
--- a/src/home/HomePage.jsx
+++ b/src/home/HomePage.jsx
@@ -0,0 +1,41 @@
+/*
+Copyright 2021 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 React from "react";
+import { useClient } from "../ClientContext";
+import { ErrorView, LoadingView } from "../FullScreenView";
+import { UnauthenticatedView } from "./UnauthenticatedView";
+import { RegisteredView } from "./RegisteredView";
+import { usePageTitle } from "../usePageTitle";
+
+export function HomePage() {
+  usePageTitle("Home");
+
+  const { isAuthenticated, isPasswordlessUser, loading, error, client } =
+    useClient();
+
+  if (loading) {
+    return <LoadingView />;
+  } else if (error) {
+    return <ErrorView error={error} />;
+  } else {
+    return isAuthenticated ? (
+      <RegisteredView isPasswordlessUser={isPasswordlessUser} client={client} />
+    ) : (
+      <UnauthenticatedView />
+    );
+  }
+}
--- a/src/home/JoinExistingCallModal.jsx
+++ b/src/home/JoinExistingCallModal.jsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { Modal, ModalContent } from "./Modal";
-import { Button } from "./button";
-import { FieldRow } from "./Input";
+import { Modal, ModalContent } from "../Modal";
+import { Button } from "../button";
+import { FieldRow } from "../input/Input";
 import styles from "./JoinExistingCallModal.module.css";

 export function JoinExistingCallModal({ onJoin, ...rest }) {
--- a/src/home/JoinExistingCallModal.module.css
+++ b/src/home/JoinExistingCallModal.module.css
--- a/src/home/RegisteredView.jsx
+++ b/src/home/RegisteredView.jsx
@@ -0,0 +1,120 @@
+import React, { useState, useCallback } from "react";
+import { createRoom, roomAliasFromRoomName } from "../matrix-utils";
+import { useGroupCallRooms } from "./useGroupCallRooms";
+import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
+import commonStyles from "./common.module.css";
+import styles from "./RegisteredView.module.css";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
+import { Button } from "../button";
+import { CallList } from "./CallList";
+import { UserMenuContainer } from "../UserMenuContainer";
+import { useModalTriggerState } from "../Modal";
+import { JoinExistingCallModal } from "./JoinExistingCallModal";
+import { useHistory } from "react-router-dom";
+import { Headline, Title } from "../typography/Typography";
+import { Form } from "../form/Form";
+
+export function RegisteredView({ client }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState();
+  const history = useHistory();
+  const onSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const data = new FormData(e.target);
+      const roomName = data.get("callName");
+
+      async function submit() {
+        setError(undefined);
+        setLoading(true);
+
+        const roomIdOrAlias = await createRoom(client, roomName);
+
+        if (roomIdOrAlias) {
+          history.push(`/room/${roomIdOrAlias}`);
+        }
+      }
+
+      submit().catch((error) => {
+        if (error.errcode === "M_ROOM_IN_USE") {
+          setExistingRoomId(roomAliasFromRoomName(roomName));
+          setLoading(false);
+          setError(undefined);
+          modalState.open();
+        } else {
+          console.error(error);
+          setLoading(false);
+          setError(error);
+          reset();
+        }
+      });
+    },
+    [client]
+  );
+
+  const recentRooms = useGroupCallRooms(client);
+
+  const { modalState, modalProps } = useModalTriggerState();
+  const [existingRoomId, setExistingRoomId] = useState();
+  const onJoinExistingRoom = useCallback(() => {
+    history.push(`/${existingRoomId}`);
+  }, [history, existingRoomId]);
+
+  return (
+    <>
+      <Header>
+        <LeftNav>
+          <HeaderLogo />
+        </LeftNav>
+        <RightNav>
+          <UserMenuContainer />
+        </RightNav>
+      </Header>
+      <div className={commonStyles.container}>
+        <main className={commonStyles.main}>
+          <HeaderLogo className={commonStyles.logo} />
+          <Headline className={commonStyles.headline}>
+            Enter a call name
+          </Headline>
+          <Form className={styles.form} onSubmit={onSubmit}>
+            <FieldRow className={styles.fieldRow}>
+              <InputField
+                id="callName"
+                name="callName"
+                label="Call name"
+                placeholder="Call name"
+                type="text"
+                required
+                autoComplete="off"
+              />
+              <Button
+                type="submit"
+                size="lg"
+                className={styles.button}
+                disabled={loading}
+              >
+                {loading ? "Loading..." : "Go"}
+              </Button>
+            </FieldRow>
+            {error && (
+              <FieldRow className={styles.fieldRow}>
+                <ErrorMessage>{error.message}</ErrorMessage>
+              </FieldRow>
+            )}
+          </Form>
+          {recentRooms.length > 0 && (
+            <>
+              <Title className={styles.recentCallsTitle}>
+                Your recent Calls
+              </Title>
+              <CallList rooms={recentRooms} client={client} disableFacepile />
+            </>
+          )}
+        </main>
+      </div>
+      {modalState.isOpen && (
+        <JoinExistingCallModal onJoin={onJoinExistingRoom} {...modalProps} />
+      )}
+    </>
+  );
+}
--- a/src/home/RegisteredView.module.css
+++ b/src/home/RegisteredView.module.css
@@ -0,0 +1,19 @@
+.form {
+  padding: 0 24px;
+  justify-content: center;
+  max-width: 409px;
+  width: calc(100% - 48px);
+  margin-bottom: 72px;
+}
+
+.fieldRow {
+  margin-bottom: 0;
+}
+
+.button {
+  padding: 0 24px;
+}
+
+.recentCallsTitle {
+  margin-bottom: 32px;
+}
--- a/src/home/UnauthenticatedView.jsx
+++ b/src/home/UnauthenticatedView.jsx
@@ -0,0 +1,148 @@
+import React, { useCallback, useState } from "react";
+import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
+import { UserMenuContainer } from "../UserMenuContainer";
+import { useHistory } from "react-router-dom";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
+import { Button } from "../button";
+import { randomString } from "matrix-js-sdk/src/randomstring";
+import { createRoom, roomAliasFromRoomName } from "../matrix-utils";
+import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
+import { useModalTriggerState } from "../Modal";
+import { JoinExistingCallModal } from "./JoinExistingCallModal";
+import { useRecaptcha } from "../auth/useRecaptcha";
+import { Body, Caption, Link, Headline } from "../typography/Typography";
+import { Form } from "../form/Form";
+import styles from "./UnauthenticatedView.module.css";
+import commonStyles from "./common.module.css";
+import { generateRandomName } from "../auth/generateRandomName";
+
+export function UnauthenticatedView() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState();
+  const [{ privacyPolicyUrl, recaptchaKey }, register] =
+    useInteractiveRegistration();
+  const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
+  const onSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const data = new FormData(e.target);
+      const roomName = data.get("callName");
+      const displayName = data.get("displayName");
+
+      async function submit() {
+        setError(undefined);
+        setLoading(true);
+        const recaptchaResponse = await execute();
+        const userName = generateRandomName();
+        const client = await register(
+          userName,
+          randomString(16),
+          displayName,
+          recaptchaResponse,
+          true
+        );
+        const roomIdOrAlias = await createRoom(client, roomName);
+
+        if (roomIdOrAlias) {
+          history.push(`/room/${roomIdOrAlias}`);
+        }
+      }
+
+      submit().catch((error) => {
+        if (error.errcode === "M_ROOM_IN_USE") {
+          setExistingRoomId(roomAliasFromRoomName(roomName));
+          setLoading(false);
+          setError(undefined);
+          modalState.open();
+        } else {
+          console.error(error);
+          setLoading(false);
+          setError(error);
+          reset();
+        }
+      });
+    },
+    [register, reset, execute]
+  );
+
+  const { modalState, modalProps } = useModalTriggerState();
+  const [existingRoomId, setExistingRoomId] = useState();
+  const history = useHistory();
+  const onJoinExistingRoom = useCallback(() => {
+    history.push(`/${existingRoomId}`);
+  }, [history, existingRoomId]);
+
+  return (
+    <>
+      <Header>
+        <LeftNav>
+          <HeaderLogo />
+        </LeftNav>
+        <RightNav hideMobile>
+          <UserMenuContainer />
+        </RightNav>
+      </Header>
+      <div className={commonStyles.container}>
+        <main className={commonStyles.main}>
+          <HeaderLogo className={commonStyles.logo} />
+          <Headline className={commonStyles.headline}>
+            Enter a call name
+          </Headline>
+          <Form className={styles.form} onSubmit={onSubmit}>
+            <FieldRow>
+              <InputField
+                id="callName"
+                name="callName"
+                label="Call name"
+                placeholder="Call name"
+                type="text"
+                required
+                autoComplete="off"
+              />
+            </FieldRow>
+            <FieldRow>
+              <InputField
+                id="displayName"
+                name="displayName"
+                label="Display Name"
+                placeholder="Display Name"
+                type="text"
+                required
+                autoComplete="off"
+              />
+            </FieldRow>
+            <Caption>
+              By clicking "Go", you agree to our{" "}
+              <Link href={privacyPolicyUrl}>Terms and conditions</Link>
+            </Caption>
+            {error && (
+              <FieldRow>
+                <ErrorMessage>{error.message}</ErrorMessage>
+              </FieldRow>
+            )}
+            <Button type="submit" size="lg" disabled={loading}>
+              {loading ? "Loading..." : "Go"}
+            </Button>
+            <div id={recaptchaId} />
+          </Form>
+        </main>
+        <footer className={styles.footer}>
+          <Body className={styles.mobileLoginLink}>
+            <Link color="primary" to="/login">
+              Login to your account
+            </Link>
+          </Body>
+          <Body>
+            Not registered yet?{" "}
+            <Link color="primary" to="/register">
+              Create an account
+            </Link>
+          </Body>
+        </footer>
+      </div>
+      {modalState.isOpen && (
+        <JoinExistingCallModal onJoin={onJoinExistingRoom} {...modalProps} />
+      )}
+    </>
+  );
+}
--- a/src/home/UnauthenticatedView.module.css
+++ b/src/home/UnauthenticatedView.module.css
@@ -0,0 +1,31 @@
+.footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 28px;
+}
+
+.footer p {
+  margin-bottom: 0;
+}
+
+.footer .mobileLoginLink {
+  display: flex;
+  margin-bottom: 24px;
+}
+
+.form {
+  padding: 0 24px;
+  justify-content: center;
+  max-width: 360px;
+}
+
+.form > * + * {
+  margin-bottom: 24px;
+}
+
+@media (min-width: 800px) {
+  .mobileLoginLink {
+    display: none;
+  }
+}
--- a/src/home/common.module.css
+++ b/src/home/common.module.css
@@ -0,0 +1,33 @@
+.container {
+  display: flex;
+  min-height: calc(100% - 64px);
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  display: flex;
+  margin-bottom: 54px;
+}
+
+.headline {
+  margin-bottom: 40px;
+}
+
+@media (min-width: 800px) {
+  .logo {
+    display: none;
+  }
+
+  .container {
+    min-height: calc(100% - 76px);
+  }
+}
--- a/src/home/useGroupCallRooms.js
+++ b/src/home/useGroupCallRooms.js
@@ -0,0 +1,87 @@
+import { useState, useEffect } from "react";
+
+const tsCache = {};
+
+function getLastTs(client, r) {
+  if (tsCache[r.roomId]) {
+    return tsCache[r.roomId];
+  }
+
+  if (!r || !r.timeline) {
+    const ts = Number.MAX_SAFE_INTEGER;
+    tsCache[r.roomId] = ts;
+    return ts;
+  }
+
+  const myUserId = client.getUserId();
+
+  if (r.getMyMembership() !== "join") {
+    const membershipEvent = r.currentState.getStateEvents(
+      "m.room.member",
+      myUserId
+    );
+
+    if (membershipEvent && !Array.isArray(membershipEvent)) {
+      const ts = membershipEvent.getTs();
+      tsCache[r.roomId] = ts;
+      return ts;
+    }
+  }
+
+  for (let i = r.timeline.length - 1; i >= 0; --i) {
+    const ev = r.timeline[i];
+    const ts = ev.getTs();
+
+    if (ts) {
+      tsCache[r.roomId] = ts;
+      return ts;
+    }
+  }
+
+  const ts = Number.MAX_SAFE_INTEGER;
+  tsCache[r.roomId] = ts;
+  return ts;
+}
+
+function sortRooms(client, rooms) {
+  return rooms.sort((a, b) => {
+    return getLastTs(client, b) - getLastTs(client, a);
+  });
+}
+
+export function useGroupCallRooms(client) {
+  const [rooms, setRooms] = useState([]);
+
+  useEffect(() => {
+    function updateRooms() {
+      const groupCalls = client.groupCallEventHandler.groupCalls.values();
+      const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room);
+      const sortedRooms = sortRooms(client, rooms);
+      const items = sortedRooms.map((room) => {
+        const groupCall = client.getGroupCallForRoom(room.roomId);
+
+        return {
+          roomId: room.getCanonicalAlias() || room.roomId,
+          roomName: room.name,
+          avatarUrl: null,
+          room,
+          groupCall,
+          participants: [...groupCall.participants],
+        };
+      });
+      setRooms(items);
+    }
+
+    updateRooms();
+
+    client.on("GroupCall.incoming", updateRooms);
+    client.on("GroupCall.participants", updateRooms);
+
+    return () => {
+      client.removeListener("GroupCall.incoming", updateRooms);
+      client.removeListener("GroupCall.participants", updateRooms);
+    };
+  }, []);
+
+  return rooms;
+}
--- a/src/icons/Copy.svg
+++ b/src/icons/Copy.svg
@@ -1,3 +1,3 @@
-<svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.03125 3C4.3744 3 3.03125 4.34315 3.03125 6V13C3.03125 14.6569 4.3744 16 6.03125 16H7.07407V18C7.07407 19.6569 8.41722 21 10.0741 21H14.9683C16.6251 21 17.9683 19.6569 17.9683 18V11C17.9683 9.34315 16.6251 8 14.9683 8H13.9255V6C13.9255 4.34315 12.5823 3 10.9255 3H6.03125ZM11.9255 8V6C11.9255 5.44772 11.4777 5 10.9255 5H6.03125C5.47897 5 5.03125 5.44772 5.03125 6V13C5.03125 13.5523 5.47897 14 6.03125 14H7.07407V11C7.07407 9.34315 8.41722 8 10.0741 8H11.9255ZM9.07407 11C9.07407 10.4477 9.52179 10 10.0741 10H14.9683C15.5206 10 15.9683 10.4477 15.9683 11V18C15.9683 18.5523 15.5206 19 14.9683 19H10.0741C9.52179 19 9.07407 18.5523 9.07407 18V11Z" fill="#0DBD8B"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2C2.89543 2 2 2.89543 2 4V8.66667C2 9.77124 2.89543 10.6667 4 10.6667H5.33333V12C5.33333 13.1046 6.22877 14 7.33333 14H12C13.1046 14 14 13.1046 14 12V7.33333C14 6.22876 13.1046 5.33333 12 5.33333H10.6667V4C10.6667 2.89543 9.77123 2 8.66667 2H4ZM9.33333 5.33333V4C9.33333 3.63181 9.03486 3.33333 8.66667 3.33333H4C3.63181 3.33333 3.33333 3.63181 3.33333 4V8.66667C3.33333 9.03486 3.63181 9.33333 4 9.33333H5.33333V7.33333C5.33333 6.22877 6.22876 5.33333 7.33333 5.33333H9.33333ZM6.66667 7.33333C6.66667 6.96514 6.96514 6.66667 7.33333 6.66667H12C12.3682 6.66667 12.6667 6.96514 12.6667 7.33333V12C12.6667 12.3682 12.3682 12.6667 12 12.6667H7.33333C6.96514 12.6667 6.66667 12.3682 6.66667 12V7.33333Z" fill="#8E99A4"/>
 </svg>
--- a/src/icons/Feedback.svg
+++ b/src/icons/Feedback.svg
@@ -0,0 +1,3 @@
+<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="M12.283 21.4401C17.6495 21.4401 21.9999 17.0881 21.9999 11.7196C21.9999 6.3511 17.6495 1.99908 12.283 1.99908C6.91643 1.99908 2.566 6.3511 2.566 11.7196C2.566 13.2234 2.90739 14.6476 3.51687 15.9186L2.04468 20.7049C1.80806 21.4742 2.5308 22.1936 3.29898 21.9535L8.04564 20.4696C9.32625 21.0914 10.7639 21.4401 12.283 21.4401Z" fill="#ffffff"/>
+</svg>
--- a/src/icons/Spotlight.svg
+++ b/src/icons/Spotlight.svg
@@ -1,6 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="18" y="10" width="5" height="5" rx="1" fill="white"/>
-<rect x="18" y="16" width="5" height="5" rx="1" fill="white"/>
-<rect x="18" y="4" width="5" height="5" rx="1" fill="white"/>
-<rect x="1" y="4" width="16" height="17" rx="1" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 17.8689V2.51551C4 2.06669 4.53728 1.83452 4.86986 2.13591C8.18767 5.14263 10.9111 7.48209 13.102 9.36399L13.102 9.36403C18.3295 13.8544 20.5243 15.7398 20.5243 17.8689C20.5243 19.4181 19.6538 20.0153 18.1044 20.79C16.5549 21.5648 14.4534 22 12.2621 22C10.0709 22 7.96938 21.5648 6.41992 20.79C4.87047 20.0153 4 18.9646 4 17.8689ZM12.2621 20.9673C16.2548 20.9673 19.4915 19.5801 19.4915 17.869C19.4915 16.1578 16.2548 14.7707 12.2621 14.7707C8.26947 14.7707 5.03277 16.1578 5.03277 17.869C5.03277 19.5801 8.26947 20.9673 12.2621 20.9673ZM16.2618 8.67876C16.1718 8.64549 16.1718 8.51831 16.2618 8.48504L17.84 7.90103C17.8683 7.89057 17.8906 7.86828 17.901 7.84001L18.4851 6.26174C18.5183 6.17182 18.6455 6.17182 18.6788 6.26174L19.2628 7.84001C19.2733 7.86828 19.2955 7.89057 19.3238 7.90103L20.9021 8.48504C20.992 8.51831 20.992 8.64549 20.9021 8.67876L19.3238 9.26277C19.2955 9.27323 19.2733 9.29552 19.2628 9.32379L18.6788 10.9021C18.6455 10.992 18.5183 10.992 18.4851 10.9021L17.901 9.32379C17.8906 9.29552 17.8683 9.27323 17.84 9.26277L16.2618 8.67876ZM13.2618 5.45232C13.1718 5.48559 13.1718 5.61276 13.2618 5.64604L14.0862 5.95111C14.1145 5.96157 14.1368 5.98386 14.1472 6.01213L14.4523 6.83657C14.4856 6.92649 14.6127 6.92649 14.646 6.83657L14.9511 6.01213C14.9615 5.98386 14.9838 5.96157 15.0121 5.95111L15.8365 5.64603C15.9265 5.61276 15.9265 5.48559 15.8365 5.45232L15.0121 5.14725C14.9838 5.13679 14.9615 5.1145 14.9511 5.08623L14.646 4.26178C14.6127 4.17187 14.4856 4.17187 14.4523 4.26178L14.1472 5.08623C14.1368 5.1145 14.1145 5.13679 14.0862 5.14725L13.2618 5.45232Z" fill="white"/>
 </svg>
--- a/src/index.css
+++ b/src/index.css
@@ -20,6 +20,8 @@ limitations under the License.
   Therefore we define a unicode-range to load which excludes the glyphs
   (to avoid having to maintain a fork of Inter). */

+@import "normalize.css/normalize.css";
+
 :root {
  --inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f,
    U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF;
@@ -35,6 +37,7 @@ limitations under the License.
  --textColor4: #a9b2bc;
  --inputBorderColor: #394049;
  --inputBorderColorFocused: #0086e6;
+  --linkColor: #0086e6;
 }

@font-face {
@@ -139,6 +142,44 @@ body,
  flex-direction: column;
 }

+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+a {
+  margin-top: 0;
+}
+
+/* Headline Semi Bold */
+h1 {
+  font-weight: 600;
+  font-size: 32px;
+  line-height: 39px;
+}
+
+/* Title */
+h2 {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 29px;
+}
+
+/* Subtitle */
+h3 {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 22px;
+}
+
+/* Body */
+p {
+  font-size: 15px;
+  line-height: 24px;
+}
+
 a {
  color: var(--primaryColor);
  text-decoration: none;
--- a/src/input/Input.jsx
+++ b/src/input/Input.jsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./Input.module.css";
-import { ReactComponent as CheckIcon } from "./icons/Check.svg";
+import { ReactComponent as CheckIcon } from "../icons/Check.svg";

 export function FieldRow({ children, rightAlign, className, ...rest }) {
  return (
--- a/src/input/Input.module.css
+++ b/src/input/Input.module.css
@@ -1,6 +1,7 @@
 .fieldRow {
  display: flex;
  margin-bottom: 32px;
+  align-items: center;
 }

 .field {
--- a/src/input/SelectInput.jsx
+++ b/src/input/SelectInput.jsx
@@ -2,11 +2,11 @@ import React, { useRef } from "react";
 import { HiddenSelect, useSelect } from "@react-aria/select";
 import { useButton } from "@react-aria/button";
 import { useSelectState } from "@react-stately/select";
-import { Popover } from "./Popover";
-import { ListBox } from "./ListBox";
+import { Popover } from "../popover/Popover";
+import { ListBox } from "../ListBox";
 import styles from "./SelectInput.module.css";
 import classNames from "classnames";
-import { ReactComponent as ArrowDownIcon } from "./icons/ArrowDown.svg";
+import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";

 export function SelectInput(props) {
  const state = useSelectState(props);
--- a/src/input/SelectInput.module.css
+++ b/src/input/SelectInput.module.css
@@ -27,6 +27,10 @@
  width: 100%;
 }

+.selectTrigger:focus {
+  outline: auto;
+}
+
 .selectedItem {
  white-space: nowrap;
  overflow: hidden;
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -22,6 +22,12 @@ import App from "./App";
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
 import { ErrorView } from "./FullScreenView";
+import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
+import { InspectorContextProvider } from "./room/GroupCallInspector";
+
+rageshake.init();
+
+console.info(`matrix-video-chat ${import.meta.env.VITE_APP_VERSION || "dev"}`);

 if (import.meta.env.VITE_CUSTOM_THEME) {
  const style = document.documentElement.style;
@@ -59,7 +65,9 @@ Sentry.init({
 ReactDOM.render(
  <React.StrictMode>
    <Sentry.ErrorBoundary fallback={ErrorView}>
-      <App history={history} />
+      <InspectorContextProvider>
+        <App history={history} />
+      </InspectorContextProvider>
    </Sentry.ErrorBoundary>
  </React.StrictMode>,
  document.getElementById("root")
--- a/src/matrix-utils.js
+++ b/src/matrix-utils.js
@@ -0,0 +1,136 @@
+import matrix from "matrix-js-sdk/src/browser-index";
+import {
+  GroupCallIntent,
+  GroupCallType,
+} from "matrix-js-sdk/src/browser-index";
+
+export const defaultHomeserver =
+  import.meta.env.VITE_DEFAULT_HOMESERVER ||
+  `${window.location.protocol}//${window.location.host}`;
+
+export const defaultHomeserverHost = new URL(defaultHomeserver).host;
+
+function waitForSync(client) {
+  return new Promise((resolve, reject) => {
+    const onSync = (state, _old, data) => {
+      if (state === "PREPARED") {
+        resolve();
+        client.removeListener("sync", onSync);
+      } else if (state === "ERROR") {
+        reject(data?.error);
+        client.removeListener("sync", onSync);
+      }
+    };
+    client.on("sync", onSync);
+  });
+}
+
+export async function initClient(clientOptions) {
+  const client = matrix.createClient({
+    ...clientOptions,
+    useAuthorizationHeader: true,
+  });
+
+  await client.startClient({
+    // dirty hack to reduce chance of gappy syncs
+    // should be fixed by spotting gaps and backpaginating
+    initialSyncLimit: 50,
+  });
+
+  await waitForSync(client);
+
+  return client;
+}
+
+export function roomAliasFromRoomName(roomName) {
+  return roomName
+    .trim()
+    .replace(/\s/g, "-")
+    .replace(/[^\w-]/g, "")
+    .toLowerCase();
+}
+
+export function roomNameFromRoomId(roomId) {
+  return roomId
+    .match(/([^:]+):.*$/)[1]
+    .substring(1)
+    .split("-")
+    .map((part) =>
+      part.length > 0 ? part.charAt(0).toUpperCase() + part.slice(1) : part
+    )
+    .join(" ");
+}
+
+export function isLocalRoomId(roomId) {
+  if (!roomId) {
+    return false;
+  }
+
+  const parts = roomId.match(/[^:]+:(.*)$/);
+
+  if (parts.length < 2) {
+    return false;
+  }
+
+  return parts[1] === defaultHomeserverHost;
+}
+
+export async function createRoom(client, name) {
+  const { room_id, room_alias } = await client.createRoom({
+    visibility: "private",
+    preset: "public_chat",
+    name,
+    room_alias_name: roomAliasFromRoomName(name),
+    power_level_content_override: {
+      invite: 100,
+      kick: 100,
+      ban: 100,
+      redact: 50,
+      state_default: 0,
+      events_default: 0,
+      users_default: 0,
+      events: {
+        "m.room.power_levels": 100,
+        "m.room.history_visibility": 100,
+        "m.room.tombstone": 100,
+        "m.room.encryption": 100,
+        "m.room.name": 50,
+        "m.room.message": 0,
+        "m.room.encrypted": 50,
+        "m.sticker": 50,
+        "org.matrix.msc3401.call.member": 0,
+      },
+      users: {
+        [client.getUserId()]: 100,
+      },
+    },
+  });
+
+  await client.createGroupCall(
+    room_id,
+    GroupCallType.Video,
+    GroupCallIntent.Prompt
+  );
+
+  return room_alias || room_id;
+}
+
+export function getRoomUrl(roomId) {
+  if (roomId.startsWith("#")) {
+    const [localPart, host] = roomId.replace("#", "").split(":");
+
+    if (host !== defaultHomeserverHost) {
+      return `${window.location.protocol}//${window.location.host}/room/${roomId}`;
+    } else {
+      return `${window.location.protocol}//${window.location.host}/${localPart}`;
+    }
+  } else {
+    return `${window.location.protocol}//${window.location.host}/room/${roomId}`;
+  }
+}
+
+export function getAvatarUrl(client, mxcUrl, avatarSize = 96) {
+  const width = Math.floor(avatarSize * window.devicePixelRatio);
+  const height = Math.floor(avatarSize * window.devicePixelRatio);
+  return mxcUrl && client.mxcUrlToHttp(mxcUrl, width, height, "crop");
+}
--- a/src/popover/Popover.jsx
+++ b/src/popover/Popover.jsx
@@ -3,11 +3,11 @@ import { DismissButton, useOverlay } from "@react-aria/overlays";
 import { FocusScope } from "@react-aria/focus";
 import classNames from "classnames";
 import styles from "./Popover.module.css";
+import { useObjectRef } from "@react-aria/utils";

 export const Popover = forwardRef(
  ({ isOpen = true, onClose, className, children, ...rest }, ref) => {
-    const fallbackRef = useRef();
-    const popoverRef = ref || fallbackRef;
+    const popoverRef = useObjectRef(ref);

    const { overlayProps } = useOverlay(
      {
--- a/src/popover/Popover.module.css
+++ b/src/popover/Popover.module.css
--- a/src/popover/PopoverMenu.jsx
+++ b/src/popover/PopoverMenu.jsx
@@ -0,0 +1,68 @@
+import React, { forwardRef, useRef } from "react";
+import styles from "./PopoverMenu.module.css";
+import { useMenuTriggerState } from "@react-stately/menu";
+import { useMenuTrigger } from "@react-aria/menu";
+import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
+import { mergeProps, useObjectRef } from "@react-aria/utils";
+import classNames from "classnames";
+import { Popover } from "./Popover";
+
+export const PopoverMenuTrigger = forwardRef(
+  ({ children, placement, className, disableOnState, ...rest }, ref) => {
+    const popoverMenuState = useMenuTriggerState(rest);
+    const buttonRef = useObjectRef(ref);
+    const { menuTriggerProps, menuProps } = useMenuTrigger(
+      {},
+      popoverMenuState,
+      buttonRef
+    );
+
+    const popoverRef = useRef();
+
+    const { overlayProps } = useOverlayPosition({
+      targetRef: buttonRef,
+      overlayRef: popoverRef,
+      placement: placement || "top",
+      offset: 5,
+      isOpen: popoverMenuState.isOpen,
+    });
+
+    if (
+      !Array.isArray(children) ||
+      children.length > 2 ||
+      typeof children[1] !== "function"
+    ) {
+      throw new Error(
+        "PopoverMenu must have two props. The first being a button and the second being a render prop."
+      );
+    }
+
+    const [popoverTrigger, popoverMenu] = children;
+
+    return (
+      <div className={classNames(styles.popoverMenuTrigger, className)}>
+        <popoverTrigger.type
+          {...mergeProps(popoverTrigger.props, menuTriggerProps)}
+          on={!disableOnState && popoverMenuState.isOpen}
+          ref={buttonRef}
+        />
+        {popoverMenuState.isOpen && (
+          <OverlayContainer>
+            <Popover
+              {...overlayProps}
+              isOpen={popoverMenuState.isOpen}
+              onClose={popoverMenuState.close}
+              ref={popoverRef}
+            >
+              {popoverMenu({
+                ...menuProps,
+                autoFocus: popoverMenuState.focusStrategy,
+                onClose: popoverMenuState.close,
+              })}
+            </Popover>
+          </OverlayContainer>
+        )}
+      </div>
+    );
+  }
+);
--- a/src/popover/PopoverMenu.module.css
+++ b/src/popover/PopoverMenu.module.css
--- a/src/profile/ProfileModal.jsx
+++ b/src/profile/ProfileModal.jsx
@@ -1,14 +1,13 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Button } from "./button";
-import { useProfile } from "./ConferenceCallManagerHooks";
-import { FieldRow, InputField, ErrorMessage } from "./Input";
-import { Modal, ModalContent } from "./Modal";
+import { Button } from "../button";
+import { useProfile } from "./useProfile";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
+import { Modal, ModalContent } from "../Modal";

 export function ProfileModal({
  client,
  isAuthenticated,
  isPasswordlessUser,
-  isGuest,
  ...rest
 }) {
  const { onClose } = rest;
@@ -37,7 +36,7 @@ export function ProfileModal({

      saveProfile({
        displayName,
-        avatar,
+        avatar: avatar && avatar.size > 0 ? avatar : undefined,
      });
    },
    [saveProfile]
@@ -53,6 +52,16 @@ export function ProfileModal({
    <Modal title="Profile" isDismissable {...rest}>
      <ModalContent>
        <form onSubmit={onSubmit}>
+          <FieldRow>
+            <InputField
+              id="userId"
+              name="userId"
+              label="User Id"
+              type="text"
+              disabled
+              value={client.getUserId()}
+            />
+          </FieldRow>
          <FieldRow>
            <InputField
              id="displayName"
@@ -66,7 +75,7 @@ export function ProfileModal({
              onChange={onChangeDisplayName}
            />
          </FieldRow>
-          {isAuthenticated && !isGuest && !isPasswordlessUser && (
+          {isAuthenticated && (
            <FieldRow>
              <InputField
                type="file"
--- a/src/profile/ProfileModal.module.css
+++ b/src/profile/ProfileModal.module.css
--- a/src/profile/useProfile.js
+++ b/src/profile/useProfile.js
@@ -0,0 +1,91 @@
+import { useState, useCallback, useEffect } from "react";
+import { getAvatarUrl } from "../matrix-utils";
+
+export function useProfile(client) {
+  const [{ loading, displayName, avatarUrl, error, success }, setState] =
+    useState(() => {
+      const user = client?.getUser(client.getUserId());
+
+      return {
+        success: false,
+        loading: false,
+        displayName: user?.displayName,
+        avatarUrl: user && client && getAvatarUrl(client, user.avatarUrl),
+        error: null,
+      };
+    });
+
+  useEffect(() => {
+    const onChangeUser = (_event, { displayName, avatarUrl }) => {
+      setState({
+        success: false,
+        loading: false,
+        displayName,
+        avatarUrl: getAvatarUrl(client, avatarUrl),
+        error: null,
+      });
+    };
+
+    let user;
+
+    if (client) {
+      const userId = client.getUserId();
+      user = client.getUser(userId);
+      user.on("User.displayName", onChangeUser);
+      user.on("User.avatarUrl", onChangeUser);
+    }
+
+    return () => {
+      if (user) {
+        user.removeListener("User.displayName", onChangeUser);
+        user.removeListener("User.avatarUrl", onChangeUser);
+      }
+    };
+  }, [client]);
+
+  const saveProfile = useCallback(
+    async ({ displayName, avatar }) => {
+      if (client) {
+        setState((prev) => ({
+          ...prev,
+          loading: true,
+          error: null,
+          success: false,
+        }));
+
+        try {
+          await client.setDisplayName(displayName);
+
+          let mxcAvatarUrl;
+
+          if (avatar) {
+            mxcAvatarUrl = await client.uploadContent(avatar);
+            await client.setAvatarUrl(mxcAvatarUrl);
+          }
+
+          setState((prev) => ({
+            ...prev,
+            displayName,
+            avatarUrl: mxcAvatarUrl
+              ? getAvatarUrl(client, mxcAvatarUrl)
+              : prev.avatarUrl,
+            loading: false,
+            success: true,
+          }));
+        } catch (error) {
+          setState((prev) => ({
+            ...prev,
+            loading: false,
+            error,
+            success: false,
+          }));
+        }
+      } else {
+        console.error("Client not initialized before calling saveProfile");
+      }
+    },
+    [client]
+  );
+
+  return { loading, error, displayName, avatarUrl, saveProfile, success };
+}
--- a/src/room/CallEndedView.jsx
+++ b/src/room/CallEndedView.jsx
@@ -0,0 +1,50 @@
+import React from "react";
+import styles from "./CallEndedView.module.css";
+import { LinkButton } from "../button";
+import { useProfile } from "../profile/useProfile";
+import { Subtitle, Body, Link, Headline } from "../typography/Typography";
+import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
+
+export function CallEndedView({ client }) {
+  const { displayName } = useProfile(client);
+
+  return (
+    <>
+      <Header>
+        <LeftNav>
+          <HeaderLogo />
+        </LeftNav>
+        <RightNav />
+      </Header>
+      <div className={styles.container}>
+        <main className={styles.main}>
+          <Headline className={styles.headline}>
+            {displayName}, your call is now ended
+          </Headline>
+          <div className={styles.callEndedContent}>
+            <Subtitle>
+              Why not finish by setting up a password to keep your account?
+            </Subtitle>
+            <Subtitle>
+              You'll be able to keep your name and set an avatar for use on
+              future calls
+            </Subtitle>
+            <LinkButton
+              className={styles.callEndedButton}
+              size="lg"
+              variant="default"
+              to="/register"
+            >
+              Create account
+            </LinkButton>
+          </div>
+        </main>
+        <Body className={styles.footer}>
+          <Link color="primary" to="/">
+            Not now, return to home screen
+          </Link>
+        </Body>
+      </div>
+    </>
+  );
+}
--- a/src/room/CallEndedView.module.css
+++ b/src/room/CallEndedView.module.css
@@ -0,0 +1,76 @@
+/*
+Copyright 2021 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.
+*/
+
+.headline {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.callEndedContent {
+  text-align: center;
+  max-width: 360px;
+}
+
+.callEndedContent h3 {
+  margin-bottom: 32px;
+}
+
+.callEndedButton {
+  width: 100%;
+  margin-top: 54px;
+}
+
+.container {
+  display: flex;
+  min-height: calc(100% - 64px);
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  margin-bottom: 54px;
+}
+
+.headline {
+  margin-bottom: 40px;
+}
+
+.footer {
+  margin-bottom: 44px;
+}
+
+@media (min-width: 800px) {
+  .logo {
+    display: none;
+  }
+
+  .container {
+    min-height: calc(100% - 76px);
+  }
+
+  .main {
+    justify-content: center;
+  }
+}
--- a/src/room/FeedbackModal.jsx
+++ b/src/room/FeedbackModal.jsx
@@ -0,0 +1,76 @@
+import React, { useCallback, useEffect } from "react";
+import { Modal, ModalContent } from "../Modal";
+import { Button } from "../button";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
+import { useSubmitRageshake, useRageshakeRequest } from "../settings/rageshake";
+import { Body } from "../typography/Typography";
+import { randomString } from "matrix-js-sdk/src/randomstring";
+
+export function FeedbackModal({ inCall, roomId, ...rest }) {
+  const { submitRageshake, sending, sent, error } = useSubmitRageshake();
+  const sendRageshakeRequest = useRageshakeRequest();
+
+  const onSubmitFeedback = useCallback(
+    (e) => {
+      e.preventDefault();
+      const data = new FormData(e.target);
+      const description = data.get("description");
+      const sendLogs = data.get("sendLogs");
+      const rageshakeRequestId = randomString(16);
+
+      submitRageshake({
+        description,
+        sendLogs,
+        rageshakeRequestId,
+      });
+
+      if (inCall && sendLogs) {
+        sendRageshakeRequest(roomId, rageshakeRequestId);
+      }
+    },
+    [inCall, submitRageshake, roomId, sendRageshakeRequest]
+  );
+
+  useEffect(() => {
+    if (sent) {
+      rest.onClose();
+    }
+  }, [sent, rest.onClose]);
+
+  return (
+    <Modal title="Submit Feedback" isDismissable {...rest}>
+      <ModalContent>
+        <Body>Having trouble? Help us fix it.</Body>
+        <form onSubmit={onSubmitFeedback}>
+          <FieldRow>
+            <InputField
+              id="description"
+              name="description"
+              label="Description (optional)"
+              type="text"
+            />
+          </FieldRow>
+          <FieldRow>
+            <InputField
+              id="sendLogs"
+              name="sendLogs"
+              label="Include Debug Logs"
+              type="checkbox"
+              defaultChecked
+            />
+          </FieldRow>
+          {error && (
+            <FieldRow>
+              <ErrorMessage>{error.message}</ErrorMessage>
+            </FieldRow>
+          )}
+          <FieldRow>
+            <Button type="submit" disabled={sending}>
+              {sending ? "Submitting feedback..." : "Submit Feedback"}
+            </Button>
+          </FieldRow>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+}
--- a/src/room/GridLayoutMenu.jsx
+++ b/src/room/GridLayoutMenu.jsx
@@ -1,13 +1,13 @@
 import React from "react";
-import { Button } from "./button";
-import { PopoverMenuTrigger } from "./PopoverMenu";
-import { ReactComponent as SpotlightIcon } from "./icons/Spotlight.svg";
-import { ReactComponent as FreedomIcon } from "./icons/Freedom.svg";
-import { ReactComponent as CheckIcon } from "./icons/Check.svg";
+import { Button } from "../button";
+import { PopoverMenuTrigger } from "../popover/PopoverMenu";
+import { ReactComponent as SpotlightIcon } from "../icons/Spotlight.svg";
+import { ReactComponent as FreedomIcon } from "../icons/Freedom.svg";
+import { ReactComponent as CheckIcon } from "../icons/Check.svg";
 import styles from "./GridLayoutMenu.module.css";
-import { Menu } from "./Menu";
+import { Menu } from "../Menu";
 import { Item } from "@react-stately/collections";
-import { Tooltip, TooltipTrigger } from "./Tooltip";
+import { Tooltip, TooltipTrigger } from "../Tooltip";

 export function GridLayoutMenu({ layout, setLayout }) {
  return (
@@ -16,11 +16,7 @@ export function GridLayoutMenu({ layout, setLayout }) {
        <Button variant="icon">
          {layout === "spotlight" ? <SpotlightIcon /> : <FreedomIcon />}
        </Button>
-        {(props) => (
-          <Tooltip position="bottom" {...props}>
-            Layout Type
-          </Tooltip>
-        )}
+        {() => "Layout Type"}
      </TooltipTrigger>
      {(props) => (
        <Menu {...props} label="Grid layout menu" onAction={setLayout}>
--- a/src/room/GridLayoutMenu.module.css
+++ b/src/room/GridLayoutMenu.module.css
--- a/src/room/GroupCallInspector.jsx
+++ b/src/room/GroupCallInspector.jsx
@@ -0,0 +1,466 @@
+import { Resizable } from "re-resizable";
+import React, {
+  useEffect,
+  useState,
+  useReducer,
+  useRef,
+  createContext,
+  useContext,
+} from "react";
+import ReactJson from "react-json-view";
+import mermaid from "mermaid";
+import styles from "./GroupCallInspector.module.css";
+import { SelectInput } from "../input/SelectInput";
+import { Item } from "@react-stately/collections";
+
+function getCallUserId(call) {
+  return call.getOpponentMember()?.userId || call.invitee || null;
+}
+
+function getCallState(call) {
+  return {
+    id: call.callId,
+    opponentMemberId: getCallUserId(call),
+    state: call.state,
+    direction: call.direction,
+  };
+}
+
+function getHangupCallState(call) {
+  return {
+    ...getCallState(call),
+    hangupReason: call.hangupReason,
+  };
+}
+
+const dateFormatter = new Intl.DateTimeFormat([], {
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  fractionalSecondDigits: 3,
+});
+
+const defaultCollapsedFields = [
+  "org.matrix.msc3401.call",
+  "org.matrix.msc3401.call.member",
+  "calls",
+  "callStats",
+  "hangupCalls",
+  "toDeviceEvents",
+  "sentVoipEvents",
+  "content",
+];
+
+function shouldCollapse({ name, src, type, namespace }) {
+  return defaultCollapsedFields.includes(name);
+}
+
+function getUserName(userId) {
+  const match = userId.match(/@([^\:]+):/);
+
+  return match && match.length > 0
+    ? match[1].replace("-", " ").replace(/\W/g, "")
+    : userId.replace(/\W/g, "");
+}
+
+function formatContent(type, content) {
+  if (type === "m.call.hangup") {
+    return `callId: ${content.call_id.slice(-4)} reason: ${
+      content.reason
+    } senderSID: ${content.sender_session_id} destSID: ${
+      content.dest_session_id
+    }`;
+  }
+  if (type.startsWith("m.call.")) {
+    return `callId: ${content.call_id?.slice(-4)} senderSID: ${
+      content.sender_session_id
+    } destSID: ${content.dest_session_id}`;
+  } else if (type === "org.matrix.msc3401.call.member") {
+    const call =
+      content["m.calls"] &&
+      content["m.calls"].length > 0 &&
+      content["m.calls"][0];
+    const device =
+      call &&
+      call["m.devices"] &&
+      call["m.devices"].length > 0 &&
+      call["m.devices"][0];
+    return `conf_id: ${call && call["m.call_id"].slice(-4)} sessionId: ${
+      device && device.session_id
+    }`;
+  } else {
+    return "";
+  }
+}
+
+function formatTimestamp(timestamp) {
+  return dateFormatter.format(timestamp);
+}
+
+export const InspectorContext = createContext();
+
+export function InspectorContextProvider({ children }) {
+  const context = useState({});
+  return (
+    <InspectorContext.Provider value={context}>
+      {children}
+    </InspectorContext.Provider>
+  );
+}
+
+export function SequenceDiagramViewer({
+  localUserId,
+  remoteUserIds,
+  selectedUserId,
+  onSelectUserId,
+  events,
+}) {
+  const mermaidElRef = useRef();
+
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: "dark",
+      sequence: {
+        showSequenceNumbers: true,
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    const graphDefinition = `sequenceDiagram
+      participant ${getUserName(localUserId)}
+      participant Room
+      participant ${selectedUserId ? getUserName(selectedUserId) : "unknown"}
+      ${
+        events
+          ? events
+              .map(
+                ({ to, from, timestamp, type, content, ignored }) =>
+                  `${getUserName(from)} ${ignored ? "-x" : "->>"} ${getUserName(
+                    to
+                  )}: ${formatTimestamp(timestamp)} ${type} ${formatContent(
+                    type,
+                    content
+                  )}`
+              )
+              .join("\n  ")
+          : ""
+      }
+    `;
+
+    mermaid.mermaidAPI.render("mermaid", graphDefinition, (svgCode) => {
+      mermaidElRef.current.innerHTML = svgCode;
+    });
+  }, [events, localUserId, selectedUserId]);
+
+  return (
+    <div className={styles.scrollContainer}>
+      <div className={styles.sequenceDiagramViewer}>
+        <SelectInput
+          className={styles.selectInput}
+          label="Remote User"
+          selectedKey={selectedUserId}
+          onSelectionChange={onSelectUserId}
+        >
+          {remoteUserIds.map((userId) => (
+            <Item key={userId}>{userId}</Item>
+          ))}
+        </SelectInput>
+        <div id="mermaid" />
+        <div ref={mermaidElRef} />
+      </div>
+    </div>
+  );
+}
+
+function reducer(state, action) {
+  switch (action.type) {
+    case "receive_room_state_event": {
+      const { event, callStateEvent, memberStateEvents } = action;
+
+      let eventsByUserId = state.eventsByUserId;
+      let remoteUserIds = state.remoteUserIds;
+
+      if (event) {
+        const fromId = event.getStateKey();
+
+        remoteUserIds =
+          fromId === state.localUserId || eventsByUserId[fromId]
+            ? state.remoteUserIds
+            : [...state.remoteUserIds, fromId];
+
+        eventsByUserId = { ...state.eventsByUserId };
+
+        if (event.getStateKey() === state.localUserId) {
+          for (const userId in eventsByUserId) {
+            eventsByUserId[userId] = [
+              ...(eventsByUserId[userId] || []),
+              {
+                from: fromId,
+                to: "Room",
+                type: event.getType(),
+                content: event.getContent(),
+                timestamp: event.getTs() || Date.now(),
+                ignored: false,
+              },
+            ];
+          }
+        } else {
+          eventsByUserId[fromId] = [
+            ...(eventsByUserId[fromId] || []),
+            {
+              from: fromId,
+              to: "Room",
+              type: event.getType(),
+              content: event.getContent(),
+              timestamp: event.getTs() || Date.now(),
+              ignored: false,
+            },
+          ];
+        }
+      }
+
+      return {
+        ...state,
+        eventsByUserId,
+        remoteUserIds,
+        callStateEvent: callStateEvent.getContent(),
+        memberStateEvents: Object.fromEntries(
+          memberStateEvents.map((e) => [e.getStateKey(), e.getContent()])
+        ),
+      };
+    }
+    case "received_voip_event": {
+      const event = action.event;
+      const eventsByUserId = { ...state.eventsByUserId };
+      const fromId = event.getSender();
+      const toId = state.localUserId;
+      const content = event.getContent();
+
+      const remoteUserIds = eventsByUserId[fromId]
+        ? state.remoteUserIds
+        : [...state.remoteUserIds, fromId];
+
+      eventsByUserId[fromId] = [
+        ...(eventsByUserId[fromId] || []),
+        {
+          from: fromId,
+          to: toId,
+          type: event.getType(),
+          content,
+          timestamp: event.getTs() || Date.now(),
+          ignored: state.localSessionId !== content.dest_session_id,
+        },
+      ];
+
+      return { ...state, eventsByUserId, remoteUserIds };
+    }
+    case "send_voip_event": {
+      const event = action.event;
+      const eventsByUserId = { ...state.eventsByUserId };
+      const fromId = state.localUserId;
+      const toId = event.userId;
+
+      const remoteUserIds = eventsByUserId[toId]
+        ? state.remoteUserIds
+        : [...state.remoteUserIds, toId];
+
+      eventsByUserId[toId] = [
+        ...(eventsByUserId[toId] || []),
+        {
+          from: fromId,
+          to: toId,
+          type: event.eventType,
+          content: event.content,
+          timestamp: Date.now(),
+          ignored: false,
+        },
+      ];
+
+      return { ...state, eventsByUserId, remoteUserIds };
+    }
+    default:
+      return state;
+  }
+}
+
+function useGroupCallState(client, groupCall, pollCallStats) {
+  const [state, dispatch] = useReducer(reducer, {
+    localUserId: client.getUserId(),
+    localSessionId: client.getSessionId(),
+    eventsByUserId: {},
+    remoteUserIds: [],
+    callStateEvent: null,
+    memberStateEvents: {},
+  });
+
+  useEffect(() => {
+    function onUpdateRoomState(event) {
+      const callStateEvent = groupCall.room.currentState.getStateEvents(
+        "org.matrix.msc3401.call",
+        groupCall.groupCallId
+      );
+
+      const memberStateEvents = groupCall.room.currentState.getStateEvents(
+        "org.matrix.msc3401.call.member"
+      );
+
+      dispatch({
+        type: "receive_room_state_event",
+        event,
+        callStateEvent,
+        memberStateEvents,
+      });
+    }
+
+    // function onCallsChanged() {
+    //   const calls = groupCall.calls.reduce((obj, call) => {
+    //     obj[
+    //       `${call.callId} (${call.getOpponentMember()?.userId || call.sender})`
+    //     ] = getCallState(call);
+    //     return obj;
+    //   }, {});
+
+    //   updateState({ calls });
+    // }
+
+    // function onCallHangup(call) {
+    //   setState(({ hangupCalls, ...rest }) => ({
+    //     ...rest,
+    //     hangupCalls: {
+    //       ...hangupCalls,
+    //       [`${call.callId} (${
+    //         call.getOpponentMember()?.userId || call.sender
+    //       })`]: getHangupCallState(call),
+    //     },
+    //   }));
+    //   dispatch({ type: "call_hangup", call });
+    // }
+
+    function onReceivedVoipEvent(event) {
+      dispatch({ type: "received_voip_event", event });
+    }
+
+    function onSendVoipEvent(event) {
+      dispatch({ type: "send_voip_event", event });
+    }
+
+    client.on("RoomState.events", onUpdateRoomState);
+    //groupCall.on("calls_changed", onCallsChanged);
+    groupCall.on("send_voip_event", onSendVoipEvent);
+    //client.on("state", onCallsChanged);
+    //client.on("hangup", onCallHangup);
+    client.on("received_voip_event", onReceivedVoipEvent);
+
+    onUpdateRoomState();
+
+    return () => {
+      client.removeListener("RoomState.events", onUpdateRoomState);
+      //groupCall.removeListener("calls_changed", onCallsChanged);
+      groupCall.removeListener("send_voip_event", onSendVoipEvent);
+      //client.removeListener("state", onCallsChanged);
+      //client.removeListener("hangup", onCallHangup);
+      client.removeListener("received_voip_event", onReceivedVoipEvent);
+    };
+  }, [client, groupCall]);
+
+  // useEffect(() => {
+  //   let timeout;
+
+  //   async function updateCallStats() {
+  //     const callIds = groupCall.calls.map(
+  //       (call) =>
+  //         `${call.callId} (${call.getOpponentMember()?.userId || call.sender})`
+  //     );
+  //     const stats = await Promise.all(
+  //       groupCall.calls.map((call) =>
+  //         call.peerConn
+  //           ? call.peerConn
+  //               .getStats(null)
+  //               .then((stats) =>
+  //                 Object.fromEntries(
+  //                   Array.from(stats).map(([_id, report], i) => [
+  //                     report.type + i,
+  //                     report,
+  //                   ])
+  //                 )
+  //               )
+  //           : Promise.resolve(null)
+  //       )
+  //     );
+
+  //     const callStats = {};
+
+  //     for (let i = 0; i < groupCall.calls.length; i++) {
+  //       callStats[callIds[i]] = stats[i];
+  //     }
+
+  //     dispatch({ type: "callStats", callStats });
+  //     timeout = setTimeout(updateCallStats, 1000);
+  //   }
+
+  //   if (pollCallStats) {
+  //     updateCallStats();
+  //   }
+
+  //   return () => {
+  //     clearTimeout(timeout);
+  //   };
+  // }, [pollCallStats]);
+
+  return state;
+}
+
+export function GroupCallInspector({ client, groupCall, show }) {
+  const [currentTab, setCurrentTab] = useState("sequence-diagrams");
+  const [selectedUserId, setSelectedUserId] = useState();
+  const state = useGroupCallState(client, groupCall, show);
+
+  const [_, setState] = useContext(InspectorContext);
+
+  useEffect(() => {
+    setState({ json: state });
+  }, [setState, state]);
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Resizable
+      enable={{ top: true }}
+      defaultSize={{ height: 200 }}
+      className={styles.inspector}
+    >
+      <div className={styles.toolbar}>
+        <button onClick={() => setCurrentTab("sequence-diagrams")}>
+          Sequence Diagrams
+        </button>
+        <button onClick={() => setCurrentTab("inspector")}>Inspector</button>
+      </div>
+      {currentTab === "sequence-diagrams" && (
+        <SequenceDiagramViewer
+          localUserId={state.localUserId}
+          selectedUserId={selectedUserId}
+          onSelectUserId={setSelectedUserId}
+          remoteUserIds={state.remoteUserIds}
+          events={state.eventsByUserId[selectedUserId]}
+        />
+      )}
+      {currentTab === "inspector" && (
+        <ReactJson
+          theme="monokai"
+          src={state}
+          name={null}
+          indentWidth={2}
+          shouldCollapse={shouldCollapse}
+          displayDataTypes={false}
+          displayObjectSize={false}
+          enableClipboard
+          style={{ height: "100%", overflowY: "scroll" }}
+        />
+      )}
+    </Resizable>
+  );
+}
--- a/src/room/GroupCallInspector.module.css
+++ b/src/room/GroupCallInspector.module.css
@@ -0,0 +1,25 @@
+.inspector {
+  background-color: var(--bgColor2);
+}
+
+.scrollContainer {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.sequenceDiagramViewer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+.selectInput {
+  align-self: flex-start;
+}
+
+.sequenceDiagramViewer :global(.messageText) {
+  font-size: 12px;
+  fill: var(--textColor1) !important;
+  stroke: var(--textColor1) !important;
+}
--- a/src/room/GroupCallLoader.jsx
+++ b/src/room/GroupCallLoader.jsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { useLoadGroupCall } from "./useLoadGroupCall";
+import { ErrorView, FullScreenView } from "../FullScreenView";
+import { usePageTitle } from "../usePageTitle";
+import { isLocalRoomId } from "../matrix-utils";
+import { RoomNotFoundView } from "./RoomNotFoundView";
+
+export function GroupCallLoader({ client, roomId, viaServers, children }) {
+  const { loading, error, groupCall } = useLoadGroupCall(
+    client,
+    roomId,
+    viaServers
+  );
+
+  usePageTitle(groupCall ? groupCall.room.name : "Loading...");
+
+  if (loading) {
+    return (
+      <FullScreenView>
+        <h1>Loading room...</h1>
+      </FullScreenView>
+    );
+  }
+
+  if (
+    error &&
+    (error.errcode === "M_NOT_FOUND" ||
+      (error.message &&
+        error.message.indexOf("Failed to fetch alias") !== -1)) &&
+    isLocalRoomId(roomId)
+  ) {
+    return <RoomNotFoundView client={client} roomId={roomId} />;
+  }
+
+  if (error) {
+    return <ErrorView error={error} />;
+  }
+
+  return children(groupCall);
+}
--- a/src/room/GroupCallView.jsx
+++ b/src/room/GroupCallView.jsx
@@ -0,0 +1,126 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";
+import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
+import { useGroupCall } from "matrix-react-sdk/src/hooks/useGroupCall";
+import { ErrorView, FullScreenView } from "../FullScreenView";
+import { LobbyView } from "./LobbyView";
+import { InCallView } from "./InCallView";
+import { CallEndedView } from "./CallEndedView";
+import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
+import { useLocationNavigation } from "../useLocationNavigation";
+
+export function GroupCallView({
+  client,
+  isPasswordlessUser,
+  roomId,
+  groupCall,
+  simpleGrid,
+}) {
+  const [showInspector, setShowInspector] = useState(
+    () => !!localStorage.getItem("matrix-group-call-inspector")
+  );
+  const onChangeShowInspector = useCallback((show) => {
+    setShowInspector(show);
+
+    if (show) {
+      localStorage.setItem("matrix-group-call-inspector", "true");
+    } else {
+      localStorage.removeItem("matrix-group-call-inspector");
+    }
+  }, []);
+
+  const {
+    state,
+    error,
+    activeSpeaker,
+    userMediaFeeds,
+    microphoneMuted,
+    localVideoMuted,
+    localCallFeed,
+    initLocalCallFeed,
+    enter,
+    leave,
+    toggleLocalVideoMuted,
+    toggleMicrophoneMuted,
+    toggleScreensharing,
+    requestingScreenshare,
+    isScreensharing,
+    localScreenshareFeed,
+    screenshareFeeds,
+    hasLocalParticipant,
+  } = useGroupCall(groupCall);
+
+  useEffect(() => {
+    window.groupCall = groupCall;
+  }, [groupCall]);
+
+  useSentryGroupCallHandler(groupCall);
+
+  useLocationNavigation(requestingScreenshare);
+
+  const [left, setLeft] = useState(false);
+  const history = useHistory();
+
+  const onLeave = useCallback(() => {
+    setLeft(true);
+    leave();
+
+    if (!isPasswordlessUser) {
+      history.push("/");
+    }
+  }, [leave, history]);
+
+  if (error) {
+    return <ErrorView error={error} />;
+  } else if (state === GroupCallState.Entered) {
+    return (
+      <InCallView
+        groupCall={groupCall}
+        client={client}
+        roomName={groupCall.room.name}
+        microphoneMuted={microphoneMuted}
+        localVideoMuted={localVideoMuted}
+        toggleLocalVideoMuted={toggleLocalVideoMuted}
+        toggleMicrophoneMuted={toggleMicrophoneMuted}
+        userMediaFeeds={userMediaFeeds}
+        activeSpeaker={activeSpeaker}
+        onLeave={onLeave}
+        toggleScreensharing={toggleScreensharing}
+        isScreensharing={isScreensharing}
+        localScreenshareFeed={localScreenshareFeed}
+        screenshareFeeds={screenshareFeeds}
+        simpleGrid={simpleGrid}
+        setShowInspector={onChangeShowInspector}
+        showInspector={showInspector}
+        roomId={roomId}
+      />
+    );
+  } else if (state === GroupCallState.Entering) {
+    return (
+      <FullScreenView>
+        <h1>Entering room...</h1>
+      </FullScreenView>
+    );
+  } else if (left) {
+    return <CallEndedView client={client} />;
+  } else {
+    return (
+      <LobbyView
+        client={client}
+        hasLocalParticipant={hasLocalParticipant}
+        roomName={groupCall.room.name}
+        state={state}
+        onInitLocalCallFeed={initLocalCallFeed}
+        localCallFeed={localCallFeed}
+        onEnter={enter}
+        microphoneMuted={microphoneMuted}
+        localVideoMuted={localVideoMuted}
+        toggleLocalVideoMuted={toggleLocalVideoMuted}
+        toggleMicrophoneMuted={toggleMicrophoneMuted}
+        setShowInspector={onChangeShowInspector}
+        showInspector={showInspector}
+        roomId={roomId}
+      />
+    );
+  }
+}
--- a/src/room/InCallView.jsx
+++ b/src/room/InCallView.jsx
@@ -0,0 +1,196 @@
+import React, { useCallback, useMemo } from "react";
+import styles from "./InCallView.module.css";
+import {
+  HangupButton,
+  MicButton,
+  VideoButton,
+  ScreenshareButton,
+} from "../button";
+import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
+import VideoGrid, {
+  useVideoGridLayout,
+} from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid";
+import { VideoTileContainer } from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoTileContainer";
+import SimpleVideoGrid from "matrix-react-sdk/src/components/views/voip/GroupCallView/SimpleVideoGrid";
+import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss";
+import { getAvatarUrl } from "../matrix-utils";
+import { GroupCallInspector } from "./GroupCallInspector";
+import { OverflowMenu } from "./OverflowMenu";
+import { GridLayoutMenu } from "./GridLayoutMenu";
+import { Avatar } from "../Avatar";
+import { UserMenuContainer } from "../UserMenuContainer";
+import { useRageshakeRequestModal } from "../settings/rageshake";
+import { RageshakeRequestModal } from "./RageshakeRequestModal";
+import { usePreventScroll } from "@react-aria/overlays";
+
+const canScreenshare = "getDisplayMedia" in navigator.mediaDevices;
+// There is currently a bug in Safari our our code with cloning and sending MediaStreams
+// or with getUsermedia and getDisplaymedia being used within the same session.
+// For now we can disable screensharing in Safari.
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+export function InCallView({
+  client,
+  groupCall,
+  roomName,
+  microphoneMuted,
+  localVideoMuted,
+  toggleLocalVideoMuted,
+  toggleMicrophoneMuted,
+  userMediaFeeds,
+  activeSpeaker,
+  onLeave,
+  toggleScreensharing,
+  isScreensharing,
+  screenshareFeeds,
+  simpleGrid,
+  setShowInspector,
+  showInspector,
+  roomId,
+}) {
+  usePreventScroll();
+  const [layout, setLayout] = useVideoGridLayout(screenshareFeeds.length > 0);
+
+  const items = useMemo(() => {
+    const participants = [];
+
+    for (const callFeed of userMediaFeeds) {
+      participants.push({
+        id: callFeed.stream.id,
+        callFeed,
+        focused:
+          screenshareFeeds.length === 0 && layout === "spotlight"
+            ? callFeed.userId === activeSpeaker
+            : false,
+      });
+    }
+
+    for (const callFeed of screenshareFeeds) {
+      const userMediaItem = participants.find(
+        (item) => item.callFeed.userId === callFeed.userId
+      );
+
+      if (userMediaItem) {
+        userMediaItem.presenter = true;
+      }
+
+      participants.push({
+        id: callFeed.stream.id,
+        callFeed,
+        focused: true,
+      });
+    }
+
+    return participants;
+  }, [userMediaFeeds, activeSpeaker, screenshareFeeds, layout]);
+
+  const onFocusTile = useCallback(
+    (tiles, focusedTile) => {
+      if (layout === "freedom") {
+        return tiles.map((tile) => {
+          if (tile === focusedTile) {
+            return { ...tile, focused: !tile.focused };
+          }
+
+          return tile;
+        });
+      } else {
+        return tiles;
+      }
+    },
+    [layout, setLayout]
+  );
+
+  const renderAvatar = useCallback(
+    (roomMember, width, height) => {
+      const avatarUrl = roomMember.user?.avatarUrl;
+      const size = Math.round(Math.min(width, height) / 2);
+
+      return (
+        <Avatar
+          key={roomMember.userId}
+          style={{
+            width: size,
+            height: size,
+            borderRadius: size,
+            fontSize: Math.round(size / 2),
+          }}
+          src={avatarUrl && getAvatarUrl(client, avatarUrl, 96)}
+          fallback={roomMember.name.slice(0, 1).toUpperCase()}
+          className={styles.avatar}
+        />
+      );
+    },
+    [client]
+  );
+
+  const {
+    modalState: rageshakeRequestModalState,
+    modalProps: rageshakeRequestModalProps,
+  } = useRageshakeRequestModal(groupCall.room.roomId);
+
+  return (
+    <div className={styles.inRoom}>
+      <Header>
+        <LeftNav>
+          <RoomHeaderInfo roomName={roomName} />
+        </LeftNav>
+        <RightNav>
+          <GridLayoutMenu layout={layout} setLayout={setLayout} />
+          <UserMenuContainer preventNavigation />
+        </RightNav>
+      </Header>
+      {items.length === 0 ? (
+        <div className={styles.centerMessage}>
+          <p>Waiting for other participants...</p>
+        </div>
+      ) : simpleGrid ? (
+        <SimpleVideoGrid items={items} />
+      ) : (
+        <VideoGrid
+          items={items}
+          layout={layout}
+          onFocusTile={onFocusTile}
+          disableAnimations={isSafari}
+        >
+          {({ item, ...rest }) => (
+            <VideoTileContainer
+              key={item.id}
+              item={item}
+              getAvatar={renderAvatar}
+              showName={items.length > 2 || item.focused}
+              {...rest}
+            />
+          )}
+        </VideoGrid>
+      )}
+      <div className={styles.footer}>
+        <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
+        <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
+        {canScreenshare && !isSafari && (
+          <ScreenshareButton
+            enabled={isScreensharing}
+            onPress={toggleScreensharing}
+          />
+        )}
+        <OverflowMenu
+          inCall
+          roomId={roomId}
+          setShowInspector={setShowInspector}
+          showInspector={showInspector}
+          client={client}
+          groupCall={groupCall}
+        />
+        <HangupButton onPress={onLeave} />
+      </div>
+      <GroupCallInspector
+        client={client}
+        groupCall={groupCall}
+        show={showInspector}
+      />
+      {rageshakeRequestModalState.isOpen && (
+        <RageshakeRequestModal {...rageshakeRequestModalProps} />
+      )}
+    </div>
+  );
+}
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -0,0 +1,68 @@
+/*
+Copyright 2021 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.
+*/
+
+.inRoom {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 100%;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+}
+
+.centerMessage {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.centerMessage p {
+  display: block;
+  margin-bottom: 0;
+}
+
+.footer {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 64px;
+}
+
+.footer > * {
+  margin-right: 30px;
+}
+
+.footer > :last-child {
+  margin-right: 0px;
+}
+
+.avatar {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@media (min-width: 800px) {
+  .footer {
+    height: 118px;
+  }
+}
--- a/src/room/InviteModal.jsx
+++ b/src/room/InviteModal.jsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { Modal, ModalContent } from "./Modal";
-import { CopyButton } from "./button";
-import { getRoomUrl } from "./ConferenceCallManagerHooks";
+import { Modal, ModalContent } from "../Modal";
+import { CopyButton } from "../button";
+import { getRoomUrl } from "../matrix-utils";
 import styles from "./InviteModal.module.css";

 export function InviteModal({ roomId, ...rest }) {
--- a/src/room/InviteModal.module.css
+++ b/src/room/InviteModal.module.css
--- a/src/room/LobbyView.jsx
+++ b/src/room/LobbyView.jsx
@@ -0,0 +1,140 @@
+import React, { useEffect, useRef } from "react";
+import styles from "./LobbyView.module.css";
+import { Button, CopyButton, MicButton, VideoButton } from "../button";
+import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
+import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
+import { useCallFeed } from "matrix-react-sdk/src/hooks/useCallFeed";
+import { useMediaStream } from "matrix-react-sdk/src/hooks/useMediaStream";
+import { getRoomUrl } from "../matrix-utils";
+import { OverflowMenu } from "./OverflowMenu";
+import { UserMenuContainer } from "../UserMenuContainer";
+import { Body, Link } from "../typography/Typography";
+import { Avatar } from "../Avatar";
+import { getAvatarUrl } from "../matrix-utils";
+import { useProfile } from "../profile/useProfile";
+import useMeasure from "react-use-measure";
+import { ResizeObserver } from "@juggle/resize-observer";
+import { useLocationNavigation } from "../useLocationNavigation";
+
+export function LobbyView({
+  client,
+  roomName,
+  state,
+  onInitLocalCallFeed,
+  onEnter,
+  localCallFeed,
+  microphoneMuted,
+  localVideoMuted,
+  toggleLocalVideoMuted,
+  toggleMicrophoneMuted,
+  setShowInspector,
+  showInspector,
+  roomId,
+}) {
+  const { stream } = useCallFeed(localCallFeed);
+  const videoRef = useMediaStream(stream, true);
+  const { displayName, avatarUrl } = useProfile(client);
+  const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
+  const avatarSize = (previewBounds.height - 66) / 2;
+
+  useEffect(() => {
+    onInitLocalCallFeed();
+  }, [onInitLocalCallFeed]);
+
+  useLocationNavigation(state === GroupCallState.InitializingLocalCallFeed);
+
+  const joinCallButtonRef = useRef();
+
+  useEffect(() => {
+    if (state === GroupCallState.LocalCallFeedInitialized) {
+      joinCallButtonRef.current.focus();
+    }
+  }, [state]);
+
+  return (
+    <div className={styles.room}>
+      <Header>
+        <LeftNav>
+          <RoomHeaderInfo roomName={roomName} />
+        </LeftNav>
+        <RightNav>
+          <UserMenuContainer />
+        </RightNav>
+      </Header>
+      <div className={styles.joinRoom}>
+        <div className={styles.joinRoomContent}>
+          <div className={styles.preview} ref={previewRef}>
+            <video ref={videoRef} muted playsInline disablePictureInPicture />
+            {state === GroupCallState.LocalCallFeedUninitialized && (
+              <Body fontWeight="semiBold" className={styles.webcamPermissions}>
+                Webcam/microphone permissions needed to join the call.
+              </Body>
+            )}
+            {state === GroupCallState.InitializingLocalCallFeed && (
+              <Body fontWeight="semiBold" className={styles.webcamPermissions}>
+                Accept webcam/microphone permissions to join the call.
+              </Body>
+            )}
+            {state === GroupCallState.LocalCallFeedInitialized && (
+              <>
+                {localVideoMuted && (
+                  <div className={styles.avatarContainer}>
+                    <Avatar
+                      style={{
+                        width: avatarSize,
+                        height: avatarSize,
+                        borderRadius: avatarSize,
+                        fontSize: Math.round(avatarSize / 2),
+                      }}
+                      src={avatarUrl && getAvatarUrl(client, avatarUrl, 96)}
+                      fallback={displayName.slice(0, 1).toUpperCase()}
+                    />
+                  </div>
+                )}
+                <div className={styles.previewButtons}>
+                  <MicButton
+                    muted={microphoneMuted}
+                    onPress={toggleMicrophoneMuted}
+                  />
+                  <VideoButton
+                    muted={localVideoMuted}
+                    onPress={toggleLocalVideoMuted}
+                  />
+                  <OverflowMenu
+                    roomId={roomId}
+                    setShowInspector={setShowInspector}
+                    showInspector={showInspector}
+                    client={client}
+                  />
+                </div>
+              </>
+            )}
+          </div>
+          <Button
+            ref={joinCallButtonRef}
+            className={styles.copyButton}
+            size="lg"
+            disabled={state !== GroupCallState.LocalCallFeedInitialized}
+            onPress={onEnter}
+          >
+            Join call now
+          </Button>
+          <Body>Or</Body>
+          <CopyButton
+            variant="secondaryCopy"
+            value={getRoomUrl(roomId)}
+            className={styles.copyButton}
+            copiedMessage="Call link copied"
+          >
+            Copy call link and join later
+          </CopyButton>
+        </div>
+        <Body className={styles.joinRoomFooter}>
+          <Link color="primary" to="/">
+            Take me Home
+          </Link>
+        </Body>
+      </div>
+    </div>
+  );
+}
--- a/src/room/LobbyView.module.css
+++ b/src/room/LobbyView.module.css
@@ -22,12 +22,6 @@ limitations under the License.
  min-height: 100%;
 }

-.inRoom {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-}
-
 .joinRoom {
  display: flex;
  flex-direction: column;
@@ -44,21 +38,12 @@ limitations under the License.
  flex: 1;
 }

-.joinRoomContent h1 {
-  display: none;
-  margin: 0;
-}
-
 .joinRoomFooter {
  margin: 20px 0;
 }

 .homeLink {
  margin-top: 50px;
-  color: #0dbd8b;
-  text-decoration: none;
-  font-weight: normal;
-  font-size: 15px;
 }

 .preview {
@@ -68,15 +53,28 @@ limitations under the License.
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--bgColor3);
-  margin: 40px 20px 20px 20px;
+  margin: 20px;
 }

 .preview video {
-  width: 100%;
+  width: calc(100% + 1px);
  height: 100%;
  object-fit: contain;
  background-color: black;
-  transform: scaleX(-1);
+  /* transform scale doesn't perfectly match width, so make -1.01 border issues */
+  transform: scaleX(-1.01);
+}
+
+.avatarContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 66px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--bgColor3);
 }

 .webcamPermissions {
@@ -85,8 +83,6 @@ limitations under the License.
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
-  font-size: 13px;
-  font-weight: 600;
  text-align: center;
 }

@@ -116,6 +112,11 @@ limitations under the License.

 .copyButton {
  width: 320px !important;
+  margin-bottom: 15px;
+}
+
+.copyButton:last-child {
+  margin-bottom: 0;
 }

 .previewButtons > * {
@@ -126,92 +127,8 @@ limitations under the License.
  margin-right: 0px;
 }

-.centerMessage {
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.centerMessage p {
-  display: block;
-  margin-bottom: 0;
-}
-
-.roomContainer {
-  overflow: hidden;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 2px;
-  min-height: 0;
-}
-
-.footer {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 64px;
-}
-
-.footer > * {
-  margin-right: 30px;
-}
-
-.footer > :last-child {
-  margin-right: 0px;
-}
-
-.callEndedScreen h1 {
-  text-align: center;
-  margin-bottom: 60px;
-}
-
-.callEndedScreen h2 {
-  font-size: 24px;
-  font-weight: 600;
-  margin-bottom: 32px;
-}
-
-.callEndedScreen p {
-  margin: 0 0 16px 0;
-}
-
-.callEndedScreen ul {
-  padding: 0;
-  margin-bottom: 40px;
-  text-align: initial;
-  padding-left: 20px;
-}
-
-.callEndedButton {
-  width: 100%;
-}
-
-.callEndedContent {
-  text-align: center;
-  max-width: 360px;
-}
-
-.avatar {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
@media (min-width: 800px) {
-  .roomContainer {
-    flex-direction: row;
-  }
-
-  .footer {
-    height: 118px;
-  }
-
-  .joinRoomContent h1 {
-    display: block;
+  .preview {
+    margin-top: 40px;
  }
 }
--- a/src/room/OverflowMenu.jsx
+++ b/src/room/OverflowMenu.jsx
@@ -1,26 +1,32 @@
 import React, { useCallback } from "react";
-import { Button } from "./button";
-import { Menu } from "./Menu";
-import { PopoverMenuTrigger } from "./PopoverMenu";
+import { Button } from "../button";
+import { Menu } from "../Menu";
+import { PopoverMenuTrigger } from "../popover/PopoverMenu";
 import { Item } from "@react-stately/collections";
-import { ReactComponent as SettingsIcon } from "./icons/Settings.svg";
-import { ReactComponent as AddUserIcon } from "./icons/AddUser.svg";
-import { ReactComponent as OverflowIcon } from "./icons/Overflow.svg";
-import { useModalTriggerState } from "./Modal";
-import { SettingsModal } from "./SettingsModal";
+import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
+import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
+import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg";
+import { ReactComponent as FeedbackIcon } from "../icons/Feedback.svg";
+import { useModalTriggerState } from "../Modal";
+import { SettingsModal } from "../settings/SettingsModal";
 import { InviteModal } from "./InviteModal";
-import { Tooltip, TooltipTrigger } from "./Tooltip";
+import { TooltipTrigger } from "../Tooltip";
+import { FeedbackModal } from "./FeedbackModal";

 export function OverflowMenu({
  roomId,
  setShowInspector,
  showInspector,
  client,
+  inCall,
+  groupCall,
 }) {
  const { modalState: inviteModalState, modalProps: inviteModalProps } =
    useModalTriggerState();
  const { modalState: settingsModalState, modalProps: settingsModalProps } =
    useModalTriggerState();
+  const { modalState: feedbackModalState, modalProps: feedbackModalProps } =
+    useModalTriggerState();

  // TODO: On closing modal, focus should be restored to the trigger button
  // https://github.com/adobe/react-spectrum/issues/2444
@@ -32,21 +38,20 @@ export function OverflowMenu({
      case "settings":
        settingsModalState.open();
        break;
+      case "feedback":
+        feedbackModalState.open();
+        break;
    }
  });

  return (
    <>
      <PopoverMenuTrigger disableOnState>
-        <TooltipTrigger>
+        <TooltipTrigger placement="top">
          <Button variant="toolbar">
            <OverflowIcon />
          </Button>
-          {(props) => (
-            <Tooltip position="top" {...props}>
-              More
-            </Tooltip>
-          )}
+          {() => "More"}
        </TooltipTrigger>
        {(props) => (
          <Menu {...props} label="More menu" onAction={onAction}>
@@ -58,6 +63,10 @@ export function OverflowMenu({
              <SettingsIcon />
              <span>Settings</span>
            </Item>
+            <Item key="feedback" textValue="Submit Feedback">
+              <FeedbackIcon />
+              <span>Submit Feedback</span>
+            </Item>
          </Menu>
        )}
      </PopoverMenuTrigger>
@@ -72,6 +81,13 @@ export function OverflowMenu({
      {inviteModalState.isOpen && (
        <InviteModal roomId={roomId} {...inviteModalProps} />
      )}
+      {feedbackModalState.isOpen && (
+        <FeedbackModal
+          {...feedbackModalProps}
+          roomId={groupCall?.room.roomId}
+          inCall={inCall}
+        />
+      )}
    </>
  );
 }
--- a/src/room/RageshakeRequestModal.jsx
+++ b/src/room/RageshakeRequestModal.jsx
@@ -0,0 +1,45 @@
+import React, { useEffect } from "react";
+import { Modal, ModalContent } from "../Modal";
+import { Button } from "../button";
+import { FieldRow, ErrorMessage } from "../input/Input";
+import { useSubmitRageshake } from "../settings/rageshake";
+import { Body } from "../typography/Typography";
+
+export function RageshakeRequestModal({ rageshakeRequestId, ...rest }) {
+  const { submitRageshake, sending, sent, error } = useSubmitRageshake();
+
+  useEffect(() => {
+    if (sent) {
+      rest.onClose();
+    }
+  }, [sent, rest.onClose]);
+
+  return (
+    <Modal title="Debug Log Request" isDismissable {...rest}>
+      <ModalContent>
+        <Body>
+          Another user on this call is having an issue. In order to better
+          diagnose these issues we'd like to collect a debug log.
+        </Body>
+        <FieldRow>
+          <Button
+            onPress={() =>
+              submitRageshake({
+                sendLogs: true,
+                rageshakeRequestId,
+              })
+            }
+            disabled={sending}
+          >
+            {sending ? "Sending debug log..." : "Send debug log"}
+          </Button>
+        </FieldRow>
+        {error && (
+          <FieldRow>
+            <ErrorMessage>{error.message}</ErrorMessage>
+          </FieldRow>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+}
--- a/src/room/RoomAuthView.jsx
+++ b/src/room/RoomAuthView.jsx
@@ -0,0 +1,105 @@
+import React, { useCallback, useState } from "react";
+import styles from "./RoomAuthView.module.css";
+import { Button } from "../button";
+import { Body, Caption, Link, Headline } from "../typography/Typography";
+import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
+import { useLocation } from "react-router-dom";
+import { useRecaptcha } from "../auth/useRecaptcha";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
+import { randomString } from "matrix-js-sdk/src/randomstring";
+import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
+import { Form } from "../form/Form";
+import { UserMenuContainer } from "../UserMenuContainer";
+import { generateRandomName } from "../auth/generateRandomName";
+
+export function RoomAuthView() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState();
+  const [{ privacyPolicyUrl, recaptchaKey }, register] =
+    useInteractiveRegistration();
+  const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
+  const onSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const data = new FormData(e.target);
+      const displayName = data.get("displayName");
+
+      async function submit() {
+        setError(undefined);
+        setLoading(true);
+        const recaptchaResponse = await execute();
+        const userName = generateRandomName();
+        await register(
+          userName,
+          randomString(16),
+          displayName,
+          recaptchaResponse,
+          true
+        );
+      }
+
+      submit().catch((error) => {
+        console.error(error);
+        setLoading(false);
+        setError(error);
+        reset();
+      });
+    },
+    [register, reset, execute]
+  );
+
+  const location = useLocation();
+
+  return (
+    <>
+      <Header>
+        <LeftNav>
+          <HeaderLogo />
+        </LeftNav>
+        <RightNav>
+          <UserMenuContainer preventNavigation />
+        </RightNav>
+      </Header>
+      <div className={styles.container}>
+        <main className={styles.main}>
+          <Headline className={styles.headline}>Join Call</Headline>
+          <Form className={styles.form} onSubmit={onSubmit}>
+            <FieldRow>
+              <InputField
+                id="displayName"
+                name="displayName"
+                label="Display Name"
+                placeholder="Display Name"
+                type="text"
+                required
+                autoComplete="off"
+              />
+            </FieldRow>
+            <Caption>
+              By clicking "Join call now", you agree to our{" "}
+              <Link href={privacyPolicyUrl}>Terms and conditions</Link>
+            </Caption>
+            {error && (
+              <FieldRow>
+                <ErrorMessage>{error.message}</ErrorMessage>
+              </FieldRow>
+            )}
+            <Button type="submit" size="lg" disabled={loading}>
+              {loading ? "Loading..." : "Join call now"}
+            </Button>
+            <div id={recaptchaId} />
+          </Form>
+        </main>
+        <Body className={styles.footer}>
+          {"Not registered yet? "}
+          <Link
+            color="primary"
+            to={{ pathname: "/login", state: { from: location } }}
+          >
+            Create an account
+          </Link>
+        </Body>
+      </div>
+    </>
+  );
+}
--- a/src/room/RoomAuthView.module.css
+++ b/src/room/RoomAuthView.module.css
@@ -0,0 +1,67 @@
+.form {
+  padding: 0 24px;
+  justify-content: center;
+  max-width: 360px;
+}
+
+.form > * + * {
+  margin-bottom: 24px;
+}
+
+.headline {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.callEndedContent {
+  text-align: center;
+  max-width: 360px;
+}
+
+.callEndedContent h3 {
+  margin-bottom: 32px;
+}
+
+.callEndedButton {
+  width: 100%;
+  margin-top: 54px;
+}
+
+.container {
+  display: flex;
+  min-height: calc(100% - 64px);
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  display: flex;
+  margin-bottom: 54px;
+}
+
+.headline {
+  margin-bottom: 40px;
+}
+
+.footer {
+  margin-bottom: 44px;
+}
+
+@media (min-width: 800px) {
+  .logo {
+    display: none;
+  }
+
+  .container {
+    min-height: calc(100% - 76px);
+  }
+}
--- a/src/room/RoomNotFoundView.jsx
+++ b/src/room/RoomNotFoundView.jsx
@@ -0,0 +1,76 @@
+import React, { useState, useCallback } from "react";
+import { FullScreenView } from "../FullScreenView";
+import { Headline, Subtitle } from "../typography/Typography";
+import { createRoom, roomNameFromRoomId } from "../matrix-utils";
+import { FieldRow, ErrorMessage, InputField } from "../input/Input";
+import { Button } from "../button";
+import { Form } from "../form/Form";
+import { useHistory } from "react-router-dom";
+import styles from "./RoomNotFoundView.module.css";
+
+export function RoomNotFoundView({ client, roomId }) {
+  const history = useHistory();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState();
+  const roomName = roomNameFromRoomId(roomId);
+  const onSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+
+      async function submit() {
+        setError(undefined);
+        setLoading(true);
+
+        const roomIdOrAlias = await createRoom(client, roomName);
+
+        if (roomIdOrAlias) {
+          history.push(`/room/${roomIdOrAlias}`);
+        }
+      }
+
+      submit().catch((error) => {
+        console.error(error);
+        setLoading(false);
+        setError(error);
+      });
+    },
+    [client, roomName]
+  );
+
+  return (
+    <FullScreenView>
+      <Headline>Call Not Found</Headline>
+      <Subtitle>Would you like to create this call?</Subtitle>
+      <Form onSubmit={onSubmit} className={styles.form}>
+        <FieldRow>
+          <InputField
+            id="callName"
+            name="callName"
+            label="Call name"
+            placeholder="Call name"
+            type="text"
+            required
+            autoComplete="off"
+            value={roomName}
+            disabled
+          />
+        </FieldRow>
+        <FieldRow>
+          <Button
+            type="submit"
+            size="lg"
+            disabled={loading}
+            className={styles.button}
+          >
+            {loading ? "Loading..." : "Create Room"}
+          </Button>
+        </FieldRow>
+        {error && (
+          <FieldRow>
+            <ErrorMessage>{error.message}</ErrorMessage>
+          </FieldRow>
+        )}
+      </Form>
+    </FullScreenView>
+  );
+}
--- a/src/room/RoomNotFoundView.module.css
+++ b/src/room/RoomNotFoundView.module.css
@@ -0,0 +1,11 @@
+.form {
+  padding: 0 24px;
+  justify-content: center;
+  max-width: 409px;
+  width: calc(100% - 48px);
+  margin-bottom: 72px;
+}
+
+.button {
+  width: 100%;
+}
--- a/src/room/RoomPage.jsx
+++ b/src/room/RoomPage.jsx
@@ -0,0 +1,62 @@
+/*
+Copyright 2021 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 React, { useMemo } from "react";
+import { useLocation, useParams } from "react-router-dom";
+import { useClient } from "../ClientContext";
+import { ErrorView, LoadingView } from "../FullScreenView";
+import { RoomAuthView } from "./RoomAuthView";
+import { GroupCallLoader } from "./GroupCallLoader";
+import { GroupCallView } from "./GroupCallView";
+
+export function RoomPage() {
+  const { loading, isAuthenticated, error, client, isPasswordlessUser } =
+    useClient();
+
+  const { roomId: maybeRoomId } = useParams();
+  const { hash, search } = useLocation();
+  const [simpleGrid, viaServers] = useMemo(() => {
+    const params = new URLSearchParams(search);
+    return [params.has("simple"), params.getAll("via")];
+  }, [search]);
+  const roomId = (maybeRoomId || hash || "").toLowerCase();
+
+  if (loading) {
+    return <LoadingView />;
+  }
+
+  if (error) {
+    return <ErrorView error={error} />;
+  }
+
+  if (!isAuthenticated) {
+    return <RoomAuthView />;
+  }
+
+  return (
+    <GroupCallLoader client={client} roomId={roomId} viaServers={viaServers}>
+      {(groupCall) => (
+        <GroupCallView
+          client={client}
+          roomId={roomId}
+          groupCall={groupCall}
+          isPasswordlessUser={isPasswordlessUser}
+          simpleGrid={simpleGrid}
+        />
+      )}
+    </GroupCallLoader>
+  );
+}
--- a/src/room/RoomRedirect.jsx
+++ b/src/room/RoomRedirect.jsx
@@ -0,0 +1,25 @@
+import React, { useEffect } from "react";
+import { useLocation, useHistory } from "react-router-dom";
+import { defaultHomeserverHost } from "../matrix-utils";
+import { LoadingView } from "../FullScreenView";
+
+export function RoomRedirect() {
+  const { pathname } = useLocation();
+  const history = useHistory();
+
+  useEffect(() => {
+    let roomId = pathname;
+
+    if (pathname.startsWith("/")) {
+      roomId = roomId.substring(1, roomId.length);
+    }
+
+    if (!roomId.startsWith("#") && !roomId.startsWith("!")) {
+      roomId = `#${roomId}:${defaultHomeserverHost}`;
+    }
+
+    history.replace(`/room/${roomId}`);
+  }, [pathname, history]);
+
+  return <LoadingView />;
+}
--- a/src/room/useLoadGroupCall.js
+++ b/src/room/useLoadGroupCall.js
@@ -0,0 +1,54 @@
+import { useState, useEffect } from "react";
+
+async function fetchGroupCall(
+  client,
+  roomIdOrAlias,
+  viaServers = undefined,
+  timeout = 5000
+) {
+  const { roomId } = await client.joinRoom(roomIdOrAlias, { viaServers });
+
+  return new Promise((resolve, reject) => {
+    let timeoutId;
+
+    function onGroupCallIncoming(groupCall) {
+      if (groupCall && groupCall.room.roomId === roomId) {
+        clearTimeout(timeoutId);
+        client.removeListener("GroupCall.incoming", onGroupCallIncoming);
+        resolve(groupCall);
+      }
+    }
+
+    const groupCall = client.getGroupCallForRoom(roomId);
+
+    if (groupCall) {
+      resolve(groupCall);
+    }
+
+    client.on("GroupCall.incoming", onGroupCallIncoming);
+
+    if (timeout) {
+      timeoutId = setTimeout(() => {
+        client.removeListener("GroupCall.incoming", onGroupCallIncoming);
+        reject(new Error("Fetching group call timed out."));
+      }, timeout);
+    }
+  });
+}
+
+export function useLoadGroupCall(client, roomId, viaServers) {
+  const [state, setState] = useState({
+    loading: true,
+    error: undefined,
+    groupCall: undefined,
+  });
+
+  useEffect(() => {
+    setState({ loading: true });
+    fetchGroupCall(client, roomId, viaServers, 30000)
+      .then((groupCall) => setState({ loading: false, groupCall }))
+      .catch((error) => setState({ loading: false, error }));
+  }, [client, roomId]);
+
+  return state;
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Robert Long	e76a805c8f	Better logging of to device events / usernames	2022-02-17 14:08:53 -08:00
Robert Long	9fc4af2bd7	Add version to console, rageshake, and settings modal	2022-02-16 11:29:43 -08:00
Robert Long	0f3a7f9fd9	Prevent scroll in call view	2022-02-16 11:17:33 -08:00
Robert Long	1cc634509b	Add protocol to copied room url	2022-02-16 10:52:07 -08:00
Robert Long	cb07ce32cb	Fix room not found view	2022-02-15 15:00:06 -08:00
Robert Long	6866d662f7	Automatically switch to spotlight layout on screenshare	2022-02-15 14:49:50 -08:00
Robert Long	51a2027d64	Fix screenshare button styling	2022-02-15 12:58:55 -08:00
Robert Long	0f6b8f9bb1	New incremental auth	2022-02-15 12:46:58 -08:00
Robert Long	63229ce2d7	Fix video grid story	2022-02-14 14:49:19 -08:00
Robert Long	1d620910c5	Only show name when focused or more than 2 participants	2022-02-14 14:48:12 -08:00
Robert Long	47357b3fc6	Add room not found view	2022-02-14 13:53:19 -08:00
Robert Long	3ed35f9477	Fix deprecated usage of substr	2022-02-14 12:35:39 -08:00
Robert Long	a369444b62	Convert room id to lowercase	2022-02-14 12:35:07 -08:00
Robert Long	742d658021	Center align call tile contents	2022-02-14 12:19:54 -08:00
Robert Long	681c24a0ca	Fix focusing in freedom layout	2022-02-14 11:14:09 -08:00
Robert Long	fc057bf988	Prevent opening multiple tabs of the same account	2022-02-10 17:10:36 -08:00
Robert Long	51561e2f4e	Set rageshake submit url for prod	2022-02-07 16:16:51 -08:00
Robert Long	4168540017	Added group_call_rageshake_request_id for rageshake grouping	2022-02-07 15:24:43 -08:00
Robert Long	942630c2fc	Merge pull request #207 from vector-im/revert-206-michaelk/rename_groupcall.txt Revert "Rename groupcall.txt -> groupcall.json."	2022-02-07 15:23:14 -08:00
Robert Long	9251cd9964	Revert "Rename groupcall.txt -> groupcall.json."	2022-02-07 15:23:00 -08:00
Robert Long	145826d1f3	Merge pull request #206 from michaelkaye/michaelk/rename_groupcall.txt Rename groupcall.txt -> groupcall.json.	2022-02-07 15:09:13 -08:00
Michael Kaye	5e42881c5c	Rename groupcall.txt -> groupcall.json. This will stop groupcall.txt being handled as a 'log file' and instead indicate it's an artifact to be stored alongside the rageshake. The file will still be stored on the rageshake server but the extension will indicate it's not a log file.	2022-02-07 15:28:46 +00:00
Robert Long	0824bfb4ed	Update copy and feedback icon	2022-02-04 17:00:58 -08:00
Robert Long	6ec9e4b666	Add rageshake request modal	2022-02-04 16:55:57 -08:00
Robert Long	ec447429c5	Autofocus join call button when ready	2022-02-04 12:38:40 -08:00
Robert Long	9c3e4907c8	Move join room button	2022-02-04 12:31:59 -08:00
Robert Long	cde352bcae	Merge branch 'main' of github.com:vector-im/matrix-video-chat	2022-02-03 17:28:13 -08:00
Robert Long	2d2400edae	Fix active speaker focusing	2022-02-03 17:28:10 -08:00
Matthew Hodgson	7c80682b08	quick hack to improve ILAG copy	2022-02-04 01:24:05 +00:00
Robert Long	1d8cd8c3c8	Add useLocationNavigation to fix navigation during browser media prompts	2022-02-03 16:56:13 -08:00
Robert Long	a33d1364b6	Fix null recaptcha target	2022-02-03 14:18:34 -08:00
Robert Long	a189f3ad98	Fix page titles	2022-02-02 21:48:44 -08:00
Robert Long	f3cee359c0	Update VideoGrid story	2022-02-02 18:32:23 -08:00
Robert Long	be45c0319e	Fix InCallView	2022-02-02 16:05:15 -08:00
Robert Long	dec47d21c0	Merge branch 'main' into robertlong/spotlight-layout	2022-02-02 15:15:39 -08:00
Robert Long	c4f335ebb6	Prevent navigation from login / logout links in user menu in room	2022-02-02 15:09:16 -08:00
Robert Long	35c11660a3	Add configurable / dynamic page title	2022-02-02 15:02:40 -08:00
Robert Long	089c891a55	Fix TOS copy	2022-02-02 14:31:11 -08:00
Robert Long	3f60cd0386	Add feedback description input	2022-02-02 13:30:36 -08:00
Robert Long	ef8021e1a8	callId -> conf_id	2022-02-02 13:23:09 -08:00
Robert Long	8ab68ed8c8	Add rageshake submit state	2022-02-01 15:39:45 -08:00
Robert Long	76b2e8b29e	Add debug log inspector / rageshake	2022-02-01 15:11:06 -08:00
Matthew Hodgson	91366585ff	CONTRIBUTING.md	2022-01-26 17:55:52 +00:00
Robert Long	21e4516bc3	Fix tab padding	2022-01-21 17:02:24 -08:00
Robert Long	f8b4331ec7	Use avatar component for rooms	2022-01-21 16:41:00 -08:00
Robert Long	f7cb015390	Add copyable User Id field	2022-01-21 16:36:21 -08:00
Robert Long	f2c3c82d3a	Fix uploading avatars	2022-01-21 16:33:43 -08:00
Robert Long	48f3f430da	Update tabs for mobile	2022-01-21 15:43:03 -08:00
Robert Long	d6fb0e836d	Fix storybook	2022-01-21 15:42:21 -08:00
Robert Long	fddc8a1209	Don't center content in call ended screen	2022-01-21 13:30:23 -08:00
Robert Long	6032f6ba44	Fix avatar sizing	2022-01-21 13:21:23 -08:00
Robert Long	d1368f4622	Add avatar when muted in lobby	2022-01-21 11:55:10 -08:00
Robert Long	6da369f3fe	Disable facepile	2022-01-21 11:10:12 -08:00
Robert Long	289f7285ae	Your Name -> Username	2022-01-21 11:06:43 -08:00
Robert Long	da69dd8320	Fix selected select input text color	2022-01-21 11:04:01 -08:00
Robert Long	d7d38c1ba9	Fix button tooltips	2022-01-20 13:03:54 -08:00
Robert Long	abae58489c	Fix focus styles	2022-01-18 16:03:49 -08:00
Robert Long	d4fec73d64	Revert filtering onClick in Button	2022-01-18 16:03:40 -08:00
Robert Long	a8cb9f290a	Remove console log	2022-01-18 15:25:16 -08:00
Robert Long	251f6a92a9	Filter onClick from button props	2022-01-18 15:25:02 -08:00
Robert Long	9163d5a25d	Clean up vite warning messages about server.fs.strict	2022-01-18 15:16:34 -08:00
Robert Long	3ee4058dce	Remove unnecessary typescript config	2022-01-18 15:16:10 -08:00
Robert Long	a8d6f21af9	Update dependencies	2022-01-18 15:15:59 -08:00
Robert Long	78eff5fa9e	Ensure webcam is turned off when leaving	2022-01-18 14:56:15 -08:00
Robert Long	6311a869f9	Fix button prop warnings	2022-01-18 14:25:02 -08:00
Robert Long	98355edf92	Fix username regex	2022-01-18 13:52:16 -08:00
Robert Long	c71f37a8f8	Fix registration display name	2022-01-18 13:41:14 -08:00
Robert Long	97ab7ee2c0	Fix user menu styles	2022-01-18 13:34:42 -08:00
Robert Long	d6567658c0	Remove recaptcha debug logging	2022-01-18 11:53:45 -08:00
Robert Long	8df13ee7c8	Sitekey change should update execute method	2022-01-18 11:49:59 -08:00
Robert Long	36d59c98c0	Add recaptcha debugging	2022-01-18 11:47:10 -08:00
Robert Long	f6b3d6830e	Fix logo height in chrome	2022-01-14 14:17:51 -08:00
Robert Long	a7ba511278	Fix remoteUserIds	2022-01-14 13:52:33 -08:00
Robert Long	5819654bc7	Update group call inspector	2022-01-14 13:40:02 -08:00
Robert Long	3d571a00c6	Add sequence diagrams to inspector	2022-01-13 14:11:06 -08:00
Robert Long	3c30ca5f95	Merge branch 'main' of github.com:vector-im/matrix-video-chat	2022-01-12 13:47:49 -08:00
Robert Long	cb2cce243a	Update GroupCallInspector	2022-01-12 13:47:46 -08:00
Robert Long	19fe760833	Add VideoGrid storybook	2022-01-07 16:20:55 -08:00
Robert Long	5f4ac97787	Fix InCallView	2022-01-07 11:42:36 -08:00
Robert Long	e9fc90c55b	Merge branch 'main' into robertlong/spotlight-layout	2022-01-07 11:42:23 -08:00
Robert Long	096460ecfe	Make recaptcha optional	2022-01-07 11:31:53 -08:00
Robert Long	86ccc2431e	Add TODO for duplicate calls to initLocalCallFeed	2022-01-06 16:52:15 -08:00
Robert Long	bcd58aae90	Set use authorizization header	2022-01-06 16:51:23 -08:00
Robert Long	c609d42554	Clean up recaptcha copy	2022-01-06 15:46:39 -08:00
Robert Long	b3b73e9874	Await changePassword on register page	2022-01-06 15:27:05 -08:00
Robert Long	f6c5484d1b	Add sent voip events to debugger	2022-01-06 15:24:35 -08:00
Robert Long	4efcc53628	fix style undefined	2022-01-06 14:16:31 -08:00
Robert Long	4be14159c5	Add user menu to room auth view	2022-01-06 14:10:33 -08:00
Robert Long	22f8fef87d	Fix login link	2022-01-06 14:02:23 -08:00
Robert Long	d1e645fbc0	Fix restoring sessions	2022-01-06 13:33:13 -08:00
Robert Long	aa6bbbaaa0	Fix link component	2022-01-06 13:14:15 -08:00
Robert Long	627c64dca3	Update spotlight icon	2022-01-06 11:13:52 -08:00
Robert Long	7d08ea2143	Fix useLoadGroupCall	2022-01-06 11:13:42 -08:00
Robert Long	3cb59aebf5	Move inputs and profile components	2022-01-05 17:27:01 -08:00
Robert Long	2b1a523973	Move popover	2022-01-05 17:21:30 -08:00
Robert Long	546ab06d60	Refactor matrix hooks	2022-01-05 17:19:03 -08:00
Robert Long	0e407c08df	Remove public rooms	2022-01-05 17:02:56 -08:00
Robert Long	ca18873a1b	Move join existing call modal	2022-01-05 17:00:02 -08:00
Robert Long	ebf61511f1	Clean up remaining room components	2022-01-05 16:58:55 -08:00
Robert Long	73eacdb23f	Clean up overflow menu	2022-01-05 16:55:41 -08:00
Robert Long	3fac266013	Clean up settings modal	2022-01-05 16:54:13 -08:00
Robert Long	6621e20da3	Clean up useLoadGroupCall	2022-01-05 16:51:24 -08:00
Robert Long	0adc4b3d66	Clean up old auth logic	2022-01-05 16:47:53 -08:00
Robert Long	8a452d80e2	Refactor auth pages	2022-01-05 16:34:01 -08:00
Robert Long	71986f6001	Fix call list alignment	2022-01-05 16:12:58 -08:00
Robert Long	eb4207e41d	Add room auth view	2022-01-05 16:09:51 -08:00
Robert Long	0fe38000f5	Refactor room loading components	2022-01-05 15:35:12 -08:00
Robert Long	550c45b69e	Clean up room-related components	2022-01-05 15:06:51 -08:00
Robert Long	8be578763d	Split out lobby view	2022-01-05 13:09:12 -08:00
Robert Long	3ec01293e6	Fix dismissing existing room modal	2022-01-05 11:52:50 -08:00
Robert Long	3d3663c540	Fix header font weight	2022-01-05 11:52:23 -08:00
Robert Long	095b0287f0	Fix call list styling	2022-01-05 11:52:13 -08:00
Robert Long	d59f0e748d	Fix dismissing recaptcha	2022-01-04 17:57:23 -08:00
Robert Long	24ccfa0dd8	Fix creating room as registered user	2022-01-04 17:13:45 -08:00
Robert Long	0e273a6dc5	Fix go button style	2022-01-04 17:13:26 -08:00
Robert Long	f4936f221f	Clean up registration page	2022-01-04 17:09:27 -08:00
Robert Long	ef8c28f274	Redesign homepage WIP	2022-01-04 16:00:13 -08:00
Robert Long	eb620e9220	Refactor header	2021-12-23 14:40:23 -08:00
Robert Long	87e5cafb77	Add storybook	2021-12-23 12:45:00 -08:00
Robert Long	ffc5208865	Sort tiles by presenter	2021-12-21 15:56:48 -08:00
Robert Long	fe724783ff	Setup for spotlight layout refactor	2021-12-21 14:24:47 -08:00
Robert Long	658424efa0	Disable focusing tiles in spotlight layout	2021-12-21 11:57:26 -08:00
Robert Long	ab73a351f8	Add recaptcha	2021-12-20 15:56:39 -08:00
Robert Long	d45d37b18a	Merge branch 'main' of github.com:vector-im/matrix-video-chat	2021-12-20 13:15:37 -08:00
Robert Long	66e5ec976b	Add privacy policy flow	2021-12-20 13:15:35 -08:00
David Baker	b65874a6fc	export variables	2021-12-20 21:00:06 +00:00
David Baker	28b7e76ce0	Merge pull request #166 from vector-im/dbkr/fix_nginx Fix docker build	2021-12-20 20:24:53 +00:00
David Baker	31845dea10	Fix docker build and add catchall route	2021-12-20 20:05:05 +00:00
David Baker	b1a75a5033	Merge pull request #165 from vector-im/dbkr/nginx_unpriv Use unprivilged nginx image	2021-12-20 18:47:07 +00:00
David Baker	032d623acb	Use unprivilged nginx image	2021-12-20 18:43:45 +00:00