Merge pull request #567 from vector-im/dbkr/waitUntilRoomReadyForGroupCalls

Use new method to wait until a room is ready for group calls

.env.example

@@ -22,7 +22,9 @@
 # VITE_THEME_PRIMARY_CONTENT=#ffffff
 # VITE_THEME_SECONDARY_CONTENT=#a9b2bc
 # VITE_THEME_TERTIARY_CONTENT=#8e99a4
+# VITE_THEME_TERTIARY_CONTENT_20=#8e99a433
 # VITE_THEME_QUATERNARY_CONTENT=#6f7882
 # VITE_THEME_QUINARY_CONTENT=#394049
 # VITE_THEME_SYSTEM=#21262c
 # VITE_THEME_BACKGROUND=#15191e
+# VITE_THEME_BACKGROUND_85=#15191ed9

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,67 @@
+name: Bug report
+description: Create a report to help us improve
+labels: [T-Defect]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+
+        Please report security issues by email to security@matrix.org
+  - type: textarea
+    id: reproduction-steps
+    attributes:
+      label: Steps to reproduce
+      description: Please attach screenshots, videos or logs if you can.
+      placeholder: Tell us what you see!
+      value: |
+        1. Where are you starting? What can you see?
+        2. What do you click?
+        3. More steps…
+    validations:
+      required: true
+  - type: textarea
+    id: result
+    attributes:
+      label: Outcome
+      placeholder: Tell us what went wrong
+      value: |
+        #### What did you expect?
+
+        #### What happened instead?
+    validations:
+      required: true
+  - type: input
+    id: os
+    attributes:
+      label: Operating system
+      placeholder: Windows, macOS, Ubuntu, Android…
+    validations:
+      required: false
+  - type: input
+    id: browser
+    attributes:
+      label: Browser information
+      description: Which browser are you using? Which version? 
+      placeholder: e.g. Chromium Version 92.0.4515.131
+    validations:
+      required: false
+  - type: input
+    id: webapp-url
+    attributes:
+      label: URL for webapp
+      description: Which URL are you using to access the webapp? If a private server, tell us what version of Element Call you are using.
+      placeholder: e.g. call.element.io
+    validations:
+      required: false
+  - type: dropdown
+    id: rageshake
+    attributes:
+      label: Will you send logs?
+      description:  |
+        To send them, press the 'Submit Feedback' button and check 'Include Debug Logs'. Please link to this issue in the description field.
+      options:
+        - 'Yes'
+        - 'No'
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Questions & support
+    url: https://matrix.to/#/#webrtc:matrix.org
+    about: Please ask and answer questions here.

.github/ISSUE_TEMPLATE/enhancement.yml

@@ -0,0 +1,36 @@
+name: Enhancement request
+description: Do you have a suggestion or feature request?
+labels: [T-Enhancement]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for taking the time to propose a new feature or make a suggestion.
+  - type: textarea
+    id: usecase
+    attributes:
+      label: Your use case
+      description: What would you like to be able to do? Please feel welcome to include screenshots or mock ups.
+      placeholder: Tell us what you would like to do!
+      value: |
+        #### What would you like to do?
+
+        #### Why would you like to do it?
+
+        #### How would you like to achieve it?
+    validations:
+      required: true
+  - type: textarea
+    id: alternative
+    attributes:
+      label: Have you considered any alternatives?
+      placeholder: A clear and concise description of any alternative solutions or features you've considered.
+    validations:
+      required: false
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      placeholder: Is there anything else you'd like to add?
+    validations:
+      required: false

.github/workflows/publish.yaml

@@ -32,10 +32,14 @@ jobs:
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@dc7b9719a96d48369863986a06765841d7ea23f6
+
       - name: Build and push Docker image
         uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
         with:
           context: .
+          platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 .DS_Store
+.env
 dist
 dist-ssr
 *.local

.vscode/settings.json

@@ -2,5 +2,21 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.insertSpaces": true,
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "[typescriptreact]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+  },
+  "[javascriptreact]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+  },
+  "[javascript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+  }
 }

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16-buster as builder
+FROM --platform=$BUILDPLATFORM node:16-buster as builder
 
 WORKDIR /src
 

README.md

@@ -27,6 +27,7 @@ git clone https://github.com/vector-im/element-call.git
 cd element-call
 yarn
 yarn link matrix-js-sdk
+cp .env.example .env
 yarn dev
 ```
 

package.json

@@ -8,6 +8,7 @@
     "build-storybook": "build-storybook",
     "prettier:check": "prettier -c src",
     "prettier:format": "prettier -w src",
+    "lint": "yarn lint:types && yarn lint:js",
     "lint:js": "eslint --max-warnings 0 src",
     "lint:types": "tsc"
   },
@@ -32,15 +33,17 @@
     "@sentry/react": "^6.13.3",
     "@sentry/tracing": "^6.13.3",
     "@types/grecaptcha": "^3.0.4",
+    "@types/sdp-transform": "^2.4.5",
     "@use-gesture/react": "^10.2.11",
     "classnames": "^2.3.1",
     "color-hash": "^2.0.1",
     "events": "^3.3.0",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#aa0d3bd1f5a006d151f826e6b8c5f286abb6e960",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#98d119d6e1d39f1c5b01b36e7fda133e9f12f50c",
+    "matrix-widget-api": "^1.0.0",
     "mermaid": "^8.13.8",
     "normalize.css": "^8.0.1",
     "pako": "^2.0.4",
-    "postcss-preset-env": "^6.7.0",
+    "postcss-preset-env": "^7",
     "re-resizable": "^6.9.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
@@ -49,6 +52,7 @@
     "react-router-dom": "^5.2.0",
     "react-use-clipboard": "^1.0.7",
     "react-use-measure": "^2.1.1",
+    "sdp-transform": "^2.14.1",
     "unique-names-generator": "^4.6.0"
   },
   "devDependencies": {

src/@types/global.d.ts

@@ -21,4 +21,10 @@ declare global {
     // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
     OLM_OPTIONS: Record<string, string>;
   }
+
+  // TypeScript doesn't know about the experimental setSinkId method, so we
+  // declare it ourselves
+  interface MediaElement extends HTMLVideoElement {
+    setSinkId: (id: string) => void;
+  }
 }

src/App.tsx

@@ -18,6 +18,7 @@ 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 { HomePage } from "./home/HomePage";
 import { LoginPage } from "./auth/LoginPage";
 import { RegisterPage } from "./auth/RegisterPage";
@@ -26,37 +27,49 @@ import { RoomRedirect } from "./room/RoomRedirect";
 import { ClientProvider } from "./ClientContext";
 import { usePageFocusStyle } from "./usePageFocusStyle";
 import { SequenceDiagramViewerPage } from "./SequenceDiagramViewerPage";
+import { InspectorContextProvider } from "./room/GroupCallInspector";
+import { CrashView } from "./FullScreenView";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
-export default function App({ history }) {
+interface AppProps {
+  history: History;
+}
+
+export default function App({ history }: AppProps) {
   usePageFocusStyle();
 
+  const errorPage = <CrashView />;
+
   return (
     <Router history={history}>
       <ClientProvider>
-        <OverlayProvider>
-          <Switch>
-            <SentryRoute exact path="/">
-              <HomePage />
-            </SentryRoute>
-            <SentryRoute exact path="/login">
-              <LoginPage />
-            </SentryRoute>
-            <SentryRoute exact path="/register">
-              <RegisterPage />
-            </SentryRoute>
-            <SentryRoute path="/room/:roomId?">
-              <RoomPage />
-            </SentryRoute>
-            <SentryRoute path="/inspector">
-              <SequenceDiagramViewerPage />
-            </SentryRoute>
-            <SentryRoute path="*">
-              <RoomRedirect />
-            </SentryRoute>
-          </Switch>
-        </OverlayProvider>
+        <InspectorContextProvider>
+          <Sentry.ErrorBoundary fallback={errorPage}>
+            <OverlayProvider>
+              <Switch>
+                <SentryRoute exact path="/">
+                  <HomePage />
+                </SentryRoute>
+                <SentryRoute exact path="/login">
+                  <LoginPage />
+                </SentryRoute>
+                <SentryRoute exact path="/register">
+                  <RegisterPage />
+                </SentryRoute>
+                <SentryRoute path="/room/:roomId?">
+                  <RoomPage />
+                </SentryRoute>
+                <SentryRoute path="/inspector">
+                  <SequenceDiagramViewerPage />
+                </SentryRoute>
+                <SentryRoute path="*">
+                  <RoomRedirect />
+                </SentryRoute>
+              </Switch>
+            </OverlayProvider>
+          </Sentry.ErrorBoundary>
+        </InspectorContextProvider>
       </ClientProvider>
     </Router>
   );

src/Avatar.tsx

@@ -48,11 +48,11 @@ const resolveAvatarSrc = (client: MatrixClient, src: string, size: number) =>
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   bgKey?: string;
-  src: string;
-  fallback: string;
+  src?: string;
   size?: Size | number;
-  className: string;
+  className?: string;
   style?: CSSProperties;
+  fallback: string;
 }
 
 export const Avatar: React.FC<Props> = ({

src/ClientContext.tsx

@@ -26,9 +26,15 @@ import React, {
 import { useHistory } from "react-router-dom";
 import { MatrixClient, ClientEvent } from "matrix-js-sdk/src/client";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { ErrorView } from "./FullScreenView";
-import { initClient, defaultHomeserver } from "./matrix-utils";
+import {
+  initClient,
+  initMatroskaClient,
+  defaultHomeserver,
+  CryptoStoreIntegrityError,
+} from "./matrix-utils";
 
 declare global {
   interface Window {
@@ -62,6 +68,7 @@ interface ClientState {
   changePassword: (password: string) => Promise<void>;
   logout: () => void;
   setClient: (client: MatrixClient, session: Session) => void;
+  error?: Error;
 }
 
 const ClientContext = createContext<ClientState>(null);
@@ -71,7 +78,11 @@ type ClientProviderState = Omit<
   "changePassword" | "logout" | "setClient"
 > & { error?: Error };
 
-export const ClientProvider: FC = ({ children }) => {
+interface Props {
+  children: JSX.Element;
+}
+
+export const ClientProvider: FC<Props> = ({ children }) => {
   const history = useHistory();
   const [
     { loading, isAuthenticated, isPasswordlessUser, client, userName, error },
@@ -86,37 +97,78 @@ export const ClientProvider: FC = ({ children }) => {
   });
 
   useEffect(() => {
-    const restore = async (): Promise<
+    const init = async (): Promise<
       Pick<ClientProviderState, "client" | "isPasswordlessUser">
     > => {
-      try {
-        const session = loadSession();
+      const query = new URLSearchParams(window.location.search);
+      const widgetId = query.get("widgetId");
+      const parentUrl = query.get("parentUrl");
+
+      if (widgetId && parentUrl) {
+        // We're inside a widget, so let's engage *Matroska mode*
+        logger.log("Using a Matroska client");
+
+        return {
+          client: await initMatroskaClient(widgetId, parentUrl),
+          isPasswordlessUser: false,
+        };
+      } else {
+        // We're running as a standalone application
+        try {
+          const session = loadSession();
+          if (!session) return { client: undefined, isPasswordlessUser: false };
+
+          logger.log("Using a standalone client");
 
-        if (session) {
           /* eslint-disable camelcase */
           const { user_id, device_id, access_token, passwordlessUser } =
             session;
 
-          const client = await initClient({
-            baseUrl: defaultHomeserver,
-            accessToken: access_token,
-            userId: user_id,
-            deviceId: device_id,
-          });
+          try {
+            return {
+              client: await initClient(
+                {
+                  baseUrl: defaultHomeserver,
+                  accessToken: access_token,
+                  userId: user_id,
+                  deviceId: device_id,
+                },
+                true
+              ),
+              isPasswordlessUser: passwordlessUser,
+            };
+          } catch (err) {
+            if (err instanceof CryptoStoreIntegrityError) {
+              // We can't use this session anymore, so let's log it out
+              try {
+                const client = await initClient(
+                  {
+                    baseUrl: defaultHomeserver,
+                    accessToken: access_token,
+                    userId: user_id,
+                    deviceId: device_id,
+                  },
+                  false // Don't need the crypto store just to log out
+                );
+                await client.logout(undefined, true);
+              } catch (err_) {
+                logger.warn(
+                  "The previous session was lost, and we couldn't log it out, " +
+                    "either"
+                );
+              }
+            }
+            throw err;
+          }
           /* eslint-enable camelcase */
-
-          return { client, isPasswordlessUser: passwordlessUser };
+        } catch (err) {
+          clearSession();
+          throw err;
         }
-
-        return { client: undefined, isPasswordlessUser: false };
-      } catch (err) {
-        console.error(err);
-        clearSession();
-        throw err;
       }
     };
 
-    restore()
+    init()
       .then(({ client, isPasswordlessUser }) => {
         setState({
           client,
@@ -124,15 +176,18 @@ export const ClientProvider: FC = ({ children }) => {
           isAuthenticated: Boolean(client),
           isPasswordlessUser,
           userName: client?.getUserIdLocalpart(),
+          error: undefined,
         });
       })
-      .catch(() => {
+      .catch((err) => {
+        logger.error(err);
         setState({
           client: undefined,
           loading: false,
           isAuthenticated: false,
           isPasswordlessUser: false,
           userName: null,
+          error: undefined,
         });
       });
   }, []);
@@ -162,6 +217,7 @@ export const ClientProvider: FC = ({ children }) => {
         isAuthenticated: true,
         isPasswordlessUser: false,
         userName: client.getUserIdLocalpart(),
+        error: undefined,
       });
     },
     [client]
@@ -182,6 +238,7 @@ export const ClientProvider: FC = ({ children }) => {
           isAuthenticated: true,
           isPasswordlessUser: session.passwordlessUser,
           userName: newClient.getUserIdLocalpart(),
+          error: undefined,
         });
       } else {
         clearSession();
@@ -192,6 +249,7 @@ export const ClientProvider: FC = ({ children }) => {
           isAuthenticated: false,
           isPasswordlessUser: false,
           userName: null,
+          error: undefined,
         });
       }
     },
@@ -250,6 +308,7 @@ export const ClientProvider: FC = ({ children }) => {
       logout,
       userName,
       setClient,
+      error: undefined,
     }),
     [
       loading,

src/Facepile.jsx

@@ -1,59 +0,0 @@
-import React from "react";
-import styles from "./Facepile.module.css";
-import classNames from "classnames";
-import { Avatar, sizes } from "./Avatar";
-
-const overlapMap = {
-  xs: 2,
-  sm: 4,
-  md: 8,
-};
-
-export function Facepile({
-  className,
-  client,
-  participants,
-  max,
-  size,
-  ...rest
-}) {
-  const _size = sizes.get(size);
-  const _overlap = overlapMap[size];
-
-  return (
-    <div
-      className={classNames(styles.facepile, styles[size], className)}
-      title={participants.map((member) => member.name).join(", ")}
-      style={{ width: participants.length * (_size - _overlap) + _overlap }}
-      {...rest}
-    >
-      {participants.slice(0, max).map((member, i) => {
-        const avatarUrl = member.user?.avatarUrl;
-        return (
-          <Avatar
-            key={member.userId}
-            size={size}
-            src={avatarUrl}
-            fallback={member.name.slice(0, 1).toUpperCase()}
-            className={styles.avatar}
-            style={{ left: i * (_size - _overlap) }}
-          />
-        );
-      })}
-      {participants.length > max && (
-        <Avatar
-          key="additional"
-          size={size}
-          fallback={`+${participants.length - max}`}
-          className={styles.avatar}
-          style={{ left: max * (_size - _overlap) }}
-        />
-      )}
-    </div>
-  );
-}
-
-Facepile.defaultProps = {
-  max: 3,
-  size: "xs",
-};

src/Facepile.tsx

@@ -0,0 +1,85 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { HTMLAttributes } from "react";
+import classNames from "classnames";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+
+import styles from "./Facepile.module.css";
+import { Avatar, Size, sizes } from "./Avatar";
+
+const overlapMap: Partial<Record<Size, number>> = {
+  [Size.XS]: 2,
+  [Size.SM]: 4,
+  [Size.MD]: 8,
+};
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  className: string;
+  client: MatrixClient;
+  participants: RoomMember[];
+  max?: number;
+  size?: Size;
+}
+
+export function Facepile({
+  className,
+  client,
+  participants,
+  max = 3,
+  size = Size.XS,
+  ...rest
+}: Props) {
+  const _size = sizes.get(size);
+  const _overlap = overlapMap[size];
+
+  return (
+    <div
+      className={classNames(styles.facepile, styles[size], className)}
+      title={participants.map((member) => member.name).join(", ")}
+      style={{
+        width:
+          Math.min(participants.length, max + 1) * (_size - _overlap) +
+          _overlap,
+      }}
+      {...rest}
+    >
+      {participants.slice(0, max).map((member, i) => {
+        const avatarUrl = member.user?.avatarUrl;
+        return (
+          <Avatar
+            key={member.userId}
+            size={size}
+            src={avatarUrl}
+            fallback={member.name.slice(0, 1).toUpperCase()}
+            className={styles.avatar}
+            style={{ left: i * (_size - _overlap) }}
+          />
+        );
+      })}
+      {participants.length > max && (
+        <Avatar
+          key="additional"
+          size={size}
+          fallback={`+${participants.length - max}`}
+          className={styles.avatar}
+          style={{ left: max * (_size - _overlap) }}
+        />
+      )}
+    </div>
+  );
+}

src/FullScreenView.jsx

@@ -1,68 +0,0 @@
-import React, { useCallback, useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import styles from "./FullScreenView.module.css";
-import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
-import classNames from "classnames";
-import { LinkButton, Button } from "./button";
-
-export function FullScreenView({ className, children }) {
-  return (
-    <div className={classNames(styles.page, className)}>
-      <Header>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
-        <RightNav />
-      </Header>
-      <div className={styles.container}>
-        <div className={styles.content}>{children}</div>
-      </div>
-    </div>
-  );
-}
-
-export function ErrorView({ error }) {
-  const location = useLocation();
-
-  useEffect(() => {
-    console.error(error);
-  }, [error]);
-
-  const onReload = useCallback(() => {
-    window.location = "/";
-  }, []);
-
-  return (
-    <FullScreenView>
-      <h1>Error</h1>
-      <p>{error.message}</p>
-      {location.pathname === "/" ? (
-        <Button
-          size="lg"
-          variant="default"
-          className={styles.homeLink}
-          onPress={onReload}
-        >
-          Return to home screen
-        </Button>
-      ) : (
-        <LinkButton
-          size="lg"
-          variant="default"
-          className={styles.homeLink}
-          to="/"
-        >
-          Return to home screen
-        </LinkButton>
-      )}
-    </FullScreenView>
-  );
-}
-
-export function LoadingView() {
-  return (
-    <FullScreenView>
-      <h1>Loading...</h1>
-    </FullScreenView>
-  );
-}

src/FullScreenView.module.css

@@ -36,6 +36,12 @@
   margin-bottom: 0;
 }
 
-.homeLink {
+/* Make the buttons the same width */
+.wideButton {
   width: 291px;
 }
+
+/* Fixed height to avoid content jumping around*/
+.sendLogsSection {
+  height: 50px;
+}

src/FullScreenView.tsx

@@ -0,0 +1,130 @@
+import React, { ReactNode, useCallback, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import classNames from "classnames";
+
+import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
+import { LinkButton, Button } from "./button";
+import { useSubmitRageshake } from "./settings/submit-rageshake";
+import { ErrorMessage } from "./input/Input";
+import styles from "./FullScreenView.module.css";
+
+interface FullScreenViewProps {
+  className?: string;
+  children: ReactNode;
+}
+
+export function FullScreenView({ className, children }: FullScreenViewProps) {
+  return (
+    <div className={classNames(styles.page, className)}>
+      <Header>
+        <LeftNav>
+          <HeaderLogo />
+        </LeftNav>
+        <RightNav />
+      </Header>
+      <div className={styles.container}>
+        <div className={styles.content}>{children}</div>
+      </div>
+    </div>
+  );
+}
+
+interface ErrorViewProps {
+  error: Error;
+}
+
+export function ErrorView({ error }: ErrorViewProps) {
+  const location = useLocation();
+
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  const onReload = useCallback(() => {
+    window.location.href = "/";
+  }, []);
+
+  return (
+    <FullScreenView>
+      <h1>Error</h1>
+      <p>{error.message}</p>
+      {location.pathname === "/" ? (
+        <Button
+          size="lg"
+          variant="default"
+          className={styles.homeLink}
+          onPress={onReload}
+        >
+          Return to home screen
+        </Button>
+      ) : (
+        <LinkButton
+          size="lg"
+          variant="default"
+          className={styles.homeLink}
+          to="/"
+        >
+          Return to home screen
+        </LinkButton>
+      )}
+    </FullScreenView>
+  );
+}
+
+export function CrashView() {
+  const { submitRageshake, sending, sent, error } = useSubmitRageshake();
+
+  const sendDebugLogs = useCallback(() => {
+    submitRageshake({
+      description: "**Soft Crash**",
+      sendLogs: true,
+    });
+  }, [submitRageshake]);
+
+  const onReload = useCallback(() => {
+    window.location.href = "/";
+  }, []);
+
+  let logsComponent;
+  if (sent) {
+    logsComponent = <div>Thanks! We'll get right on it.</div>;
+  } else if (sending) {
+    logsComponent = <div>Sending...</div>;
+  } else {
+    logsComponent = (
+      <Button
+        size="lg"
+        variant="default"
+        onPress={sendDebugLogs}
+        className={styles.wideButton}
+      >
+        Send debug logs
+      </Button>
+    );
+  }
+
+  return (
+    <FullScreenView>
+      <h1>Oops, something's gone wrong.</h1>
+      <p>Submitting debug logs will help us track down the problem.</p>
+      <div className={styles.sendLogsSection}>{logsComponent}</div>
+      {error && <ErrorMessage>Couldn't send debug logs!</ErrorMessage>}
+      <Button
+        size="lg"
+        variant="default"
+        className={styles.wideButton}
+        onPress={onReload}
+      >
+        Return to home screen
+      </Button>
+    </FullScreenView>
+  );
+}
+
+export function LoadingView() {
+  return (
+    <FullScreenView>
+      <h1>Loading...</h1>
+    </FullScreenView>
+  );
+}

src/Header.jsx

@@ -1,86 +0,0 @@
-import classNames from "classnames";
-import React, { useRef } from "react";
-import { Link } from "react-router-dom";
-import styles from "./Header.module.css";
-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 (
-    <header className={classNames(styles.header, className)} {...rest}>
-      {children}
-    </header>
-  );
-}
-
-export function LeftNav({ children, className, hideMobile, ...rest }) {
-  return (
-    <div
-      className={classNames(
-        styles.nav,
-        styles.leftNav,
-        { [styles.hideMobile]: hideMobile },
-        className
-      )}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}
-
-export function RightNav({ children, className, hideMobile, ...rest }) {
-  return (
-    <div
-      className={classNames(
-        styles.nav,
-        styles.rightNav,
-        { [styles.hideMobile]: hideMobile },
-        className
-      )}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}
-
-export function HeaderLogo({ className }) {
-  return (
-    <Link className={classNames(styles.headerLogo, className)} to="/">
-      <Logo />
-    </Link>
-  );
-}
-
-export function RoomHeaderInfo({ roomName, avatarUrl }) {
-  return (
-    <>
-      <div className={styles.roomAvatar}>
-        <Avatar
-          size="md"
-          src={avatarUrl}
-          bgKey={roomName}
-          fallback={roomName.slice(0, 1).toUpperCase()}
-        />
-        <VideoIcon width={16} height={16} />
-      </div>
-      <Subtitle fontWeight="semiBold">{roomName}</Subtitle>
-    </>
-  );
-}
-
-export function RoomSetupHeaderInfo({ roomName, avatarUrl, ...rest }) {
-  const ref = useRef();
-  const { buttonProps } = useButton(rest, ref);
-  return (
-    <button className={styles.backButton} ref={ref} {...buttonProps}>
-      <ArrowLeftIcon width={16} height={16} />
-      <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
-    </button>
-  );
-}

src/Header.module.css

@@ -104,6 +104,24 @@
   flex-shrink: 0;
 }
 
+.versionMismatchWarning {
+  padding-left: 15px;
+}
+
+.versionMismatchWarning::before {
+  content: "";
+  display: inline-block;
+  position: relative;
+  top: 1px;
+  width: 16px;
+  height: 16px;
+  mask-image: url("./icons/AlertTriangleFilled.svg");
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  background-color: var(--alert);
+  padding-right: 5px;
+}
+
 @media (min-width: 800px) {
   .headerLogo,
   .roomAvatar,

src/Header.tsx

@@ -0,0 +1,178 @@
+import classNames from "classnames";
+import React, { HTMLAttributes, ReactNode, useCallback, useRef } from "react";
+import { Link } from "react-router-dom";
+import { useButton } from "@react-aria/button";
+import { AriaButtonProps } from "@react-types/button";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import styles from "./Header.module.css";
+import { useModalTriggerState } from "./Modal";
+import { Button } from "./button";
+import { ReactComponent as Logo } from "./icons/Logo.svg";
+import { ReactComponent as VideoIcon } from "./icons/Video.svg";
+import { Subtitle } from "./typography/Typography";
+import { Avatar, Size } from "./Avatar";
+import { IncompatibleVersionModal } from "./IncompatibleVersionModal";
+import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
+
+interface HeaderProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+  className?: string;
+}
+
+export function Header({ children, className, ...rest }: HeaderProps) {
+  return (
+    <header className={classNames(styles.header, className)} {...rest}>
+      {children}
+    </header>
+  );
+}
+
+interface LeftNavProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+  className?: string;
+  hideMobile?: boolean;
+}
+
+export function LeftNav({
+  children,
+  className,
+  hideMobile,
+  ...rest
+}: LeftNavProps) {
+  return (
+    <div
+      className={classNames(
+        styles.nav,
+        styles.leftNav,
+        { [styles.hideMobile]: hideMobile },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface RightNavProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  className?: string;
+  hideMobile?: boolean;
+}
+
+export function RightNav({
+  children,
+  className,
+  hideMobile,
+  ...rest
+}: RightNavProps) {
+  return (
+    <div
+      className={classNames(
+        styles.nav,
+        styles.rightNav,
+        { [styles.hideMobile]: hideMobile },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface HeaderLogoProps {
+  className?: string;
+}
+
+export function HeaderLogo({ className }: HeaderLogoProps) {
+  return (
+    <Link className={classNames(styles.headerLogo, className)} to="/">
+      <Logo />
+    </Link>
+  );
+}
+
+interface RoomHeaderInfo {
+  roomName: string;
+  avatarUrl: string;
+}
+
+export function RoomHeaderInfo({ roomName, avatarUrl }: RoomHeaderInfo) {
+  return (
+    <>
+      <div className={styles.roomAvatar}>
+        <Avatar
+          size={Size.MD}
+          src={avatarUrl}
+          bgKey={roomName}
+          fallback={roomName.slice(0, 1).toUpperCase()}
+        />
+        <VideoIcon width={16} height={16} />
+      </div>
+      <Subtitle fontWeight="semiBold">{roomName}</Subtitle>
+    </>
+  );
+}
+
+interface RoomSetupHeaderInfoProps extends AriaButtonProps<"button"> {
+  roomName: string;
+  avatarUrl: string;
+  isEmbedded: boolean;
+}
+
+export function RoomSetupHeaderInfo({
+  roomName,
+  avatarUrl,
+  isEmbedded,
+  ...rest
+}: RoomSetupHeaderInfoProps) {
+  const ref = useRef();
+  const { buttonProps } = useButton(rest, ref);
+
+  if (isEmbedded) {
+    return (
+      <div ref={ref}>
+        <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
+      </div>
+    );
+  }
+
+  return (
+    <button className={styles.backButton} ref={ref} {...buttonProps}>
+      <ArrowLeftIcon width={16} height={16} />
+      <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
+    </button>
+  );
+}
+
+interface VersionMismatchWarningProps {
+  users: Set<string>;
+  room: Room;
+}
+
+export function VersionMismatchWarning({
+  users,
+  room,
+}: VersionMismatchWarningProps) {
+  const { modalState, modalProps } = useModalTriggerState();
+
+  const onDetailsClick = useCallback(() => {
+    modalState.open();
+  }, [modalState]);
+
+  if (users.size === 0) return null;
+
+  return (
+    <span className={styles.versionMismatchWarning}>
+      Incomaptible versions!
+      <Button variant="link" onClick={onDetailsClick}>
+        Details
+      </Button>
+      {modalState.isOpen && (
+        <IncompatibleVersionModal userIds={users} room={room} {...modalProps} />
+      )}
+    </span>
+  );
+}

src/IncompatibleVersionModal.tsx

@@ -0,0 +1,48 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Room } from "matrix-js-sdk/src/models/room";
+import React from "react";
+
+import { Modal, ModalContent } from "./Modal";
+import { Body } from "./typography/Typography";
+
+interface Props {
+  userIds: Set<string>;
+  room: Room;
+}
+
+export const IncompatibleVersionModal: React.FC<Props> = ({
+  userIds,
+  room,
+  ...rest
+}) => {
+  const userLis = Array.from(userIds).map((u) => (
+    <li>{room.getMember(u).name}</li>
+  ));
+
+  return (
+    <Modal title="Incompatible Versions" isDismissable {...rest}>
+      <ModalContent>
+        <Body>
+          Other users are trying to join this call from incompatible versions.
+          These users should ensure that they have refreshed their browsers:
+          <ul>{userLis}</ul>
+        </Body>
+      </ModalContent>
+    </Modal>
+  );
+};

src/IndexedDBWorker.js

@@ -1,5 +0,0 @@
-import { IndexedDBStoreWorker } from "matrix-js-sdk/src/indexeddb-worker";
-
-const remoteWorker = new IndexedDBStoreWorker(self.postMessage);
-
-self.onmessage = remoteWorker.onMessage;

src/IndexedDBWorker.ts

@@ -0,0 +1,6 @@
+import { IndexedDBStoreWorker } from "matrix-js-sdk/src/indexeddb-worker";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const remoteWorker = new IndexedDBStoreWorker((self as any).postMessage);
+
+self.onmessage = remoteWorker.onMessage;

src/ListBox.jsx

@@ -1,50 +0,0 @@
-import React, { useRef } from "react";
-import { useListBox, useOption } from "@react-aria/listbox";
-import styles from "./ListBox.module.css";
-import classNames from "classnames";
-
-export function ListBox(props) {
-  const ref = useRef();
-  let { listBoxRef = ref, state } = props;
-  const { listBoxProps } = useListBox(props, state, listBoxRef);
-
-  return (
-    <ul
-      {...listBoxProps}
-      ref={listBoxRef}
-      className={classNames(styles.listBox, props.className)}
-    >
-      {[...state.collection].map((item) => (
-        <Option
-          key={item.key}
-          item={item}
-          state={state}
-          className={props.optionClassName}
-        />
-      ))}
-    </ul>
-  );
-}
-
-function Option({ item, state, className }) {
-  const ref = useRef();
-  const { optionProps, isSelected, isFocused, isDisabled } = useOption(
-    { key: item.key },
-    state,
-    ref
-  );
-
-  return (
-    <li
-      {...optionProps}
-      ref={ref}
-      className={classNames(styles.option, className, {
-        [styles.selected]: isSelected,
-        [styles.focused]: isFocused,
-        [styles.disables]: isDisabled,
-      })}
-    >
-      {item.rendered}
-    </li>
-  );
-}

src/ListBox.tsx

@@ -0,0 +1,89 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useRef } from "react";
+import { useListBox, useOption, AriaListBoxOptions } from "@react-aria/listbox";
+import { ListState } from "@react-stately/list";
+import { Node } from "@react-types/shared";
+import classNames from "classnames";
+
+import styles from "./ListBox.module.css";
+
+interface ListBoxProps<T> extends AriaListBoxOptions<T> {
+  optionClassName: string;
+  state: ListState<T>;
+  className?: string;
+  listBoxRef?: React.MutableRefObject<HTMLUListElement>;
+}
+
+export function ListBox<T>({
+  state,
+  optionClassName,
+  className,
+  listBoxRef,
+  ...rest
+}: ListBoxProps<T>) {
+  const ref = useRef<HTMLUListElement>();
+  if (!listBoxRef) listBoxRef = ref;
+
+  const { listBoxProps } = useListBox(rest, state, listBoxRef);
+
+  return (
+    <ul
+      {...listBoxProps}
+      ref={listBoxRef}
+      className={classNames(styles.listBox, className)}
+    >
+      {[...state.collection].map((item) => (
+        <Option
+          key={item.key}
+          item={item}
+          state={state}
+          className={optionClassName}
+        />
+      ))}
+    </ul>
+  );
+}
+
+interface OptionProps<T> {
+  className: string;
+  state: ListState<T>;
+  item: Node<T>;
+}
+
+function Option<T>({ item, state, className }: OptionProps<T>) {
+  const ref = useRef();
+  const { optionProps, isSelected, isFocused, isDisabled } = useOption(
+    { key: item.key },
+    state,
+    ref
+  );
+
+  return (
+    <li
+      {...optionProps}
+      ref={ref}
+      className={classNames(styles.option, className, {
+        [styles.selected]: isSelected,
+        [styles.focused]: isFocused,
+        [styles.disables]: isDisabled,
+      })}
+    >
+      {item.rendered}
+    </li>
+  );
+}

src/Menu.tsx

@@ -1,15 +1,30 @@
-import React, { useRef, useState } from "react";
-import styles from "./Menu.module.css";
-import { useMenu, useMenuItem } from "@react-aria/menu";
-import { useTreeState } from "@react-stately/tree";
+import React, { Key, useRef, useState } from "react";
+import { AriaMenuOptions, useMenu, useMenuItem } from "@react-aria/menu";
+import { TreeState, useTreeState } from "@react-stately/tree";
 import { mergeProps } from "@react-aria/utils";
 import { useFocus } from "@react-aria/interactions";
 import classNames from "classnames";
+import { Node } from "@react-types/shared";
 
-export function Menu({ className, onAction, ...rest }) {
-  const state = useTreeState({ ...rest, selectionMode: "none" });
+import styles from "./Menu.module.css";
+
+interface MenuProps<T> extends AriaMenuOptions<T> {
+  className?: String;
+  onClose?: () => void;
+  onAction: (value: Key) => void;
+  label?: string;
+}
+
+export function Menu<T extends object>({
+  className,
+  onAction,
+  onClose,
+  label,
+  ...rest
+}: MenuProps<T>) {
+  const state = useTreeState<T>({ ...rest, selectionMode: "none" });
   const menuRef = useRef();
-  const { menuProps } = useMenu(rest, state, menuRef);
+  const { menuProps } = useMenu<T>(rest, state, menuRef);
 
   return (
     <ul
@@ -23,19 +38,25 @@ export function Menu({ className, onAction, ...rest }) {
           item={item}
           state={state}
           onAction={onAction}
-          onClose={rest.onClose}
+          onClose={onClose}
         />
       ))}
     </ul>
   );
 }
 
-function MenuItem({ item, state, onAction, onClose }) {
+interface MenuItemProps<T> {
+  item: Node<T>;
+  state: TreeState<T>;
+  onAction: (value: Key) => void;
+  onClose: () => void;
+}
+
+function MenuItem<T>({ item, state, onAction, onClose }: MenuItemProps<T>) {
   const ref = useRef();
   const { menuItemProps } = useMenuItem(
     {
       key: item.key,
-      isDisabled: item.isDisabled,
       onAction,
       onClose,
     },

src/Modal.module.css

@@ -28,6 +28,7 @@
 }
 
 .modalHeader h3 {
+  font-weight: 600;
   font-size: 24px;
   margin: 0;
 }

src/Modal.tsx

@@ -1,29 +1,73 @@
-import React, { useRef, useMemo } from "react";
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* eslint-disable jsx-a11y/no-autofocus */
+
+import React, { useRef, useMemo, ReactNode } from "react";
 import {
   useOverlay,
   usePreventScroll,
   useModal,
   OverlayContainer,
+  OverlayProps,
 } from "@react-aria/overlays";
-import { useOverlayTriggerState } from "@react-stately/overlays";
+import {
+  OverlayTriggerState,
+  useOverlayTriggerState,
+} from "@react-stately/overlays";
 import { useDialog } from "@react-aria/dialog";
 import { FocusScope } from "@react-aria/focus";
-import { useButton } from "@react-aria/button";
+import { ButtonAria, useButton } from "@react-aria/button";
+import classNames from "classnames";
+import { AriaDialogProps } from "@react-types/dialog";
+
 import { ReactComponent as CloseIcon } from "./icons/Close.svg";
 import styles from "./Modal.module.css";
-import classNames from "classnames";
 
-export function Modal(props) {
-  const { title, children, className, mobileFullScreen } = props;
+export interface ModalProps extends OverlayProps, AriaDialogProps {
+  title: string;
+  children: ReactNode;
+  className?: string;
+  mobileFullScreen?: boolean;
+  onClose?: () => void;
+}
+
+export function Modal({
+  title,
+  children,
+  className,
+  mobileFullScreen,
+  onClose,
+  ...rest
+}: ModalProps) {
   const modalRef = useRef();
-  const { overlayProps, underlayProps } = useOverlay(props, modalRef);
+  const { overlayProps, underlayProps } = useOverlay(
+    { ...rest, onClose },
+    modalRef
+  );
   usePreventScroll();
   const { modalProps } = useModal();
-  const { dialogProps, titleProps } = useDialog(props, modalRef);
+  const { dialogProps, titleProps } = useDialog(rest, modalRef);
   const closeButtonRef = useRef();
-  const { buttonProps: closeButtonProps } = useButton({
-    onPress: () => props.onClose(),
-  });
+  const { buttonProps: closeButtonProps } = useButton(
+    {
+      onPress: () => onClose(),
+    },
+    closeButtonRef
+  );
 
   return (
     <OverlayContainer>
@@ -58,7 +102,16 @@ export function Modal(props) {
   );
 }
 
-export function ModalContent({ children, className, ...rest }) {
+interface ModalContentProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function ModalContent({
+  children,
+  className,
+  ...rest
+}: ModalContentProps) {
   return (
     <div className={classNames(styles.content, className)} {...rest}>
       {children}
@@ -66,7 +119,10 @@ export function ModalContent({ children, className, ...rest }) {
   );
 }
 
-export function useModalTriggerState() {
+export function useModalTriggerState(): {
+  modalState: OverlayTriggerState;
+  modalProps: { isOpen: boolean; onClose: () => void };
+} {
   const modalState = useOverlayTriggerState({});
   const modalProps = useMemo(
     () => ({ isOpen: modalState.isOpen, onClose: modalState.close }),
@@ -75,7 +131,10 @@ export function useModalTriggerState() {
   return { modalState, modalProps };
 }
 
-export function useToggleModalButton(modalState, ref) {
+export function useToggleModalButton(
+  modalState: OverlayTriggerState,
+  ref: React.RefObject<HTMLButtonElement>
+): ButtonAria<React.ButtonHTMLAttributes<HTMLButtonElement>> {
   return useButton(
     {
       onPress: () => modalState.toggle(),
@@ -84,7 +143,10 @@ export function useToggleModalButton(modalState, ref) {
   );
 }
 
-export function useOpenModalButton(modalState, ref) {
+export function useOpenModalButton(
+  modalState: OverlayTriggerState,
+  ref: React.RefObject<HTMLButtonElement>
+): ButtonAria<React.ButtonHTMLAttributes<HTMLButtonElement>> {
   return useButton(
     {
       onPress: () => modalState.open(),
@@ -93,7 +155,10 @@ export function useOpenModalButton(modalState, ref) {
   );
 }
 
-export function useCloseModalButton(modalState, ref) {
+export function useCloseModalButton(
+  modalState: OverlayTriggerState,
+  ref: React.RefObject<HTMLButtonElement>
+): ButtonAria<React.ButtonHTMLAttributes<HTMLButtonElement>> {
   return useButton(
     {
       onPress: () => modalState.close(),
@@ -102,8 +167,12 @@ export function useCloseModalButton(modalState, ref) {
   );
 }
 
-export function ModalTrigger({ children }) {
-  const { modalState, modalProps } = useModalState();
+interface ModalTriggerProps {
+  children: ReactNode;
+}
+
+export function ModalTrigger({ children }: ModalTriggerProps) {
+  const { modalState, modalProps } = useModalTriggerState();
   const buttonRef = useRef();
   const { buttonProps } = useToggleModalButton(modalState, buttonRef);
 

src/SequenceDiagramViewerPage.jsx

@@ -1,41 +0,0 @@
-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>
-  );
-}

src/SequenceDiagramViewerPage.tsx

@@ -0,0 +1,67 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useCallback, useState } from "react";
+
+import {
+  SequenceDiagramViewer,
+  SequenceDiagramMatrixEvent,
+} from "./room/GroupCallInspector";
+import { FieldRow, InputField } from "./input/Input";
+import { usePageTitle } from "./usePageTitle";
+
+interface DebugLog {
+  localUserId: string;
+  eventsByUserId: { [userId: string]: SequenceDiagramMatrixEvent[] };
+  remoteUserIds: string[];
+}
+
+export function SequenceDiagramViewerPage() {
+  usePageTitle("Inspector");
+
+  const [debugLog, setDebugLog] = useState<DebugLog>();
+  const [selectedUserId, setSelectedUserId] = useState<string>();
+  const onChangeDebugLog = useCallback((e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      e.target.files[0].text().then((text: string) => {
+        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>
+  );
+}

src/Tooltip.jsx

@@ -1,76 +0,0 @@
-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, useObjectRef } from "@react-aria/utils";
-import styles from "./Tooltip.module.css";
-import classNames from "classnames";
-import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
-
-export const Tooltip = forwardRef(
-  ({ position, state, className, ...props }, ref) => {
-    let { tooltipProps } = useTooltip(props, state);
-
-    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 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 ||
-    typeof children[1] !== "function"
-  ) {
-    throw new Error(
-      "TooltipTrigger must have two props. The first being a button and the second being a render prop."
-    );
-  }
-
-  const [tooltipTrigger, tooltip] = children;
-
-  return (
-    <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>
-  );
-});
-
-TooltipTrigger.defaultProps = {
-  delay: 250,
-};

src/Tooltip.tsx

@@ -0,0 +1,114 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {
+  ForwardedRef,
+  forwardRef,
+  ReactElement,
+  ReactNode,
+  useRef,
+} from "react";
+import {
+  TooltipTriggerState,
+  useTooltipTriggerState,
+} from "@react-stately/tooltip";
+import { FocusableProvider } from "@react-aria/focus";
+import { useTooltipTrigger, useTooltip } from "@react-aria/tooltip";
+import { mergeProps, useObjectRef } from "@react-aria/utils";
+import classNames from "classnames";
+import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
+import { Placement } from "@react-types/overlays";
+
+import styles from "./Tooltip.module.css";
+
+interface TooltipProps {
+  className?: string;
+  state: TooltipTriggerState;
+  children: ReactNode;
+}
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  (
+    { state, className, children, ...rest }: TooltipProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const { tooltipProps } = useTooltip(rest, state);
+
+    return (
+      <div
+        className={classNames(styles.tooltip, className)}
+        {...mergeProps(rest, tooltipProps)}
+        ref={ref}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+interface TooltipTriggerProps {
+  children: ReactElement;
+  placement?: Placement;
+  delay?: number;
+  tooltip: () => string;
+}
+
+export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
+  (
+    { children, placement, tooltip, ...rest }: TooltipTriggerProps,
+    ref: ForwardedRef<HTMLElement>
+  ) => {
+    const tooltipTriggerProps = { delay: 250, ...rest };
+    const tooltipState = useTooltipTriggerState(tooltipTriggerProps);
+    const triggerRef = useObjectRef<HTMLElement>(ref);
+    const overlayRef = useRef();
+    const { triggerProps, tooltipProps } = useTooltipTrigger(
+      tooltipTriggerProps,
+      tooltipState,
+      triggerRef
+    );
+
+    const { overlayProps } = useOverlayPosition({
+      placement: placement || "top",
+      targetRef: triggerRef,
+      overlayRef,
+      isOpen: tooltipState.isOpen,
+      offset: 5,
+    });
+
+    return (
+      <FocusableProvider ref={triggerRef} {...triggerProps}>
+        <children.type
+          {...mergeProps<typeof children.props | typeof rest>(
+            children.props,
+            rest
+          )}
+        />
+        {tooltipState.isOpen && (
+          <OverlayContainer>
+            <Tooltip
+              state={tooltipState}
+              ref={overlayRef}
+              {...mergeProps(tooltipProps, overlayProps)}
+            >
+              {tooltip()}
+            </Tooltip>
+          </OverlayContainer>
+        )}
+      </FocusableProvider>
+    );
+  }
+);

src/UserMenu.tsx

@@ -1,16 +1,26 @@
 import React, { useMemo } from "react";
 import { Item } from "@react-stately/collections";
+import { useLocation } from "react-router-dom";
+
 import { Button, LinkButton } from "./button";
 import { PopoverMenuTrigger } from "./popover/PopoverMenu";
 import { Menu } from "./Menu";
-import { Tooltip, TooltipTrigger } from "./Tooltip";
-import { Avatar } from "./Avatar";
+import { TooltipTrigger } from "./Tooltip";
+import { Avatar, Size } 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 { useLocation } from "react-router-dom";
 import { Body } from "./typography/Typography";
+import styles from "./UserMenu.module.css";
+
+interface UserMenuProps {
+  preventNavigation: boolean;
+  isAuthenticated: boolean;
+  isPasswordlessUser: boolean;
+  displayName: string;
+  avatarUrl: string;
+  onAction: (value: string) => void;
+}
 
 export function UserMenu({
   preventNavigation,
@@ -19,7 +29,7 @@ export function UserMenu({
   displayName,
   avatarUrl,
   onAction,
-}) {
+}: UserMenuProps) {
   const location = useLocation();
 
   const items = useMemo(() => {
@@ -62,11 +72,11 @@ export function UserMenu({
 
   return (
     <PopoverMenuTrigger placement="bottom right">
-      <TooltipTrigger placement="bottom left">
+      <TooltipTrigger tooltip={() => "Profile"} placement="bottom left">
         <Button variant="icon" className={styles.userButton}>
           {isAuthenticated && (!isPasswordlessUser || avatarUrl) ? (
             <Avatar
-              size="sm"
+              size={Size.SM}
               className={styles.avatar}
               src={avatarUrl}
               fallback={displayName.slice(0, 1).toUpperCase()}
@@ -75,12 +85,11 @@ export function UserMenu({
             <UserIcon />
           )}
         </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}>
+            <Item key={key} textValue={label}>
               <Icon width={24} height={24} className={styles.menuIcon} />
               <Body overflowEllipsis>{label}</Body>
             </Item>

src/UserMenuContainer.tsx

@@ -1,12 +1,17 @@
 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 }) {
+interface Props {
+  preventNavigation?: boolean;
+}
+
+export function UserMenuContainer({ preventNavigation = false }: Props) {
   const location = useLocation();
   const history = useHistory();
   const { isAuthenticated, isPasswordlessUser, logout, userName, client } =
@@ -15,7 +20,7 @@ export function UserMenuContainer({ preventNavigation }) {
   const { modalState, modalProps } = useModalTriggerState();
 
   const onAction = useCallback(
-    (value) => {
+    (value: string) => {
       switch (value) {
         case "user":
           modalState.open();

src/auth/RegisterPage.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, {
+  ChangeEvent,
   FC,
   FormEvent,
   useCallback,
@@ -100,7 +101,7 @@ export const RegisterPage: FC = () => {
       submit()
         .then(() => {
           if (location.state?.from) {
-            history.push(location.state.from);
+            history.push(location.state?.from);
           } else {
             history.push("/");
           }
@@ -166,7 +167,9 @@ export const RegisterPage: FC = () => {
                   required
                   name="password"
                   type="password"
-                  onChange={(e) => setPassword(e.target.value)}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                    setPassword(e.target.value)
+                  }
                   value={password}
                   placeholder="Password"
                   label="Password"
@@ -177,7 +180,9 @@ export const RegisterPage: FC = () => {
                   required
                   type="password"
                   name="passwordConfirmation"
-                  onChange={(e) => setPasswordConfirmation(e.target.value)}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                    setPasswordConfirmation(e.target.value)
+                  }
                   value={passwordConfirmation}
                   placeholder="Confirm Password"
                   label="Confirm Password"

src/auth/generateRandomName.ts

@@ -19,7 +19,6 @@ import {
   adjectives,
   colors,
   animals,
-  Config,
 } from "unique-names-generator";
 
 const elements = [
@@ -143,12 +142,11 @@ const elements = [
   "oganesson",
 ];
 
-export function generateRandomName(config: Config): string {
+export function generateRandomName(): string {
   return uniqueNamesGenerator({
     dictionaries: [colors, adjectives, animals, elements],
     style: "lowerCase",
     length: 3,
     separator: "-",
-    ...config,
   });
 }

src/auth/useInteractiveLogin.ts

@@ -57,12 +57,15 @@ export const useInteractiveLogin = () =>
       passwordlessUser: false,
     };
 
-    const client = await initClient({
-      baseUrl: defaultHomeserver,
-      accessToken: access_token,
-      userId: user_id,
-      deviceId: device_id,
-    });
+    const client = await initClient(
+      {
+        baseUrl: defaultHomeserver,
+        accessToken: access_token,
+        userId: user_id,
+        deviceId: device_id,
+      },
+      false
+    );
     /* eslint-enable camelcase */
 
     return [client, session];

src/auth/useInteractiveRegistration.ts

@@ -90,12 +90,15 @@ export const useInteractiveRegistration = (): [
       const { user_id, access_token, device_id } =
         (await interactiveAuth.attemptAuth()) as any;
 
-      const client = await initClient({
-        baseUrl: defaultHomeserver,
-        accessToken: access_token,
-        userId: user_id,
-        deviceId: device_id,
-      });
+      const client = await initClient(
+        {
+          baseUrl: defaultHomeserver,
+          accessToken: access_token,
+          userId: user_id,
+          deviceId: device_id,
+        },
+        false
+      );
 
       await client.setDisplayName(displayName);
 

src/auth/useRegisterPasswordlessUser.ts

@@ -0,0 +1,59 @@
+/*
+Copyright 2022 Matrix.org Foundation C.I.C.
+
+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 { useCallback } from "react";
+import { randomString } from "matrix-js-sdk/src/randomstring";
+
+import { useClient } from "../ClientContext";
+import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
+import { generateRandomName } from "../auth/generateRandomName";
+import { useRecaptcha } from "../auth/useRecaptcha";
+
+export interface UseRegisterPasswordlessUserType {
+  privacyPolicyUrl: string;
+  registerPasswordlessUser: (displayName: string) => Promise<void>;
+  recaptchaId: string;
+}
+
+export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
+  const { setClient } = useClient();
+  const [privacyPolicyUrl, recaptchaKey, register] =
+    useInteractiveRegistration();
+  const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
+
+  const registerPasswordlessUser = useCallback(
+    async (displayName: string) => {
+      try {
+        const recaptchaResponse = await execute();
+        const userName = generateRandomName();
+        const [client, session] = await register(
+          userName,
+          randomString(16),
+          displayName,
+          recaptchaResponse,
+          true
+        );
+        setClient(client, session);
+      } catch (e) {
+        reset();
+        throw e;
+      }
+    },
+    [execute, reset, register, setClient]
+  );
+
+  return { privacyPolicyUrl, registerPasswordlessUser, recaptchaId };
+}

src/button/Button.module.css

@@ -207,3 +207,10 @@ limitations under the License.
 .lg {
   height: 40px;
 }
+
+.linkButton {
+  background-color: transparent;
+  border: none;
+  color: var(--accent);
+  cursor: pointer;
+}

src/button/Button.tsx

@@ -13,9 +13,12 @@ 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, { forwardRef } from "react";
+import React, { forwardRef, useCallback } from "react";
+import { PressEvent } from "@react-types/shared";
 import classNames from "classnames";
+import { useButton } from "@react-aria/button";
+import { mergeProps, useObjectRef } from "@react-aria/utils";
+
 import styles from "./Button.module.css";
 import { ReactComponent as MicIcon } from "../icons/Mic.svg";
 import { ReactComponent as MuteMicIcon } from "../icons/MuteMic.svg";
@@ -26,9 +29,23 @@ import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg";
 import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
 import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
 import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
-import { useButton } from "@react-aria/button";
-import { mergeProps, useObjectRef } from "@react-aria/utils";
+import { ReactComponent as Fullscreen } from "../icons/Fullscreen.svg";
+import { ReactComponent as FullscreenExit } from "../icons/FullscreenExit.svg";
 import { TooltipTrigger } from "../Tooltip";
+import { VolumeIcon } from "./VolumeIcon";
+
+export type ButtonVariant =
+  | "default"
+  | "toolbar"
+  | "toolbarSecondary"
+  | "icon"
+  | "secondary"
+  | "copy"
+  | "secondaryCopy"
+  | "iconCopy"
+  | "secondaryHangup"
+  | "dropdown"
+  | "link";
 
 export const variantToClassName = {
   default: [styles.button],
@@ -41,13 +58,28 @@ export const variantToClassName = {
   iconCopy: [styles.iconCopyButton],
   secondaryHangup: [styles.secondaryHangup],
   dropdown: [styles.dropdownButton],
+  link: [styles.linkButton],
 };
 
-export const sizeToClassName = {
+export type ButtonSize = "lg";
+
+export const sizeToClassName: { lg: string[] } = {
   lg: [styles.lg],
 };
-
-export const Button = forwardRef(
+interface Props {
+  variant: ButtonVariant;
+  size: ButtonSize;
+  on: () => void;
+  off: () => void;
+  iconStyle: string;
+  className: string;
+  children: Element[];
+  onPress: (e: PressEvent) => void;
+  onPressStart: (e: PressEvent) => void;
+  // TODO: add all props for <Button>
+  [index: string]: unknown;
+}
+export const Button = forwardRef<HTMLButtonElement, Props>(
   (
     {
       variant = "default",
@@ -63,7 +95,7 @@ export const Button = forwardRef(
     },
     ref
   ) => {
-    const buttonRef = useObjectRef(ref);
+    const buttonRef = useObjectRef<HTMLButtonElement>(ref);
     const { buttonProps } = useButton(
       { onPress, onPressStart, ...rest },
       buttonRef
@@ -74,7 +106,7 @@ export const Button = forwardRef(
     let filteredButtonProps = buttonProps;
 
     if (rest.type === "submit" && !rest.onPress) {
-      const { onKeyDown, onKeyUp, ...filtered } = buttonProps;
+      const { ...filtered } = buttonProps;
       filteredButtonProps = filtered;
     }
 
@@ -93,49 +125,84 @@ export const Button = forwardRef(
         {...mergeProps(rest, filteredButtonProps)}
         ref={buttonRef}
       >
-        {children}
-        {variant === "dropdown" && <ArrowDownIcon />}
+        <>
+          {children}
+          {variant === "dropdown" && <ArrowDownIcon />}
+        </>
       </button>
     );
   }
 );
 
-export function MicButton({ muted, ...rest }) {
+export function MicButton({
+  muted,
+  ...rest
+}: {
+  muted: boolean;
+  // TODO: add all props for <Button>
+  [index: string]: unknown;
+}) {
   return (
-    <TooltipTrigger>
+    <TooltipTrigger
+      tooltip={() => (muted ? "Unmute microphone" : "Mute microphone")}
+    >
       <Button variant="toolbar" {...rest} off={muted}>
         {muted ? <MuteMicIcon /> : <MicIcon />}
       </Button>
-      {() => (muted ? "Unmute microphone" : "Mute microphone")}
     </TooltipTrigger>
   );
 }
 
-export function VideoButton({ muted, ...rest }) {
+export function VideoButton({
+  muted,
+  ...rest
+}: {
+  muted: boolean;
+  // TODO: add all props for <Button>
+  [index: string]: unknown;
+}) {
   return (
-    <TooltipTrigger>
+    <TooltipTrigger
+      tooltip={() => (muted ? "Turn on camera" : "Turn off camera")}
+    >
       <Button variant="toolbar" {...rest} off={muted}>
         {muted ? <DisableVideoIcon /> : <VideoIcon />}
       </Button>
-      {() => (muted ? "Turn on camera" : "Turn off camera")}
     </TooltipTrigger>
   );
 }
 
-export function ScreenshareButton({ enabled, className, ...rest }) {
+export function ScreenshareButton({
+  enabled,
+  className,
+  ...rest
+}: {
+  enabled: boolean;
+  className?: string;
+  // TODO: add all props for <Button>
+  [index: string]: unknown;
+}) {
   return (
-    <TooltipTrigger>
+    <TooltipTrigger
+      tooltip={() => (enabled ? "Stop sharing screen" : "Share screen")}
+    >
       <Button variant="toolbarSecondary" {...rest} on={enabled}>
         <ScreenshareIcon />
       </Button>
-      {() => (enabled ? "Stop sharing screen" : "Share screen")}
     </TooltipTrigger>
   );
 }
 
-export function HangupButton({ className, ...rest }) {
+export function HangupButton({
+  className,
+  ...rest
+}: {
+  className?: string;
+  // TODO: add all props for <Button>
+  [index: string]: unknown;
+}) {
   return (
-    <TooltipTrigger>
+    <TooltipTrigger tooltip={() => "Leave"}>
       <Button
         variant="toolbar"
         className={classNames(styles.hangupButton, className)}
@@ -143,29 +210,78 @@ export function HangupButton({ className, ...rest }) {
       >
         <HangupIcon />
       </Button>
-      {() => "Leave"}
     </TooltipTrigger>
   );
 }
 
-export function SettingsButton({ className, ...rest }) {
+export function SettingsButton({
+  className,
+  ...rest
+}: {
+  className?: string;
+  // TODO: add all props for <Button>
+  [index: string]: unknown;
+}) {
   return (
-    <TooltipTrigger>
+    <TooltipTrigger tooltip={() => "Settings"}>
       <Button variant="toolbar" {...rest}>
         <SettingsIcon />
       </Button>
-      {() => "Settings"}
     </TooltipTrigger>
   );
 }
 
-export function InviteButton({ className, ...rest }) {
+export function InviteButton({
+  className,
+  ...rest
+}: {
+  className?: string;
+  // TODO: add all props for <Button>
+  [index: string]: unknown;
+}) {
   return (
-    <TooltipTrigger>
+    <TooltipTrigger tooltip={() => "Invite"}>
       <Button variant="toolbar" {...rest}>
         <AddUserIcon />
       </Button>
-      {() => "Invite"}
+    </TooltipTrigger>
+  );
+}
+
+interface AudioButtonProps extends Omit<Props, "variant"> {
+  /**
+   * A number between 0 and 1
+   */
+  volume: number;
+}
+
+export function AudioButton({ volume, ...rest }: AudioButtonProps) {
+  return (
+    <TooltipTrigger tooltip={() => "Local volume"}>
+      <Button variant="icon" {...rest}>
+        <VolumeIcon volume={volume} />
+      </Button>
+    </TooltipTrigger>
+  );
+}
+
+interface FullscreenButtonProps extends Omit<Props, "variant"> {
+  fullscreen?: boolean;
+}
+
+export function FullscreenButton({
+  fullscreen,
+  ...rest
+}: FullscreenButtonProps) {
+  const getTooltip = useCallback(() => {
+    return fullscreen ? "Exit full screen" : "Full screen";
+  }, [fullscreen]);
+
+  return (
+    <TooltipTrigger tooltip={getTooltip}>
+      <Button variant="icon" {...rest}>
+        {fullscreen ? <FullscreenExit /> : <Fullscreen />}
+      </Button>
     </TooltipTrigger>
   );
 }

src/button/CopyButton.tsx

@@ -16,10 +16,18 @@ limitations under the License.
 
 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";
-import { Button } from "./Button";
+import { Button, ButtonVariant } from "./Button";
 
+interface Props {
+  value: string;
+  children?: JSX.Element | string;
+  className?: string;
+  variant?: ButtonVariant;
+  copiedMessage?: string;
+}
 export function CopyButton({
   value,
   children,
@@ -27,7 +35,7 @@ export function CopyButton({
   variant,
   copiedMessage,
   ...rest
-}) {
+}: Props) {
   const [isCopied, setCopied] = useClipboard(value, { successDuration: 3000 });
 
   return (

src/button/LinkButton.tsx

@@ -14,12 +14,34 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { HTMLAttributes } from "react";
 import { Link } from "react-router-dom";
 import classNames from "classnames";
-import { variantToClassName, sizeToClassName } from "./Button";
+import * as H from "history";
 
-export function LinkButton({ className, variant, size, children, ...rest }) {
+import {
+  variantToClassName,
+  sizeToClassName,
+  ButtonVariant,
+  ButtonSize,
+} from "./Button";
+
+interface Props extends HTMLAttributes<HTMLAnchorElement> {
+  children: JSX.Element | string;
+  to: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor);
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  className?: string;
+}
+
+export function LinkButton({
+  children,
+  to,
+  size,
+  variant,
+  className,
+  ...rest
+}: Props) {
   return (
     <Link
       className={classNames(
@@ -27,6 +49,7 @@ export function LinkButton({ className, variant, size, children, ...rest }) {
         sizeToClassName[size],
         className
       )}
+      to={to}
       {...rest}
     >
       {children}

src/button/VolumeIcon.tsx

@@ -0,0 +1,35 @@
+/*
+Copyright 2022 New Vector Ltd
+
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg";
+import { ReactComponent as AudioLow } from "../icons/AudioLow.svg";
+import { ReactComponent as Audio } from "../icons/Audio.svg";
+
+interface Props {
+  /**
+   * Number between 0 and 1
+   */
+  volume: number;
+}
+
+export function VolumeIcon({ volume }: Props) {
+  if (volume <= 0) return <AudioMuted />;
+  if (volume <= 0.5) return <AudioLow />;
+  return <Audio />;
+}

src/form/Form.tsx

@@ -0,0 +1,40 @@
+/*
+Copyright 2022 Matrix.org Foundation C.I.C.
+
+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 classNames from "classnames";
+import React, { FormEventHandler, forwardRef } from "react";
+
+import styles from "./Form.module.css";
+
+interface FormProps {
+  className: string;
+  onSubmit: FormEventHandler<HTMLFormElement>;
+  children: JSX.Element[];
+}
+
+export const Form = forwardRef<HTMLFormElement, FormProps>(
+  ({ children, className, onSubmit }, ref) => {
+    return (
+      <form
+        onSubmit={onSubmit}
+        className={classNames(styles.form, className)}
+        ref={ref}
+      >
+        {children}
+      </form>
+    );
+  }
+);

src/home/CallList.tsx

@@ -16,14 +16,23 @@ limitations under the License.
 
 import React from "react";
 import { Link } from "react-router-dom";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+
 import { CopyButton } from "../button";
 import { Facepile } from "../Facepile";
-import { Avatar } from "../Avatar";
+import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
 import { getRoomUrl } from "../matrix-utils";
 import { Body, Caption } from "../typography/Typography";
+import { GroupCallRoom } from "./useGroupCallRooms";
 
-export function CallList({ rooms, client, disableFacepile }) {
+interface CallListProps {
+  rooms: GroupCallRoom[];
+  client: MatrixClient;
+  disableFacepile?: boolean;
+}
+export function CallList({ rooms, client, disableFacepile }: CallListProps) {
   return (
     <>
       <div className={styles.callList}>
@@ -48,7 +57,14 @@ export function CallList({ rooms, client, disableFacepile }) {
     </>
   );
 }
-
+interface CallTileProps {
+  name: string;
+  avatarUrl: string;
+  roomId: string;
+  participants: RoomMember[];
+  client: MatrixClient;
+  disableFacepile?: boolean;
+}
 function CallTile({
   name,
   avatarUrl,
@@ -56,12 +72,12 @@ function CallTile({
   participants,
   client,
   disableFacepile,
-}) {
+}: CallTileProps) {
   return (
     <div className={styles.callTile}>
       <Link to={`/room/${roomId}`} className={styles.callTileLink}>
         <Avatar
-          size="lg"
+          size={Size.LG}
           bgKey={name}
           src={avatarUrl}
           fallback={name.slice(0, 1).toUpperCase()}

src/home/CallTypeDropdown.tsx

@@ -46,7 +46,7 @@ export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
           {callType === CallType.Video ? "Video call" : "Walkie-talkie call"}
         </Headline>
       </Button>
-      {(props) => (
+      {(props: JSX.IntrinsicAttributes) => (
         <Menu {...props} label="Call type menu" onAction={setCallType}>
           <Item key={CallType.Video} textValue="Video call">
             <VideoIcon />

src/home/HomePage.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
+
 import { useClient } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
 import { UnauthenticatedView } from "./UnauthenticatedView";

src/home/JoinExistingCallModal.tsx

@@ -15,18 +15,26 @@ limitations under the License.
 */
 
 import React from "react";
+import { PressEvent } from "@react-types/shared";
+
 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 }) {
+interface Props {
+  onJoin: (e: PressEvent) => void;
+  onClose: (e: PressEvent) => void;
+  // TODO: add used parameters for <Modal>
+  [index: string]: unknown;
+}
+export function JoinExistingCallModal({ onJoin, onClose, ...rest }: Props) {
   return (
     <Modal title="Join existing call?" isDismissable {...rest}>
       <ModalContent>
         <p>This call already exists, would you like to join?</p>
         <FieldRow rightAlign className={styles.buttons}>
-          <Button onPress={rest.onClose}>No</Button>
+          <Button onPress={onClose}>No</Button>
           <Button onPress={onJoin}>Yes, join call</Button>
         </FieldRow>
       </ModalContent>

src/home/RegisteredView.tsx

@@ -14,7 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useState, useCallback } from "react";
+import React, {
+  useState,
+  useCallback,
+  FormEvent,
+  FormEventHandler,
+} from "react";
+import { useHistory } from "react-router-dom";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
 import { createRoom, roomAliasLocalpartFromRoomName } from "../matrix-utils";
 import { useGroupCallRooms } from "./useGroupCallRooms";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
@@ -26,28 +34,35 @@ import { CallList } from "./CallList";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { useModalTriggerState } from "../Modal";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
-import { useHistory } from "react-router-dom";
 import { Title } from "../typography/Typography";
 import { Form } from "../form/Form";
 import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
 
-export function RegisteredView({ client }) {
+interface Props {
+  client: MatrixClient;
+  isPasswordlessUser: boolean;
+}
+
+export function RegisteredView({ client, isPasswordlessUser }: Props) {
   const [callType, setCallType] = useState(CallType.Video);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState();
+  const [error, setError] = useState<Error>();
   const history = useHistory();
-  const onSubmit = useCallback(
-    (e) => {
+  const { modalState, modalProps } = useModalTriggerState();
+
+  const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
+    (e: FormEvent) => {
       e.preventDefault();
-      const data = new FormData(e.target);
-      const roomName = data.get("callName");
+      const data = new FormData(e.target as HTMLFormElement);
+      const roomNameData = data.get("callName");
+      const roomName = typeof roomNameData === "string" ? roomNameData : "";
       const ptt = callType === CallType.Radio;
 
       async function submit() {
         setError(undefined);
         setLoading(true);
 
-        const roomIdOrAlias = await createRoom(client, roomName, ptt);
+        const [roomIdOrAlias] = await createRoom(client, roomName, ptt);
 
         if (roomIdOrAlias) {
           history.push(`/room/${roomIdOrAlias}`);
@@ -64,17 +79,15 @@ export function RegisteredView({ client }) {
           console.error(error);
           setLoading(false);
           setError(error);
-          reset();
         }
       });
     },
-    [client, callType]
+    [client, history, modalState, callType]
   );
 
   const recentRooms = useGroupCallRooms(client);
 
-  const { modalState, modalProps } = useModalTriggerState();
-  const [existingRoomId, setExistingRoomId] = useState();
+  const [existingRoomId, setExistingRoomId] = useState<string>();
   const onJoinExistingRoom = useCallback(() => {
     history.push(`/${existingRoomId}`);
   }, [history, existingRoomId]);

src/home/UnauthenticatedView.tsx

@@ -14,45 +14,46 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useState } from "react";
+import React, { FC, useCallback, useState, FormEventHandler } from "react";
+import { useHistory } from "react-router-dom";
+import { randomString } from "matrix-js-sdk/src/randomstring";
+
 import { useClient } from "../ClientContext";
 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, roomAliasLocalpartFromRoomName } 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 { Body, Caption, Link } from "../typography/Typography";
 import { Form } from "../form/Form";
 import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
 import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
 
-export function UnauthenticatedView() {
+export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
   const [callType, setCallType] = useState(CallType.Video);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState();
+  const [error, setError] = useState<Error>();
   const [privacyPolicyUrl, recaptchaKey, register] =
     useInteractiveRegistration();
   const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
 
   const { modalState, modalProps } = useModalTriggerState();
-  const [onFinished, setOnFinished] = useState();
+  const [onFinished, setOnFinished] = useState<() => void>();
   const history = useHistory();
 
-  const onSubmit = useCallback(
+  const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     (e) => {
       e.preventDefault();
-      const data = new FormData(e.target);
-      const roomName = data.get("callName");
-      const displayName = data.get("displayName");
+      const data = new FormData(e.target as HTMLFormElement);
+      const roomName = data.get("callName") as string;
+      const displayName = data.get("displayName") as string;
       const ptt = callType === CallType.Radio;
 
       async function submit() {
@@ -68,12 +69,12 @@ export function UnauthenticatedView() {
           true
         );
 
-        let roomIdOrAlias;
+        let roomIdOrAlias: string;
         try {
-          roomIdOrAlias = await createRoom(client, roomName, ptt);
+          [roomIdOrAlias] = await createRoom(client, roomName, ptt);
         } catch (error) {
           if (error.errcode === "M_ROOM_IN_USE") {
-            setOnFinished(() => () => {
+            setOnFinished(() => {
               setClient(client, session);
               const aliasLocalpart = roomAliasLocalpartFromRoomName(roomName);
               const [, serverName] = client.getUserId().split(":");
@@ -100,7 +101,7 @@ export function UnauthenticatedView() {
         reset();
       });
     },
-    [register, reset, execute, history, callType]
+    [register, reset, execute, history, callType, modalState, setClient]
   );
 
   const callNameLabel =
@@ -177,4 +178,4 @@ export function UnauthenticatedView() {
       )}
     </>
   );
-}
+};

src/home/useGroupCallRooms.ts

@@ -14,11 +14,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { GroupCallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/groupCallEventHandler";
 import { useState, useEffect } from "react";
 
-const tsCache = {};
+export interface GroupCallRoom {
+  roomId: string;
+  roomName: string;
+  avatarUrl: string;
+  room: Room;
+  groupCall: GroupCall;
+  participants: RoomMember[];
+}
+const tsCache: { [index: string]: number } = {};
 
-function getLastTs(client, r) {
+function getLastTs(client: MatrixClient, r: Room) {
   if (tsCache[r.roomId]) {
     return tsCache[r.roomId];
   }
@@ -59,13 +72,13 @@ function getLastTs(client, r) {
   return ts;
 }
 
-function sortRooms(client, rooms) {
+function sortRooms(client: MatrixClient, rooms: Room[]): Room[] {
   return rooms.sort((a, b) => {
     return getLastTs(client, b) - getLastTs(client, a);
   });
 }
 
-export function useGroupCallRooms(client) {
+export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
   const [rooms, setRooms] = useState([]);
 
   useEffect(() => {
@@ -90,12 +103,15 @@ export function useGroupCallRooms(client) {
 
     updateRooms();
 
-    client.on("GroupCall.incoming", updateRooms);
-    client.on("GroupCall.participants", updateRooms);
+    client.on(GroupCallEventHandlerEvent.Incoming, updateRooms);
+    client.on(GroupCallEventHandlerEvent.Participants, updateRooms);
 
     return () => {
-      client.removeListener("GroupCall.incoming", updateRooms);
-      client.removeListener("GroupCall.participants", updateRooms);
+      client.removeListener(GroupCallEventHandlerEvent.Incoming, updateRooms);
+      client.removeListener(
+        GroupCallEventHandlerEvent.Participants,
+        updateRooms
+      );
     };
   }, [client]);
 

src/icons/AlertTriangleFilled.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.47012 18H17.5301C19.0701 18 20.0301 16.33 19.2601 15L11.7301 1.98999C10.9601 0.659993 9.04012 0.659993 8.27012 1.98999L0.740121 15C-0.0298788 16.33 0.930121 18 2.47012 18ZM10.0001 11C9.45012 11 9.00012 10.55 9.00012 9.99999V7.99999C9.00012 7.44999 9.45012 6.99999 10.0001 6.99999C10.5501 6.99999 11.0001 7.44999 11.0001 7.99999V9.99999C11.0001 10.55 10.5501 11 10.0001 11ZM11.0001 15H9.00012V13H11.0001V15Z" fill="#737D8C"/>
+</svg>

src/icons/Audio.svg

@@ -1,5 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.97991 1.48403L4 4.80062L1 4.80062C0.447715 4.80062 0 5.24834 0 5.80062V10.2006C0 10.7529 0.447714 11.2006 0.999999 11.2006L4 11.2006L7.97991 14.5172C8.30557 14.7886 8.8 14.557 8.8 14.1331V1.86814C8.8 1.44422 8.30557 1.21265 7.97991 1.48403Z" fill="white"/>
-<path d="M14.1258 2.79107C13.8998 2.50044 13.4809 2.44808 13.1903 2.67413C12.9 2.89992 12.8475 3.3181 13.0726 3.6087L13.0731 3.60935L13.0738 3.61021L13.0829 3.62231C13.0917 3.63418 13.1059 3.65355 13.1248 3.68011C13.1625 3.73326 13.2187 3.81496 13.2872 3.92256C13.4243 4.13812 13.6097 4.45554 13.7955 4.85371C14.169 5.65407 14.5329 6.75597 14.5329 8.00036C14.5329 9.24475 14.169 10.3466 13.7955 11.147C13.6097 11.5452 13.4243 11.8626 13.2872 12.0782C13.2187 12.1858 13.1625 12.2675 13.1248 12.3206C13.1059 12.3472 13.0917 12.3665 13.0829 12.3784L13.0738 12.3905L13.0731 12.3914L13.0725 12.3921C12.8475 12.6827 12.9 13.1008 13.1903 13.3266C13.4809 13.5526 13.8998 13.5003 14.1258 13.2097L13.629 12.8232C14.1258 13.2096 14.1258 13.2097 14.1258 13.2097L14.1272 13.2079L14.1291 13.2055L14.1346 13.1982L14.1523 13.1748C14.1669 13.1552 14.187 13.1277 14.2119 13.0926C14.2617 13.0225 14.3305 12.9221 14.4121 12.794C14.5749 12.5381 14.7895 12.1698 15.0037 11.7109C15.4302 10.7969 15.8663 9.49883 15.8663 8.00036C15.8663 6.50189 15.4302 5.20379 15.0037 4.28987C14.7895 3.83089 14.5749 3.4626 14.4121 3.20673C14.3305 3.07862 14.2617 2.97818 14.2119 2.90811C14.187 2.87306 14.1669 2.84556 14.1523 2.82596L14.1346 2.80249L14.1291 2.79525L14.1272 2.79278L14.1264 2.79183C14.1264 2.79183 14.1258 2.79107 13.5996 3.20036L14.1258 2.79107Z" fill="white"/>
-<path d="M11.7264 5.19121C11.5004 4.90058 11.0815 4.84823 10.7909 5.07427C10.501 5.29973 10.4482 5.71698 10.6722 6.00752L10.6745 6.01057C10.6775 6.01457 10.6831 6.02223 10.691 6.03338C10.7069 6.05572 10.7318 6.09189 10.7628 6.14057C10.8249 6.23827 10.9103 6.38426 10.9961 6.56815C11.1696 6.93993 11.3335 7.44183 11.3335 8.00051C11.3335 8.55918 11.1696 9.06108 10.9961 9.43287C10.9103 9.61675 10.8249 9.76275 10.7628 9.86045C10.7318 9.90912 10.7069 9.94529 10.691 9.96763C10.6831 9.97879 10.6775 9.98645 10.6745 9.99044L10.6722 9.9935C10.4482 10.284 10.501 10.7013 10.7909 10.9267C11.0815 11.1528 11.5004 11.1004 11.7264 10.8098L11.2002 10.4005C11.7264 10.8098 11.7264 10.8098 11.7264 10.8098L11.7276 10.8083L11.7291 10.8064L11.7329 10.8014L11.7439 10.7868C11.7526 10.7751 11.7642 10.7593 11.7781 10.7396C11.806 10.7004 11.8436 10.6455 11.8876 10.5763C11.9755 10.4383 12.0901 10.2414 12.2043 9.99672C12.4308 9.51136 12.6669 8.81326 12.6669 8.00051C12.6669 7.18775 12.4308 6.48965 12.2043 6.0043C12.0901 5.75961 11.9755 5.56275 11.8876 5.42473C11.8436 5.35555 11.806 5.30065 11.7781 5.26138C11.7642 5.24173 11.7526 5.22596 11.7439 5.21422L11.7329 5.19964L11.7291 5.19465L11.7276 5.19274L11.727 5.19193C11.727 5.19193 11.7264 5.19121 11.2002 5.60051L11.7264 5.19121Z" fill="white"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9699 2.22605L6 7.20093L1.5 7.20093C0.671573 7.20093 0 7.8725 0 8.70093V15.3009C0 16.1294 0.671571 16.8009 1.5 16.8009L6 16.8009L11.9699 21.7758C12.4584 22.1829 13.2 21.8355 13.2 21.1996V2.80221C13.2 2.16634 12.4584 1.81897 11.9699 2.22605Z" fill="white"/>
+<path d="M21.1888 4.1866C20.8497 3.75065 20.2214 3.67212 19.7855 4.01119C19.35 4.34988 19.2712 4.97715 19.6089 5.41304L19.6097 5.41402L19.6107 5.41531L19.6243 5.43347C19.6376 5.45126 19.6589 5.48033 19.6872 5.52017C19.7438 5.59988 19.828 5.72244 19.9308 5.88385C20.1365 6.20718 20.4145 6.68332 20.6932 7.28057C21.2535 8.48111 21.7994 10.134 21.7994 12.0005C21.7994 13.8671 21.2535 15.52 20.6932 16.7205C20.4145 17.3178 20.1365 17.7939 19.9308 18.1172C19.828 18.2786 19.7438 18.4012 19.6872 18.4809C19.6589 18.5208 19.6376 18.5498 19.6243 18.5676L19.6107 18.5858L19.6097 18.5871L19.6088 18.5882C19.2712 19.0241 19.3501 19.6512 19.7855 19.9899C20.2214 20.329 20.8497 20.2504 21.1888 19.8145L20.4435 19.2348C21.1888 19.8145 21.1888 19.8145 21.1888 19.8145L21.1908 19.8119L21.1936 19.8082L21.2019 19.7974L21.2284 19.7621C21.2503 19.7327 21.2805 19.6915 21.3179 19.6389C21.3925 19.5338 21.4958 19.3832 21.6181 19.191C21.8623 18.8072 22.1843 18.2547 22.5056 17.5663C23.1453 16.1954 23.7994 14.2482 23.7994 12.0005C23.7994 9.75284 23.1453 7.80569 22.5056 6.4348C22.1843 5.74634 21.8623 5.1939 21.6181 4.81009C21.4958 4.61793 21.3925 4.46727 21.3179 4.36217C21.2805 4.30959 21.2503 4.26835 21.2284 4.23893L21.2019 4.20373L21.1936 4.19288L21.1908 4.18917L21.1897 4.18774C21.1897 4.18774 21.1888 4.1866 20.3994 4.80054L21.1888 4.1866Z" fill="white"/>
+<path d="M17.5896 7.78682C17.2506 7.35087 16.6223 7.27234 16.1864 7.61141C15.7515 7.94959 15.6723 8.57548 16.0083 9.01128L16.0117 9.01586C16.0162 9.02185 16.0246 9.03334 16.0365 9.05007C16.0603 9.08359 16.0977 9.13784 16.1441 9.21085C16.2374 9.3574 16.3654 9.57639 16.4941 9.85222C16.7544 10.4099 17.0003 11.1627 17.0003 12.0008C17.0003 12.8388 16.7544 13.5916 16.4941 14.1493C16.3654 14.4251 16.2374 14.6441 16.1441 14.7907C16.0977 14.8637 16.0603 14.9179 16.0365 14.9514C16.0246 14.9682 16.0162 14.9797 16.0117 14.9857L16.0083 14.9903C15.6723 15.4261 15.7515 16.0519 16.1864 16.3901C16.6223 16.7292 17.2506 16.6506 17.5896 16.2147L16.8003 15.6008C17.5896 16.2147 17.5896 16.2147 17.5896 16.2147L17.5914 16.2124L17.5936 16.2095L17.5994 16.2021L17.6158 16.1802C17.6289 16.1626 17.6463 16.1389 17.6672 16.1094C17.709 16.0505 17.7654 15.9682 17.8315 15.8644C17.9632 15.6574 18.1352 15.3621 18.3065 14.9951C18.6462 14.267 19.0003 13.2199 19.0003 12.0008C19.0003 10.7816 18.6462 9.73448 18.3065 9.00645C18.1352 8.63942 17.9632 8.34412 17.8315 8.1371C17.7654 8.03333 17.709 7.95097 17.6672 7.89207C17.6463 7.8626 17.6289 7.83893 17.6158 7.82132L17.5994 7.79946L17.5936 7.79198L17.5914 7.78911L17.5905 7.78789C17.5905 7.78789 17.5896 7.78682 16.8003 8.40076L17.5896 7.78682Z" fill="white"/>
 </svg>

src/icons/AudioLow.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9699 2.22605L6 7.20093L1.5 7.20093C0.671573 7.20093 0 7.8725 0 8.70093V15.3009C0 16.1294 0.671571 16.8009 1.5 16.8009L6 16.8009L11.9699 21.7758C12.4584 22.1829 13.2 21.8355 13.2 21.1996V2.80221C13.2 2.16634 12.4584 1.81897 11.9699 2.22605Z" fill="white"/>
+<path d="M17.5896 7.78682C17.2506 7.35087 16.6223 7.27234 16.1864 7.61141C15.7515 7.94959 15.6723 8.57548 16.0083 9.01128L16.0117 9.01586C16.0162 9.02185 16.0246 9.03334 16.0365 9.05007C16.0603 9.08359 16.0977 9.13784 16.1441 9.21085C16.2374 9.3574 16.3654 9.57639 16.4941 9.85222C16.7544 10.4099 17.0003 11.1627 17.0003 12.0008C17.0003 12.8388 16.7544 13.5916 16.4941 14.1493C16.3654 14.4251 16.2374 14.6441 16.1441 14.7907C16.0977 14.8637 16.0603 14.9179 16.0365 14.9514C16.0246 14.9682 16.0162 14.9797 16.0117 14.9857L16.0083 14.9903C15.6723 15.4261 15.7515 16.0519 16.1864 16.3901C16.6223 16.7292 17.2506 16.6506 17.5896 16.2147L16.8003 15.6008C17.5896 16.2147 17.5896 16.2147 17.5896 16.2147L17.5914 16.2124L17.5936 16.2095L17.5994 16.2021L17.6158 16.1802C17.6289 16.1626 17.6463 16.1389 17.6672 16.1094C17.709 16.0505 17.7654 15.9682 17.8315 15.8644C17.9632 15.6574 18.1352 15.3621 18.3065 14.9951C18.6462 14.267 19.0003 13.2199 19.0003 12.0008C19.0003 10.7816 18.6462 9.73448 18.3065 9.00645C18.1352 8.63942 17.9632 8.34412 17.8315 8.1371C17.7654 8.03333 17.709 7.95097 17.6672 7.89207C17.6463 7.8626 17.6289 7.83893 17.6158 7.82132L17.5994 7.79946L17.5936 7.79198L17.5914 7.78911L17.5905 7.78789C17.5905 7.78789 17.5896 7.78682 16.8003 8.40076L17.5896 7.78682Z" fill="white"/>
+</svg>

src/icons/AudioMuted.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="M2.63174 0.583224C2.15798 0.109466 1.38987 0.109466 0.91611 0.583224C0.442351 1.05698 0.442351 1.8251 0.91611 2.29885L5.3958 6.77855H5.37083L15.3629 16.7706V16.7456L20.7144 22.0972C21.1882 22.5709 21.9563 22.5709 22.4301 22.0972C22.9038 21.6234 22.9038 20.8553 22.4301 20.3816L2.63174 0.583224ZM15.3629 3.23319V9.88521L10.2275 4.74987L13.2404 2.2391C14.0833 1.53675 15.3629 2.13608 15.3629 3.23319ZM4.07191 16.8718H7.7929V16.872L13.2404 21.4116C14.0833 22.114 15.3629 21.5146 15.3629 20.4175V20.2018L2.4839 7.32287C1.87536 7.79641 1.48389 8.53577 1.48389 9.36657V14.2838C1.48389 15.7131 2.64258 16.8718 4.07191 16.8718Z" fill="white"/>
+</svg>

src/icons/Fullscreen.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 d="M21 8.59V4C21 3.45 20.55 3 20 3H15.41C14.52 3 14.07 4.08 14.7 4.71L16.29 6.3L6.29 16.3L4.7 14.71C4.08 14.08 3 14.52 3 15.41V20C3 20.55 3.45 21 4 21H8.59C9.48 21 9.93 19.92 9.3 19.29L7.71 17.7L17.71 7.7L19.3 9.29C19.92 9.92 21 9.48 21 8.59Z" fill="white"/>
+</svg>

src/icons/FullscreenExit.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 d="M21.29 4.12L16.7 8.71L18.29 10.3C18.92 10.93 18.47 12.01 17.58 12.01H13C12.45 12.01 12 11.56 12 11.01V6.41C12 5.52 13.08 5.07 13.71 5.7L15.3 7.29L19.89 2.7C20.28 2.31 20.91 2.31 21.3 2.7C21.68 3.1 21.68 3.73 21.29 4.12ZM4.11997 21.29L8.70997 16.7L10.3 18.29C10.93 18.92 12.01 18.47 12.01 17.58V13C12.01 12.45 11.56 12 11.01 12H6.40997C5.51997 12 5.06997 13.08 5.69997 13.71L7.28997 15.3L2.69997 19.89C2.30997 20.28 2.30997 20.91 2.69997 21.3C3.09997 21.68 3.72997 21.68 4.11997 21.29Z" fill="white"/>
+</svg>

src/index.css

@@ -33,10 +33,12 @@ limitations under the License.
   --primary-content: #ffffff;
   --secondary-content: #a9b2bc;
   --tertiary-content: #8e99a4;
+  --tertiary-content-20: #8e99a433;
   --quaternary-content: #6f7882;
   --quinary-content: #394049;
   --system: #21262c;
   --background: #15191e;
+  --background-85: rgba(23, 25, 28, 0.85);
   --bgColor3: #444; /* This isn't found anywhere in the designs or Compound */
 }
 

src/input/AvatarInputField.tsx

@@ -15,42 +15,52 @@ limitations under the License.
 */
 
 import { useObjectRef } from "@react-aria/utils";
-import React, { useEffect } from "react";
+import React, { AllHTMLAttributes, useEffect } from "react";
 import { useCallback } from "react";
 import { useState } from "react";
 import { forwardRef } from "react";
-import { Avatar } from "../Avatar";
-import { Button } from "../button";
 import classNames from "classnames";
+
+import { Avatar, Size } from "../Avatar";
+import { Button } from "../button";
 import { ReactComponent as EditIcon } from "../icons/Edit.svg";
 import styles from "./AvatarInputField.module.css";
 
-export const AvatarInputField = forwardRef(
+interface Props extends AllHTMLAttributes<HTMLInputElement> {
+  id: string;
+  label: string;
+  avatarUrl: string;
+  displayName: string;
+  onRemoveAvatar: () => void;
+}
+
+export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
   (
     { id, label, className, avatarUrl, displayName, onRemoveAvatar, ...rest },
     ref
   ) => {
     const [removed, setRemoved] = useState(false);
-    const [objUrl, setObjUrl] = useState(null);
+    const [objUrl, setObjUrl] = useState<string>(null);
 
     const fileInputRef = useObjectRef(ref);
 
     useEffect(() => {
-      const onChange = (e) => {
-        if (e.target.files.length > 0) {
-          setObjUrl(URL.createObjectURL(e.target.files[0]));
+      const currentInput = fileInputRef.current;
+
+      const onChange = (e: Event) => {
+        const inputEvent = e as unknown as React.ChangeEvent<HTMLInputElement>;
+        if (inputEvent.target.files.length > 0) {
+          setObjUrl(URL.createObjectURL(inputEvent.target.files[0]));
           setRemoved(false);
         } else {
           setObjUrl(null);
         }
       };
 
-      fileInputRef.current.addEventListener("change", onChange);
+      currentInput.addEventListener("change", onChange);
 
       return () => {
-        if (fileInputRef.current) {
-          fileInputRef.current.removeEventListener("change", onChange);
-        }
+        currentInput?.removeEventListener("change", onChange);
       };
     });
 
@@ -63,7 +73,7 @@ export const AvatarInputField = forwardRef(
       <div className={classNames(styles.avatarInputField, className)}>
         <div className={styles.avatarContainer}>
           <Avatar
-            size="xl"
+            size={Size.XL}
             src={removed ? null : objUrl || avatarUrl}
             fallback={displayName.slice(0, 1).toUpperCase()}
           />

src/input/Input.module.css

@@ -118,13 +118,15 @@
 .checkboxField {
   display: flex;
   align-items: flex-start;
+  flex-wrap: wrap;
 }
 
 .checkboxField label {
   display: flex;
   align-items: center;
   flex-grow: 1;
-  font-size: 13px;
+  font-size: 15px;
+  line-height: 24px;
 }
 
 .checkboxField input {
@@ -176,3 +178,9 @@
   color: var(--alert);
   font-weight: 600;
 }
+
+.description {
+  color: var(--secondary-content);
+  margin-left: 26px;
+  width: 100%; /* Ensure that it breaks onto the next row */
+}

src/input/Input.tsx

@@ -14,12 +14,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { forwardRef } from "react";
+import React, { ChangeEvent, forwardRef, ReactNode } from "react";
 import classNames from "classnames";
+
 import styles from "./Input.module.css";
 import { ReactComponent as CheckIcon } from "../icons/Check.svg";
 
-export function FieldRow({ children, rightAlign, className, ...rest }) {
+interface FieldRowProps {
+  children: ReactNode;
+  rightAlign?: boolean;
+  className?: string;
+}
+
+export function FieldRow({
+  children,
+  rightAlign,
+  className,
+}: FieldRowProps): JSX.Element {
   return (
     <div
       className={classNames(
@@ -33,13 +44,55 @@ export function FieldRow({ children, rightAlign, className, ...rest }) {
   );
 }
 
-export function Field({ children, className, ...rest }) {
+interface FieldProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function Field({ children, className }: FieldProps): JSX.Element {
   return <div className={classNames(styles.field, className)}>{children}</div>;
 }
 
-export const InputField = forwardRef(
+interface InputFieldProps {
+  label: string;
+  type: string;
+  prefix?: string;
+  suffix?: string;
+  id?: string;
+  checked?: boolean;
+  className?: string;
+  description?: string;
+  disabled?: boolean;
+  required?: boolean;
+  // this is a hack. Those variables should be part of `HTMLAttributes<HTMLInputElement> | HTMLAttributes<HTMLTextAreaElement>`
+  // but extending from this union type does not work
+  name?: string;
+  autoComplete?: string;
+  autoCorrect?: string;
+  autoCapitalize?: string;
+  value?: string;
+  placeholder?: string;
+  defaultChecked?: boolean;
+  onChange?: (event: ChangeEvent) => void;
+}
+
+export const InputField = forwardRef<
+  HTMLInputElement | HTMLTextAreaElement,
+  InputFieldProps
+>(
   (
-    { id, label, className, type, checked, prefix, suffix, disabled, ...rest },
+    {
+      id,
+      label,
+      className,
+      type,
+      checked,
+      prefix,
+      suffix,
+      description,
+      disabled,
+      ...rest
+    },
     ref
   ) => {
     return (
@@ -57,19 +110,18 @@ export const InputField = forwardRef(
         {type === "textarea" ? (
           <textarea
             id={id}
-            {...rest}
-            ref={ref}
-            type={type}
+            ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
             disabled={disabled}
+            {...rest}
           />
         ) : (
           <input
             id={id}
-            {...rest}
-            ref={ref}
+            ref={ref as React.ForwardedRef<HTMLInputElement>}
             type={type}
             checked={checked}
             disabled={disabled}
+            {...rest}
           />
         )}
 
@@ -82,11 +134,16 @@ export const InputField = forwardRef(
           {label}
         </label>
         {suffix && <span>{suffix}</span>}
+        {description && <p className={styles.description}>{description}</p>}
       </Field>
     );
   }
 );
 
-export function ErrorMessage({ children }) {
+export function ErrorMessage({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
   return <p className={styles.errorMessage}>{children}</p>;
 }

src/input/SelectInput.tsx

@@ -15,16 +15,21 @@ limitations under the License.
 */
 
 import React, { useRef } from "react";
-import { HiddenSelect, useSelect } from "@react-aria/select";
+import { AriaSelectOptions, HiddenSelect, useSelect } from "@react-aria/select";
 import { useButton } from "@react-aria/button";
 import { useSelectState } from "@react-stately/select";
+import classNames from "classnames";
+
 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";
 
-export function SelectInput(props) {
+interface Props extends AriaSelectOptions<object> {
+  className?: string;
+}
+
+export function SelectInput(props: Props): JSX.Element {
   const state = useSelectState(props);
 
   const ref = useRef();

src/input/Toggle.tsx

@@ -15,22 +15,37 @@ limitations under the License.
 */
 
 import React, { useCallback, useRef } from "react";
-import styles from "./Toggle.module.css";
 import { useToggleButton } from "@react-aria/button";
 import classNames from "classnames";
+
+import styles from "./Toggle.module.css";
 import { Field } from "./Input";
 
-export function Toggle({ id, label, className, onChange, isSelected }) {
-  const buttonRef = useRef();
+interface Props {
+  id: string;
+  label: string;
+  onChange: (selected: boolean) => void;
+  isSelected: boolean;
+  className?: string;
+}
+
+export function Toggle({
+  id,
+  label,
+  className,
+  onChange,
+  isSelected,
+}: Props): JSX.Element {
+  const buttonRef = useRef<HTMLButtonElement>();
   const toggle = useCallback(() => {
     onChange(!isSelected);
-  });
-  const { buttonProps } = useToggleButton(
+  }, [isSelected, onChange]);
+
+  const buttonProps = useToggleButton(
     { isSelected },
-    { toggle },
+    { isSelected: isSelected, setSelected: undefined, toggle },
     buttonRef
   );
-
   return (
     <Field
       className={classNames(

src/main.tsx

@@ -28,14 +28,20 @@ import { Integrations } from "@sentry/tracing";
 
 import "./index.css";
 import App from "./App";
-import { ErrorView } from "./FullScreenView";
 import { init as initRageshake } from "./settings/rageshake";
-import { InspectorContextProvider } from "./room/GroupCallInspector";
 
 initRageshake();
 
 console.info(`matrix-video-chat ${import.meta.env.VITE_APP_VERSION || "dev"}`);
 
+if (!window.isSecureContext) {
+  throw new Error(
+    "This app cannot run in an insecure context. To fix this, access the app " +
+      "via a local loopback address, or serve it over HTTPS.\n" +
+      "https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts"
+  );
+}
+
 if (import.meta.env.VITE_CUSTOM_THEME) {
   const style = document.documentElement.style;
   style.setProperty("--accent", import.meta.env.VITE_THEME_ACCENT as string);
@@ -61,6 +67,10 @@ if (import.meta.env.VITE_CUSTOM_THEME) {
     "--tertiary-content",
     import.meta.env.VITE_THEME_TERTIARY_CONTENT as string
   );
+  style.setProperty(
+    "--tertiary-content-20",
+    import.meta.env.VITE_THEME_TERTIARY_CONTENT_20 as string
+  );
   style.setProperty(
     "--quaternary-content",
     import.meta.env.VITE_THEME_QUATERNARY_CONTENT as string
@@ -74,6 +84,10 @@ if (import.meta.env.VITE_CUSTOM_THEME) {
     "--background",
     import.meta.env.VITE_THEME_BACKGROUND as string
   );
+  style.setProperty(
+    "--background-85",
+    import.meta.env.VITE_THEME_BACKGROUND_85 as string
+  );
 }
 
 const history = createBrowserHistory();
@@ -92,11 +106,7 @@ Sentry.init({
 
 ReactDOM.render(
   <React.StrictMode>
-    <Sentry.ErrorBoundary fallback={ErrorView}>
-      <InspectorContextProvider>
-        <App history={history} />
-      </InspectorContextProvider>
-    </Sentry.ErrorBoundary>
+    <App history={history} />
   </React.StrictMode>,
   document.getElementById("root")
 );

src/matrix-utils.ts

@@ -1,20 +1,30 @@
 import Olm from "@matrix-org/olm";
 import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
 import { IndexedDBStore } from "matrix-js-sdk/src/store/indexeddb";
-import { WebStorageSessionStore } from "matrix-js-sdk/src/store/session/webstorage";
 import { MemoryStore } from "matrix-js-sdk/src/store/memory";
 import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
-import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
+import { LocalStorageCryptoStore } from "matrix-js-sdk/src/crypto/store/localStorage-crypto-store";
+import { MemoryCryptoStore } from "matrix-js-sdk/src/crypto/store/memory-crypto-store";
+import {
+  createClient,
+  createRoomWidgetClient,
+  MatrixClient,
+} from "matrix-js-sdk/src/matrix";
 import { ICreateClientOpts } from "matrix-js-sdk/src/matrix";
 import { ClientEvent } from "matrix-js-sdk/src/client";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 import { Visibility, Preset } from "matrix-js-sdk/src/@types/partials";
+import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
+import { WidgetApi } from "matrix-widget-api";
+import { logger } from "matrix-js-sdk/src/logger";
 import {
   GroupCallIntent,
   GroupCallType,
 } from "matrix-js-sdk/src/webrtc/groupCall";
-import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
 
+import type { Room } from "matrix-js-sdk/src/models/room";
 import IndexedDBWorker from "./IndexedDBWorker?worker";
+import { getRoomParams } from "./room/useRoomParams";
 
 export const defaultHomeserver =
   (import.meta.env.VITE_DEFAULT_HOMESERVER as string) ??
@@ -22,6 +32,19 @@ export const defaultHomeserver =
 
 export const defaultHomeserverHost = new URL(defaultHomeserver).host;
 
+export class CryptoStoreIntegrityError extends Error {
+  constructor() {
+    super("Crypto store data was expected, but none was found");
+  }
+}
+
+const SYNC_STORE_NAME = "element-call-sync";
+// Note that the crypto store name has changed from previous versions
+// deliberately in order to force a logout for all users due to
+// https://github.com/vector-im/element-call/issues/464
+// (It's a good opportunity to make the database names consistent.)
+const CRYPTO_STORE_NAME = "element-call-crypto";
+
 function waitForSync(client: MatrixClient) {
   return new Promise<void>((resolve, reject) => {
     const onSync = (
@@ -41,8 +64,85 @@ function waitForSync(client: MatrixClient) {
   });
 }
 
+/**
+ * Initialises and returns a new widget-API-based Matrix Client.
+ * @param widgetId The ID of the widget that the app is running inside.
+ * @param parentUrl The URL of the parent client.
+ * @returns The MatrixClient instance
+ */
+export async function initMatroskaClient(
+  widgetId: string,
+  parentUrl: string
+): Promise<MatrixClient> {
+  // In this mode, we use a special client which routes all requests through
+  // the host application via the widget API
+
+  const { roomId, userId, deviceId } = getRoomParams();
+  if (!roomId) throw new Error("Room ID must be supplied");
+  if (!userId) throw new Error("User ID must be supplied");
+  if (!deviceId) throw new Error("Device ID must be supplied");
+
+  // These are all the event types the app uses
+  const sendState = [
+    { eventType: EventType.GroupCallPrefix },
+    { eventType: EventType.GroupCallMemberPrefix, stateKey: userId },
+  ];
+  const receiveState = [
+    { eventType: EventType.RoomMember },
+    { eventType: EventType.GroupCallPrefix },
+    { eventType: EventType.GroupCallMemberPrefix },
+  ];
+  const sendRecvToDevice = [
+    EventType.CallInvite,
+    EventType.CallCandidates,
+    EventType.CallAnswer,
+    EventType.CallHangup,
+    EventType.CallReject,
+    EventType.CallSelectAnswer,
+    EventType.CallNegotiate,
+    EventType.CallSDPStreamMetadataChanged,
+    EventType.CallSDPStreamMetadataChangedPrefix,
+    EventType.CallReplaces,
+    "org.matrix.call_duplicate_session",
+  ];
+
+  // Since all data should be coming from the host application, there's no
+  // need to persist anything, and therefore we can use the default stores
+  // We don't even need to set up crypto
+  const client = createRoomWidgetClient(
+    new WidgetApi(widgetId, new URL(parentUrl).origin),
+    {
+      sendState,
+      receiveState,
+      sendToDevice: sendRecvToDevice,
+      receiveToDevice: sendRecvToDevice,
+      turnServers: true,
+    },
+    roomId,
+    {
+      baseUrl: "",
+      userId,
+      deviceId,
+      timelineSupport: true,
+    }
+  );
+
+  await client.startClient();
+  return client;
+}
+
+/**
+ * Initialises and returns a new standalone Matrix Client.
+ * If true is passed for the 'restore' parameter, a check will be made
+ * to ensure that corresponding crypto data is stored and recovered.
+ * If the check fails, CryptoStoreIntegrityError will be thrown.
+ * @param clientOptions Object of options passed through to the client
+ * @param restore Whether the session is being restored from storage
+ * @returns The MatrixClient instance
+ */
 export async function initClient(
-  clientOptions: ICreateClientOpts
+  clientOptions: ICreateClientOpts,
+  restore: boolean
 ): Promise<MatrixClient> {
   // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
   window.OLM_OPTIONS = {};
@@ -59,30 +159,71 @@ export async function initClient(
   if (indexedDB && localStorage && !import.meta.env.DEV) {
     storeOpts.store = new IndexedDBStore({
       indexedDB: window.indexedDB,
-      localStorage: window.localStorage,
-      dbName: "element-call-sync",
+      localStorage,
+      dbName: SYNC_STORE_NAME,
       workerFactory: () => new IndexedDBWorker(),
     });
+  } else if (localStorage) {
+    storeOpts.store = new MemoryStore({ localStorage });
   }
 
-  if (localStorage) {
-    storeOpts.sessionStore = new WebStorageSessionStore(localStorage);
+  // Check whether we have crypto data store. If we are restoring a session
+  // from storage then we will have started the crypto store and therefore
+  // have generated keys for that device, so if we can't recover those keys,
+  // we must not continue or we'll generate new keys and anyone who saw our
+  // previous keys will not accept our new key.
+  // It's worth mentioning here that if support for indexeddb or localstorage
+  // appears or disappears between sessions (it happens) then the failure mode
+  // here will be that we'll try a different store, not find crypto data and
+  // fail to restore the session. An alternative would be to continue using
+  // whatever we were using before, but that could be confusing since you could
+  // enable indexeddb and but the app would still not be using it.
+  if (restore) {
+    if (indexedDB) {
+      const cryptoStoreExists = await IndexedDBCryptoStore.exists(
+        indexedDB,
+        CRYPTO_STORE_NAME
+      );
+      if (!cryptoStoreExists) throw new CryptoStoreIntegrityError();
+    } else if (localStorage) {
+      if (!LocalStorageCryptoStore.exists(localStorage))
+        throw new CryptoStoreIntegrityError();
+    } else {
+      // if we get here then we're using the memory store, which cannot
+      // possibly have remembered a session, so it's an error.
+      throw new CryptoStoreIntegrityError();
+    }
   }
 
   if (indexedDB) {
     storeOpts.cryptoStore = new IndexedDBCryptoStore(
       indexedDB,
-      "matrix-js-sdk:crypto"
+      CRYPTO_STORE_NAME
     );
+  } else if (localStorage) {
+    storeOpts.cryptoStore = new LocalStorageCryptoStore(localStorage);
+  } else {
+    storeOpts.cryptoStore = new MemoryCryptoStore();
+  }
+
+  // XXX: we read from the room params in RoomPage too:
+  // it would be much better to read them in one place and pass
+  // the values around, but we initialise the matrix client in
+  // many different places so we'd have to pass it into all of
+  // them.
+  const { e2eEnabled } = getRoomParams();
+  if (!e2eEnabled) {
+    logger.info("Disabling E2E: group call signalling will NOT be encrypted.");
   }
 
   const client = createClient({
     ...storeOpts,
     ...clientOptions,
     useAuthorizationHeader: true,
-    // Use a relatively low timeout for API calls: this is a realtime application
+    // Use a relatively low timeout for API calls: this is a realtime app
     // so we don't want API calls taking ages, we'd rather they just fail.
     localTimeoutMs: 5000,
+    useE2eForGroupCall: e2eEnabled,
   });
 
   try {
@@ -155,9 +296,9 @@ export function isLocalRoomId(roomId: string): boolean {
 export async function createRoom(
   client: MatrixClient,
   name: string,
-  isPtt = false
-): Promise<string> {
-  const createRoomResult = await client.createRoom({
+  ptt: boolean
+): Promise<[string, string]> {
+  const createPromise = client.createRoom({
     visibility: Visibility.Private,
     preset: Preset.PublicChat,
     name,
@@ -187,29 +328,50 @@ export async function createRoom(
     },
   });
 
-  console.log(`Creating ${isPtt ? "PTT" : "video"} group call room`);
+  // Wait for the room to arrive
+  await new Promise<void>((resolve, reject) => {
+    const onRoom = async (room: Room) => {
+      if (room.roomId === (await createPromise).room_id) {
+        resolve();
+        cleanUp();
+      }
+    };
+    createPromise.catch((e) => {
+      reject(e);
+      cleanUp();
+    });
+
+    const cleanUp = () => {
+      client.off(ClientEvent.Room, onRoom);
+    };
+    client.on(ClientEvent.Room, onRoom);
+  });
+
+  const result = await createPromise;
+
+  console.log(`Creating ${ptt ? "PTT" : "video"} group call room`);
 
   await client.createGroupCall(
-    createRoomResult.room_id,
-    isPtt ? GroupCallType.Voice : GroupCallType.Video,
-    isPtt,
-    GroupCallIntent.Prompt
+    result.room_id,
+    ptt ? GroupCallType.Voice : GroupCallType.Video,
+    ptt,
+    GroupCallIntent.Room
   );
 
-  return fullAliasFromRoomName(name, client);
+  return [fullAliasFromRoomName(name, client), result.room_id];
 }
 
-export function getRoomUrl(roomId: string): string {
-  if (roomId.startsWith("#")) {
-    const [localPart, host] = roomId.replace("#", "").split(":");
+export function getRoomUrl(roomIdOrAlias: string): string {
+  if (roomIdOrAlias.startsWith("#")) {
+    const [localPart, host] = roomIdOrAlias.replace("#", "").split(":");
 
     if (host !== defaultHomeserverHost) {
-      return `${window.location.protocol}//${window.location.host}/room/${roomId}`;
+      return `${window.location.protocol}//${window.location.host}/room/${roomIdOrAlias}`;
     } else {
       return `${window.location.protocol}//${window.location.host}/${localPart}`;
     }
   } else {
-    return `${window.location.protocol}//${window.location.host}/room/${roomId}`;
+    return `${window.location.protocol}//${window.location.host}/room/#?roomId=${roomIdOrAlias}`;
   }
 }
 

src/popover/Popover.tsx

@@ -14,14 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { forwardRef, useRef } from "react";
+import React, { forwardRef, HTMLAttributes } from "react";
 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(
+import styles from "./Popover.module.css";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  isOpen: boolean;
+  onClose: () => void;
+  className?: string;
+  children?: JSX.Element;
+}
+
+export const Popover = forwardRef<HTMLDivElement, Props>(
   ({ isOpen = true, onClose, className, children, ...rest }, ref) => {
     const popoverRef = useObjectRef(ref);
 

src/popover/PopoverMenu.jsx

@@ -1,84 +0,0 @@
-/*
-Copyright 2022 Matrix.org Foundation C.I.C.
-
-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, { 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>
-    );
-  }
-);

src/popover/PopoverMenu.tsx

@@ -0,0 +1,96 @@
+/*
+Copyright 2022 Matrix.org Foundation C.I.C.
+
+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, { forwardRef, useRef } from "react";
+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 { MenuTriggerProps } from "@react-types/menu";
+import { Placement } from "@react-types/overlays";
+
+import styles from "./PopoverMenu.module.css";
+import { Popover } from "./Popover";
+
+interface PopoverMenuTriggerProps extends MenuTriggerProps {
+  children: JSX.Element;
+  placement: Placement;
+  className: string;
+  disableOnState: boolean;
+  [index: string]: unknown;
+}
+
+export const PopoverMenuTrigger = forwardRef<
+  HTMLDivElement,
+  PopoverMenuTriggerProps
+>(({ 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>
+  );
+});

src/profile/ProfileModal.tsx

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useEffect, useState } from "react";
+import React, { ChangeEvent, useCallback, useEffect, useState } from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
 import { Button } from "../button";
 import { useProfile } from "./useProfile";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
@@ -22,7 +24,12 @@ import { Modal, ModalContent } from "../Modal";
 import { AvatarInputField } from "../input/AvatarInputField";
 import styles from "./ProfileModal.module.css";
 
-export function ProfileModal({ client, ...rest }) {
+interface Props {
+  client: MatrixClient;
+  onClose: () => void;
+  [rest: string]: unknown;
+}
+export function ProfileModal({ client, ...rest }: Props) {
   const { onClose } = rest;
   const {
     success,
@@ -40,7 +47,7 @@ export function ProfileModal({ client, ...rest }) {
   }, []);
 
   const onChangeDisplayName = useCallback(
-    (e) => {
+    (e: ChangeEvent<HTMLInputElement>) => {
       setDisplayName(e.target.value);
     },
     [setDisplayName]
@@ -50,13 +57,20 @@ export function ProfileModal({ client, ...rest }) {
     (e) => {
       e.preventDefault();
       const data = new FormData(e.target);
-      const displayName = data.get("displayName");
-      const avatar = data.get("avatar");
+      const displayNameDataEntry = data.get("displayName");
+      const avatar: File | string = data.get("avatar");
+
+      const avatarSize =
+        typeof avatar == "string" ? avatar.length : avatar.size;
+      const displayName =
+        typeof displayNameDataEntry == "string"
+          ? displayNameDataEntry
+          : displayNameDataEntry.name;
 
       saveProfile({
         displayName,
-        avatar: avatar && avatar.size > 0 ? avatar : undefined,
-        removeAvatar: removeAvatar && (!avatar || avatar.size === 0),
+        avatar: avatar && avatarSize > 0 ? avatar : undefined,
+        removeAvatar: removeAvatar && (!avatar || avatarSize === 0),
       });
     },
     [saveProfile, removeAvatar]

src/profile/useProfile.ts

@@ -14,11 +14,33 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { User, UserEvent } from "matrix-js-sdk/src/models/user";
+import { FileType } from "matrix-js-sdk/src/http-api";
 import { useState, useCallback, useEffect } from "react";
 
-export function useProfile(client) {
+interface ProfileLoadState {
+  success?: boolean;
+  loading?: boolean;
+  displayName: string;
+  avatarUrl: string;
+  error?: Error;
+}
+
+type ProfileSaveCallback = ({
+  displayName,
+  avatar,
+  removeAvatar,
+}: {
+  displayName: string;
+  avatar: FileType;
+  removeAvatar: boolean;
+}) => Promise<void>;
+
+export function useProfile(client: MatrixClient) {
   const [{ loading, displayName, avatarUrl, error, success }, setState] =
-    useState(() => {
+    useState<ProfileLoadState>(() => {
       const user = client?.getUser(client.getUserId());
 
       return {
@@ -31,7 +53,10 @@ export function useProfile(client) {
     });
 
   useEffect(() => {
-    const onChangeUser = (_event, { displayName, avatarUrl }) => {
+    const onChangeUser = (
+      _event: MatrixEvent,
+      { displayName, avatarUrl }: User
+    ) => {
       setState({
         success: false,
         loading: false,
@@ -41,24 +66,24 @@ export function useProfile(client) {
       });
     };
 
-    let user;
+    let user: User;
 
     if (client) {
       const userId = client.getUserId();
       user = client.getUser(userId);
-      user.on("User.displayName", onChangeUser);
-      user.on("User.avatarUrl", onChangeUser);
+      user.on(UserEvent.DisplayName, onChangeUser);
+      user.on(UserEvent.AvatarUrl, onChangeUser);
     }
 
     return () => {
       if (user) {
-        user.removeListener("User.displayName", onChangeUser);
-        user.removeListener("User.avatarUrl", onChangeUser);
+        user.removeListener(UserEvent.DisplayName, onChangeUser);
+        user.removeListener(UserEvent.AvatarUrl, onChangeUser);
       }
     };
   }, [client]);
 
-  const saveProfile = useCallback(
+  const saveProfile = useCallback<ProfileSaveCallback>(
     async ({ displayName, avatar, removeAvatar }) => {
       if (client) {
         setState((prev) => ({
@@ -71,7 +96,7 @@ export function useProfile(client) {
         try {
           await client.setDisplayName(displayName);
 
-          let mxcAvatarUrl;
+          let mxcAvatarUrl: string;
 
           if (removeAvatar) {
             await client.setAvatarUrl("");
@@ -87,11 +112,11 @@ export function useProfile(client) {
             loading: false,
             success: true,
           }));
-        } catch (error) {
+        } catch (error: unknown) {
           setState((prev) => ({
             ...prev,
             loading: false,
-            error,
+            error: error instanceof Error ? error : Error(error as string),
             success: false,
           }));
         }
@@ -102,5 +127,12 @@ export function useProfile(client) {
     [client]
   );
 
-  return { loading, error, displayName, avatarUrl, saveProfile, success };
+  return {
+    loading,
+    error,
+    displayName,
+    avatarUrl,
+    saveProfile,
+    success,
+  };
 }

src/room/AudioPreview.tsx

@@ -15,12 +15,24 @@ limitations under the License.
 */
 
 import React from "react";
-import styles from "./AudioPreview.module.css";
 import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
-import { SelectInput } from "../input/SelectInput";
 import { Item } from "@react-stately/collections";
+
+import styles from "./AudioPreview.module.css";
+import { SelectInput } from "../input/SelectInput";
 import { Body } from "../typography/Typography";
 
+interface Props {
+  state: GroupCallState;
+  roomName: string;
+  audioInput: string;
+  audioInputs: MediaDeviceInfo[];
+  setAudioInput: (deviceId: string) => void;
+  audioOutput: string;
+  audioOutputs: MediaDeviceInfo[];
+  setAudioOutput: (deviceId: string) => void;
+}
+
 export function AudioPreview({
   state,
   roomName,
@@ -30,7 +42,7 @@ export function AudioPreview({
   audioOutput,
   audioOutputs,
   setAudioOutput,
-}) {
+}: Props) {
   return (
     <>
       <h1>{`${roomName} - Walkie-talkie call`}</h1>
@@ -53,8 +65,12 @@ export function AudioPreview({
               onSelectionChange={setAudioInput}
               className={styles.inputField}
             >
-              {audioInputs.map(({ deviceId, label }) => (
-                <Item key={deviceId}>{label}</Item>
+              {audioInputs.map(({ deviceId, label }, index) => (
+                <Item key={deviceId}>
+                  {!!label && label.trim().length > 0
+                    ? label
+                    : `Microphone ${index + 1}`}
+                </Item>
               ))}
             </SelectInput>
             {audioOutputs.length > 0 && (
@@ -64,8 +80,12 @@ export function AudioPreview({
                 onSelectionChange={setAudioOutput}
                 className={styles.inputField}
               >
-                {audioOutputs.map(({ deviceId, label }) => (
-                  <Item key={deviceId}>{label}</Item>
+                {audioOutputs.map(({ deviceId, label }, index) => (
+                  <Item key={deviceId}>
+                    {!!label && label.trim().length > 0
+                      ? label
+                      : `Speaker ${index + 1}`}
+                  </Item>
                 ))}
               </SelectInput>
             )}

src/room/CallEndedView.tsx

@@ -15,13 +15,15 @@ limitations under the License.
 */
 
 import React from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
 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 }) {
+export function CallEndedView({ client }: { client: MatrixClient }) {
   const { displayName } = useProfile(client);
 
   return (

src/room/FeedbackModal.tsx

@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 import React, { useCallback, useEffect } from "react";
+import { randomString } from "matrix-js-sdk/src/randomstring";
+
 import { Modal, ModalContent } from "../Modal";
 import { Button } from "../button";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
@@ -23,9 +25,14 @@ import {
   useRageshakeRequest,
 } from "../settings/submit-rageshake";
 import { Body } from "../typography/Typography";
-import { randomString } from "matrix-js-sdk/src/randomstring";
-
-export function FeedbackModal({ inCall, roomId, ...rest }) {
+interface Props {
+  inCall: boolean;
+  roomId: string;
+  onClose?: () => void;
+  // TODO: add all props for for <Modal>
+  [index: string]: unknown;
+}
+export function FeedbackModal({ inCall, roomId, onClose, ...rest }: Props) {
   const { submitRageshake, sending, sent, error } = useSubmitRageshake();
   const sendRageshakeRequest = useRageshakeRequest();
 
@@ -33,8 +40,10 @@ export function FeedbackModal({ inCall, roomId, ...rest }) {
     (e) => {
       e.preventDefault();
       const data = new FormData(e.target);
-      const description = data.get("description");
-      const sendLogs = data.get("sendLogs");
+      const descriptionData = data.get("description");
+      const description =
+        typeof descriptionData === "string" ? descriptionData : "";
+      const sendLogs = Boolean(data.get("sendLogs"));
       const rageshakeRequestId = randomString(16);
 
       submitRageshake({
@@ -53,12 +62,12 @@ export function FeedbackModal({ inCall, roomId, ...rest }) {
 
   useEffect(() => {
     if (sent) {
-      rest.onClose();
+      onClose();
     }
-  }, [sent, rest.onClose]);
+  }, [sent, onClose]);
 
   return (
-    <Modal title="Submit Feedback" isDismissable {...rest}>
+    <Modal title="Submit Feedback" isDismissable onClose={onClose} {...rest}>
       <ModalContent>
         <Body>Having trouble? Help us fix it.</Body>
         <form onSubmit={onSubmitFeedback}>

src/room/GridLayoutMenu.tsx

@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
+import { Item } from "@react-stately/collections";
+
 import { Button } from "../button";
 import { PopoverMenuTrigger } from "../popover/PopoverMenu";
 import { ReactComponent as SpotlightIcon } from "../icons/Spotlight.svg";
@@ -22,19 +24,22 @@ import { ReactComponent as FreedomIcon } from "../icons/Freedom.svg";
 import { ReactComponent as CheckIcon } from "../icons/Check.svg";
 import menuStyles from "../Menu.module.css";
 import { Menu } from "../Menu";
-import { Item } from "@react-stately/collections";
-import { Tooltip, TooltipTrigger } from "../Tooltip";
+import { TooltipTrigger } from "../Tooltip";
 
-export function GridLayoutMenu({ layout, setLayout }) {
+export type Layout = "freedom" | "spotlight";
+interface Props {
+  layout: Layout;
+  setLayout: (layout: Layout) => void;
+}
+export function GridLayoutMenu({ layout, setLayout }: Props) {
   return (
     <PopoverMenuTrigger placement="bottom right">
-      <TooltipTrigger>
+      <TooltipTrigger tooltip={() => "Layout Type"}>
         <Button variant="icon">
           {layout === "spotlight" ? <SpotlightIcon /> : <FreedomIcon />}
         </Button>
-        {() => "Layout Type"}
       </TooltipTrigger>
-      {(props) => (
+      {(props: JSX.IntrinsicAttributes) => (
         <Menu {...props} label="Grid layout menu" onAction={setLayout}>
           <Item key="freedom" textValue="Freedom">
             <FreedomIcon />

src/room/GroupCallInspector.tsx

@@ -23,39 +23,25 @@ import React, {
   createContext,
   useContext,
 } from "react";
-import ReactJson from "react-json-view";
+import ReactJson, { CollapsedFieldProps } from "react-json-view";
 import mermaid from "mermaid";
+import { Item } from "@react-stately/collections";
+import { MatrixEvent, IContent } from "matrix-js-sdk/src/models/event";
+import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
+import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
+import { CallEvent } from "matrix-js-sdk/src/webrtc/call";
+
 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;
+interface InspectorContextState {
+  eventsByUserId?: { [userId: string]: SequenceDiagramMatrixEvent[] };
+  remoteUserIds?: string[];
+  localUserId?: string;
+  localSessionId?: string;
 }
 
-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",
@@ -67,19 +53,19 @@ const defaultCollapsedFields = [
   "content",
 ];
 
-function shouldCollapse({ name, src, type, namespace }) {
+function shouldCollapse({ name }: CollapsedFieldProps) {
   return defaultCollapsedFields.includes(name);
 }
 
-function getUserName(userId) {
-  const match = userId.match(/@([^\:]+):/);
+function getUserName(userId: string) {
+  const match = userId.match(/@([^:]+):/);
 
   return match && match.length > 0
     ? match[1].replace("-", " ").replace(/\W/g, "")
     : userId.replace(/\W/g, "");
 }
 
-function formatContent(type, content) {
+function formatContent(type: string, content: CallEventContent) {
   if (type === "m.call.hangup") {
     return `callId: ${content.call_id.slice(-4)} reason: ${
       content.reason
@@ -109,14 +95,38 @@ function formatContent(type, content) {
   }
 }
 
-function formatTimestamp(timestamp) {
+const dateFormatter = new Intl.DateTimeFormat([], {
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore the linter does not know about this property of the DataTimeFormatOptions
+  fractionalSecondDigits: 3,
+});
+
+function formatTimestamp(timestamp: number | Date) {
   return dateFormatter.format(timestamp);
 }
 
-export const InspectorContext = createContext();
+export const InspectorContext =
+  createContext<
+    [
+      InspectorContextState,
+      React.Dispatch<React.SetStateAction<InspectorContextState>>
+    ]
+  >(undefined);
 
-export function InspectorContextProvider({ children }) {
-  const context = useState({});
+export function InspectorContextProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // We take the tuple of [currentState, setter] and stick
+  // it straight into the context for other things to call
+  // the setState method... this feels like a fairly severe
+  // contortion of the hooks API - is this really the best way
+  // to do this?
+  const context = useState<InspectorContextState>({});
   return (
     <InspectorContext.Provider value={context}>
       {children}
@@ -124,14 +134,43 @@ export function InspectorContextProvider({ children }) {
   );
 }
 
+type CallEventContent = {
+  ["m.calls"]: {
+    ["m.devices"]: { session_id: string; [x: string]: unknown }[];
+    ["m.call_id"]: string;
+  }[];
+} & {
+  call_id: string;
+  reason: string;
+  sender_session_id: string;
+  dest_session_id: string;
+} & IContent;
+
+export type SequenceDiagramMatrixEvent = {
+  to: string;
+  from: string;
+  timestamp: number;
+  type: string;
+  content: CallEventContent;
+  ignored: boolean;
+};
+
+interface SequenceDiagramViewerProps {
+  localUserId: string;
+  remoteUserIds: string[];
+  selectedUserId: string;
+  onSelectUserId: (userId: string) => void;
+  events: SequenceDiagramMatrixEvent[];
+}
+
 export function SequenceDiagramViewer({
   localUserId,
   remoteUserIds,
   selectedUserId,
   onSelectUserId,
   events,
-}) {
-  const mermaidElRef = useRef();
+}: SequenceDiagramViewerProps) {
+  const mermaidElRef = useRef<HTMLDivElement>();
 
   useEffect(() => {
     mermaid.initialize({
@@ -165,7 +204,7 @@ export function SequenceDiagramViewer({
       }
     `;
 
-    mermaid.mermaidAPI.render("mermaid", graphDefinition, (svgCode) => {
+    mermaid.mermaidAPI.render("mermaid", graphDefinition, (svgCode: string) => {
       mermaidElRef.current.innerHTML = svgCode;
     });
   }, [events, localUserId, selectedUserId]);
@@ -190,9 +229,18 @@ export function SequenceDiagramViewer({
   );
 }
 
-function reducer(state, action) {
+function reducer(
+  state: InspectorContextState,
+  action: {
+    type?: CallEvent | ClientEvent | RoomStateEvent;
+    event?: MatrixEvent;
+    rawEvent?: Record<string, unknown>;
+    callStateEvent?: MatrixEvent;
+    memberStateEvents?: MatrixEvent[];
+  }
+) {
   switch (action.type) {
-    case "receive_room_state_event": {
+    case RoomStateEvent.Events: {
       const { event, callStateEvent, memberStateEvents } = action;
 
       let eventsByUserId = state.eventsByUserId;
@@ -247,12 +295,12 @@ function reducer(state, action) {
         ),
       };
     }
-    case "received_voip_event": {
+    case ClientEvent.ReceivedVoipEvent: {
       const event = action.event;
       const eventsByUserId = { ...state.eventsByUserId };
       const fromId = event.getSender();
       const toId = state.localUserId;
-      const content = event.getContent();
+      const content = event.getContent<CallEventContent>();
 
       const remoteUserIds = eventsByUserId[fromId]
         ? state.remoteUserIds
@@ -272,11 +320,11 @@ function reducer(state, action) {
 
       return { ...state, eventsByUserId, remoteUserIds };
     }
-    case "send_voip_event": {
-      const event = action.event;
+    case CallEvent.SendVoipEvent: {
+      const event = action.rawEvent;
       const eventsByUserId = { ...state.eventsByUserId };
       const fromId = state.localUserId;
-      const toId = event.userId;
+      const toId = event.userId as string;
 
       const remoteUserIds = eventsByUserId[toId]
         ? state.remoteUserIds
@@ -287,8 +335,8 @@ function reducer(state, action) {
         {
           from: fromId,
           to: toId,
-          type: event.eventType,
-          content: event.content,
+          type: event.eventType as string,
+          content: event.content as CallEventContent,
           timestamp: Date.now(),
           ignored: false,
         },
@@ -301,7 +349,11 @@ function reducer(state, action) {
   }
 }
 
-function useGroupCallState(client, groupCall, pollCallStats) {
+function useGroupCallState(
+  client: MatrixClient,
+  groupCall: GroupCall,
+  showPollCallStats: boolean
+) {
   const [state, dispatch] = useReducer(reducer, {
     localUserId: client.getUserId(),
     localSessionId: client.getSessionId(),
@@ -312,7 +364,7 @@ function useGroupCallState(client, groupCall, pollCallStats) {
   });
 
   useEffect(() => {
-    function onUpdateRoomState(event) {
+    function onUpdateRoomState(event?: MatrixEvent) {
       const callStateEvent = groupCall.room.currentState.getStateEvents(
         "org.matrix.msc3401.call",
         groupCall.groupCallId
@@ -323,120 +375,60 @@ function useGroupCallState(client, groupCall, pollCallStats) {
       );
 
       dispatch({
-        type: "receive_room_state_event",
+        type: RoomStateEvent.Events,
         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 onReceivedVoipEvent(event: MatrixEvent) {
+      dispatch({ type: ClientEvent.ReceivedVoipEvent, event });
     }
 
-    function onSendVoipEvent(event) {
-      dispatch({ type: "send_voip_event", event });
+    function onSendVoipEvent(event: Record<string, unknown>) {
+      dispatch({ type: CallEvent.SendVoipEvent, rawEvent: event });
     }
-
-    client.on("RoomState.events", onUpdateRoomState);
+    client.on(RoomStateEvent.Events, onUpdateRoomState);
     //groupCall.on("calls_changed", onCallsChanged);
-    groupCall.on("send_voip_event", onSendVoipEvent);
+    groupCall.on(CallEvent.SendVoipEvent, onSendVoipEvent);
     //client.on("state", onCallsChanged);
     //client.on("hangup", onCallHangup);
-    client.on("received_voip_event", onReceivedVoipEvent);
+    client.on(ClientEvent.ReceivedVoipEvent, onReceivedVoipEvent);
 
     onUpdateRoomState();
 
     return () => {
-      client.removeListener("RoomState.events", onUpdateRoomState);
+      client.removeListener(RoomStateEvent.Events, onUpdateRoomState);
       //groupCall.removeListener("calls_changed", onCallsChanged);
-      groupCall.removeListener("send_voip_event", onSendVoipEvent);
+      groupCall.removeListener(CallEvent.SendVoipEvent, onSendVoipEvent);
       //client.removeListener("state", onCallsChanged);
       //client.removeListener("hangup", onCallHangup);
-      client.removeListener("received_voip_event", onReceivedVoipEvent);
+      client.removeListener(ClientEvent.ReceivedVoipEvent, 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 }) {
+interface GroupCallInspectorProps {
+  client: MatrixClient;
+  groupCall: GroupCall;
+  show: boolean;
+}
+export function GroupCallInspector({
+  client,
+  groupCall,
+  show,
+}: GroupCallInspectorProps) {
   const [currentTab, setCurrentTab] = useState("sequence-diagrams");
-  const [selectedUserId, setSelectedUserId] = useState();
+  const [selectedUserId, setSelectedUserId] = useState<string>();
   const state = useGroupCallState(client, groupCall, show);
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, setState] = useContext(InspectorContext);
 
   useEffect(() => {
-    setState({ json: state });
+    setState(state);
   }, [setState, state]);
 
   if (!show) {
@@ -446,7 +438,7 @@ export function GroupCallInspector({ client, groupCall, show }) {
   return (
     <Resizable
       enable={{ top: true }}
-      defaultSize={{ height: 200 }}
+      defaultSize={{ height: 200, width: undefined }}
       className={styles.inspector}
     >
       <div className={styles.toolbar}>

src/room/GroupCallLoader.tsx

@@ -14,17 +14,34 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+
 import { useLoadGroupCall } from "./useLoadGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
 import { usePageTitle } from "../usePageTitle";
 
-export function GroupCallLoader({ client, roomId, viaServers, children }) {
+interface Props {
+  client: MatrixClient;
+  roomIdOrAlias: string;
+  viaServers: string[];
+  children: (groupCall: GroupCall) => ReactNode;
+  createPtt: boolean;
+}
+
+export function GroupCallLoader({
+  client,
+  roomIdOrAlias,
+  viaServers,
+  children,
+  createPtt,
+}: Props): JSX.Element {
   const { loading, error, groupCall } = useLoadGroupCall(
     client,
-    roomId,
+    roomIdOrAlias,
     viaServers,
-    true
+    createPtt
   );
 
   usePageTitle(groupCall ? groupCall.room.name : "Loading...");
@@ -41,5 +58,5 @@ export function GroupCallLoader({ client, roomId, viaServers, children }) {
     return <ErrorView error={error} />;
   }
 
-  return children(groupCall);
+  return <>{children(groupCall)}</>;
 }

src/room/GroupCallView.tsx

@@ -16,7 +16,9 @@ limitations under the License.
 
 import React, { useCallback, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
-import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
+import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
 import { useGroupCall } from "./useGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
 import { LobbyView } from "./LobbyView";
@@ -26,13 +28,25 @@ import { CallEndedView } from "./CallEndedView";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 import { useLocationNavigation } from "../useLocationNavigation";
-
+declare global {
+  interface Window {
+    groupCall: GroupCall;
+  }
+}
+interface Props {
+  client: MatrixClient;
+  isPasswordlessUser: boolean;
+  isEmbedded: boolean;
+  roomIdOrAlias: string;
+  groupCall: GroupCall;
+}
 export function GroupCallView({
   client,
   isPasswordlessUser,
-  roomId,
+  isEmbedded,
+  roomIdOrAlias,
   groupCall,
-}) {
+}: Props) {
   const {
     state,
     error,
@@ -51,15 +65,18 @@ export function GroupCallView({
     isScreensharing,
     localScreenshareFeed,
     screenshareFeeds,
-    hasLocalParticipant,
     participants,
+    unencryptedEventsFromUsers,
   } = useGroupCall(groupCall);
 
   const avatarUrl = useRoomAvatar(groupCall.room);
 
   useEffect(() => {
     window.groupCall = groupCall;
-  }, [groupCall]);
+
+    // In embedded mode, bypass the lobby and just enter the call straight away
+    if (isEmbedded) groupCall.enter();
+  }, [groupCall, isEmbedded]);
 
   useSentryGroupCallHandler(groupCall);
 
@@ -75,7 +92,7 @@ export function GroupCallView({
     if (!isPasswordlessUser) {
       history.push("/");
     }
-  }, [leave, history]);
+  }, [leave, isPasswordlessUser, history]);
 
   if (error) {
     return <ErrorView error={error} />;
@@ -84,13 +101,14 @@ export function GroupCallView({
       return (
         <PTTCallView
           client={client}
-          roomId={roomId}
+          roomIdOrAlias={roomIdOrAlias}
           roomName={groupCall.room.name}
           avatarUrl={avatarUrl}
           groupCall={groupCall}
           participants={participants}
           userMediaFeeds={userMediaFeeds}
           onLeave={onLeave}
+          isEmbedded={isEmbedded}
         />
       );
     } else {
@@ -111,7 +129,8 @@ export function GroupCallView({
           isScreensharing={isScreensharing}
           localScreenshareFeed={localScreenshareFeed}
           screenshareFeeds={screenshareFeeds}
-          roomId={roomId}
+          roomIdOrAlias={roomIdOrAlias}
+          unencryptedEventsFromUsers={unencryptedEventsFromUsers}
         />
       );
     }
@@ -124,23 +143,31 @@ export function GroupCallView({
   } else if (left) {
     return <CallEndedView client={client} />;
   } else {
-    return (
-      <LobbyView
-        client={client}
-        groupCall={groupCall}
-        hasLocalParticipant={hasLocalParticipant}
-        roomName={groupCall.room.name}
-        avatarUrl={avatarUrl}
-        state={state}
-        onInitLocalCallFeed={initLocalCallFeed}
-        localCallFeed={localCallFeed}
-        onEnter={enter}
-        microphoneMuted={microphoneMuted}
-        localVideoMuted={localVideoMuted}
-        toggleLocalVideoMuted={toggleLocalVideoMuted}
-        toggleMicrophoneMuted={toggleMicrophoneMuted}
-        roomId={roomId}
-      />
-    );
+    if (isEmbedded) {
+      return (
+        <FullScreenView>
+          <h1>Loading room...</h1>
+        </FullScreenView>
+      );
+    } else {
+      return (
+        <LobbyView
+          client={client}
+          groupCall={groupCall}
+          roomName={groupCall.room.name}
+          avatarUrl={avatarUrl}
+          state={state}
+          onInitLocalCallFeed={initLocalCallFeed}
+          localCallFeed={localCallFeed}
+          onEnter={enter}
+          microphoneMuted={microphoneMuted}
+          localVideoMuted={localVideoMuted}
+          toggleLocalVideoMuted={toggleLocalVideoMuted}
+          toggleMicrophoneMuted={toggleMicrophoneMuted}
+          roomIdOrAlias={roomIdOrAlias}
+          isEmbedded={isEmbedded}
+        />
+      );
+    }
   }
 }

src/room/InCallView.jsx

@@ -1,197 +0,0 @@
-/*
-Copyright 2022 Matrix.org Foundation C.I.C.
-
-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, useMemo, useRef } 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 "../video-grid/VideoGrid";
-import { VideoTileContainer } from "../video-grid/VideoTileContainer";
-import { GroupCallInspector } from "./GroupCallInspector";
-import { OverflowMenu } from "./OverflowMenu";
-import { GridLayoutMenu } from "./GridLayoutMenu";
-import { Avatar } from "../Avatar";
-import { UserMenuContainer } from "../UserMenuContainer";
-import { useRageshakeRequestModal } from "../settings/submit-rageshake";
-import { RageshakeRequestModal } from "./RageshakeRequestModal";
-import { usePreventScroll } from "@react-aria/overlays";
-import { useMediaHandler } from "../settings/useMediaHandler";
-import { useShowInspector } from "../settings/useSetting";
-import { useModalTriggerState } from "../Modal";
-
-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,
-  avatarUrl,
-  microphoneMuted,
-  localVideoMuted,
-  toggleLocalVideoMuted,
-  toggleMicrophoneMuted,
-  userMediaFeeds,
-  activeSpeaker,
-  onLeave,
-  toggleScreensharing,
-  isScreensharing,
-  screenshareFeeds,
-  roomId,
-}) {
-  usePreventScroll();
-  const [layout, setLayout] = useVideoGridLayout(screenshareFeeds.length > 0);
-
-  const { audioOutput } = useMediaHandler();
-  const [showInspector] = useShowInspector();
-
-  const audioContext = useRef();
-  if (!audioContext.current) audioContext.current = new AudioContext();
-
-  const { modalState: feedbackModalState, modalProps: feedbackModalProps } =
-    useModalTriggerState();
-
-  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,
-        isLocal: callFeed.isLocal(),
-      });
-    }
-
-    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,
-        isLocal: callFeed.isLocal(),
-      });
-    }
-
-    return participants;
-  }, [userMediaFeeds, activeSpeaker, screenshareFeeds, layout]);
-
-  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}
-          size={size}
-          src={avatarUrl}
-          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} avatarUrl={avatarUrl} />
-        </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>
-      ) : (
-        <VideoGrid items={items} layout={layout} disableAnimations={isSafari}>
-          {({ item, ...rest }) => (
-            <VideoTileContainer
-              key={item.id}
-              item={item}
-              getAvatar={renderAvatar}
-              showName={items.length > 2 || item.focused}
-              audioOutputDevice={audioOutput}
-              audioContext={audioContext.current}
-              disableSpeakingIndicator={items.length < 3}
-              {...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}
-          client={client}
-          groupCall={groupCall}
-          showInvite={true}
-          feedbackModalState={feedbackModalState}
-          feedbackModalProps={feedbackModalProps}
-        />
-        <HangupButton onPress={onLeave} />
-      </div>
-      <GroupCallInspector
-        client={client}
-        groupCall={groupCall}
-        show={showInspector}
-      />
-      {rageshakeRequestModalState.isOpen && (
-        <RageshakeRequestModal
-          {...rageshakeRequestModalProps}
-          roomId={roomId}
-        />
-      )}
-    </div>
-  );
-}

src/room/InCallView.module.css

@@ -54,6 +54,12 @@ limitations under the License.
   margin-right: 0px;
 }
 
+.footerFullscreen {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+}
+
 .avatar {
   position: absolute;
   top: 50%;

src/room/InCallView.tsx

@@ -0,0 +1,299 @@
+/*
+Copyright 2022 Matrix.org Foundation C.I.C.
+
+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, useMemo, useRef } from "react";
+import { usePreventScroll } from "@react-aria/overlays";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+import classNames from "classnames";
+
+import styles from "./InCallView.module.css";
+import {
+  HangupButton,
+  MicButton,
+  VideoButton,
+  ScreenshareButton,
+} from "../button";
+import {
+  Header,
+  LeftNav,
+  RightNav,
+  RoomHeaderInfo,
+  VersionMismatchWarning,
+} from "../Header";
+import { VideoGrid, useVideoGridLayout } from "../video-grid/VideoGrid";
+import { VideoTileContainer } from "../video-grid/VideoTileContainer";
+import { GroupCallInspector } from "./GroupCallInspector";
+import { OverflowMenu } from "./OverflowMenu";
+import { GridLayoutMenu } from "./GridLayoutMenu";
+import { Avatar } from "../Avatar";
+import { UserMenuContainer } from "../UserMenuContainer";
+import { useRageshakeRequestModal } from "../settings/submit-rageshake";
+import { RageshakeRequestModal } from "./RageshakeRequestModal";
+import { useMediaHandler } from "../settings/useMediaHandler";
+import { useShowInspector, useSpatialAudio } from "../settings/useSetting";
+import { useModalTriggerState } from "../Modal";
+import { useAudioContext } from "../video-grid/useMediaStream";
+import { useFullscreen } from "../video-grid/useFullscreen";
+import { AudioContainer } from "../video-grid/AudioContainer";
+import { useAudioOutputDevice } from "../video-grid/useAudioOutputDevice";
+
+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);
+
+interface Props {
+  client: MatrixClient;
+  groupCall: GroupCall;
+  roomName: string;
+  avatarUrl: string;
+  microphoneMuted: boolean;
+  localVideoMuted: boolean;
+  toggleLocalVideoMuted: () => void;
+  toggleMicrophoneMuted: () => void;
+  toggleScreensharing: () => void;
+  userMediaFeeds: CallFeed[];
+  activeSpeaker: string;
+  onLeave: () => void;
+  isScreensharing: boolean;
+  screenshareFeeds: CallFeed[];
+  localScreenshareFeed: CallFeed;
+  roomIdOrAlias: string;
+  unencryptedEventsFromUsers: Set<string>;
+}
+
+export interface Participant {
+  id: string;
+  focused: boolean;
+  presenter: boolean;
+  callFeed?: CallFeed;
+  isLocal?: boolean;
+}
+
+export function InCallView({
+  client,
+  groupCall,
+  roomName,
+  avatarUrl,
+  microphoneMuted,
+  localVideoMuted,
+  toggleLocalVideoMuted,
+  toggleMicrophoneMuted,
+  userMediaFeeds,
+  activeSpeaker,
+  onLeave,
+  toggleScreensharing,
+  isScreensharing,
+  screenshareFeeds,
+  localScreenshareFeed,
+  roomIdOrAlias,
+  unencryptedEventsFromUsers,
+}: Props) {
+  usePreventScroll();
+  const elementRef = useRef<HTMLDivElement>();
+  const { layout, setLayout } = useVideoGridLayout(screenshareFeeds.length > 0);
+  const { toggleFullscreen, fullscreenParticipant } = useFullscreen(elementRef);
+
+  const [spatialAudio] = useSpatialAudio();
+
+  const [audioContext, audioDestination, audioRef] = useAudioContext();
+  const { audioOutput } = useMediaHandler();
+  const [showInspector] = useShowInspector();
+
+  const { modalState: feedbackModalState, modalProps: feedbackModalProps } =
+    useModalTriggerState();
+
+  useAudioOutputDevice(audioRef, audioOutput);
+
+  const items = useMemo(() => {
+    const participants: Participant[] = [];
+
+    for (const callFeed of userMediaFeeds) {
+      participants.push({
+        id: callFeed.stream.id,
+        callFeed,
+        focused:
+          screenshareFeeds.length === 0 && layout === "spotlight"
+            ? callFeed.userId === activeSpeaker
+            : false,
+        isLocal: callFeed.isLocal(),
+        presenter: 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,
+        isLocal: callFeed.isLocal(),
+        presenter: false,
+      });
+    }
+
+    return participants;
+  }, [userMediaFeeds, activeSpeaker, screenshareFeeds, layout]);
+
+  const renderAvatar = useCallback(
+    (roomMember: RoomMember, width: number, height: number) => {
+      const avatarUrl = roomMember.user?.avatarUrl;
+      const size = Math.round(Math.min(width, height) / 2);
+
+      return (
+        <Avatar
+          key={roomMember.userId}
+          size={size}
+          src={avatarUrl}
+          fallback={roomMember.name.slice(0, 1).toUpperCase()}
+          className={styles.avatar}
+        />
+      );
+    },
+    []
+  );
+
+  const renderContent = useCallback((): JSX.Element => {
+    if (items.length === 0) {
+      return (
+        <div className={styles.centerMessage}>
+          <p>Waiting for other participants...</p>
+        </div>
+      );
+    }
+    if (fullscreenParticipant) {
+      return (
+        <VideoTileContainer
+          key={fullscreenParticipant.id}
+          item={fullscreenParticipant}
+          getAvatar={renderAvatar}
+          audioContext={audioContext}
+          audioDestination={audioDestination}
+          disableSpeakingIndicator={true}
+          isFullscreen={!!fullscreenParticipant}
+          onFullscreen={toggleFullscreen}
+        />
+      );
+    }
+
+    return (
+      <VideoGrid items={items} layout={layout} disableAnimations={isSafari}>
+        {({ item, ...rest }: { item: Participant; [x: string]: unknown }) => (
+          <VideoTileContainer
+            key={item.id}
+            item={item}
+            getAvatar={renderAvatar}
+            audioContext={audioContext}
+            audioDestination={audioDestination}
+            disableSpeakingIndicator={items.length < 3}
+            isFullscreen={!!fullscreenParticipant}
+            onFullscreen={toggleFullscreen}
+            {...rest}
+          />
+        )}
+      </VideoGrid>
+    );
+  }, [
+    fullscreenParticipant,
+    items,
+    audioContext,
+    audioDestination,
+    layout,
+    renderAvatar,
+    toggleFullscreen,
+  ]);
+
+  const {
+    modalState: rageshakeRequestModalState,
+    modalProps: rageshakeRequestModalProps,
+  } = useRageshakeRequestModal(groupCall.room.roomId);
+
+  const footerClassNames = classNames(styles.footer, {
+    [styles.footerFullscreen]: fullscreenParticipant,
+  });
+
+  return (
+    <div className={styles.inRoom} ref={elementRef}>
+      <audio ref={audioRef} />
+      {(!spatialAudio || fullscreenParticipant) && (
+        <AudioContainer
+          items={items}
+          audioContext={audioContext}
+          audioDestination={audioDestination}
+        />
+      )}
+      {!fullscreenParticipant && (
+        <Header>
+          <LeftNav>
+            <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
+            <VersionMismatchWarning
+              users={unencryptedEventsFromUsers}
+              room={groupCall.room}
+            />
+          </LeftNav>
+          <RightNav>
+            <GridLayoutMenu layout={layout} setLayout={setLayout} />
+            <UserMenuContainer preventNavigation />
+          </RightNav>
+        </Header>
+      )}
+      {renderContent()}
+      <div className={footerClassNames}>
+        <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
+        <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
+        {canScreenshare && !isSafari && !fullscreenParticipant && (
+          <ScreenshareButton
+            enabled={isScreensharing}
+            onPress={toggleScreensharing}
+          />
+        )}
+        {!fullscreenParticipant && (
+          <OverflowMenu
+            inCall
+            roomIdOrAlias={roomIdOrAlias}
+            groupCall={groupCall}
+            showInvite={true}
+            feedbackModalState={feedbackModalState}
+            feedbackModalProps={feedbackModalProps}
+          />
+        )}
+        <HangupButton onPress={onLeave} />
+      </div>
+      <GroupCallInspector
+        client={client}
+        groupCall={groupCall}
+        show={showInspector}
+      />
+      {rageshakeRequestModalState.isOpen && (
+        <RageshakeRequestModal
+          {...rageshakeRequestModalProps}
+          roomIdOrAlias={roomIdOrAlias}
+        />
+      )}
+    </div>
+  );
+}

src/room/InviteModal.tsx

@@ -14,24 +14,30 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import { Modal, ModalContent } from "../Modal";
+import React, { FC } from "react";
+
+import { Modal, ModalContent, ModalProps } from "../Modal";
 import { CopyButton } from "../button";
 import { getRoomUrl } from "../matrix-utils";
 import styles from "./InviteModal.module.css";
 
-export function InviteModal({ roomId, ...rest }) {
-  return (
-    <Modal
-      title="Invite People"
-      isDismissable
-      className={styles.inviteModal}
-      {...rest}
-    >
-      <ModalContent>
-        <p>Copy and share this meeting link</p>
-        <CopyButton className={styles.copyButton} value={getRoomUrl(roomId)} />
-      </ModalContent>
-    </Modal>
-  );
+interface Props extends Omit<ModalProps, "title" | "children"> {
+  roomIdOrAlias: string;
 }
+
+export const InviteModal: FC<Props> = ({ roomIdOrAlias, ...rest }) => (
+  <Modal
+    title="Invite People"
+    isDismissable
+    className={styles.inviteModal}
+    {...rest}
+  >
+    <ModalContent>
+      <p>Copy and share this meeting link</p>
+      <CopyButton
+        className={styles.copyButton}
+        value={getRoomUrl(roomIdOrAlias)}
+      />
+    </ModalContent>
+  </Modal>
+);

src/room/LobbyView.tsx

@@ -15,10 +15,14 @@ limitations under the License.
 */
 
 import React, { useEffect, useRef } from "react";
+import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { PressEvent } from "@react-types/shared";
+import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+
 import styles from "./LobbyView.module.css";
 import { Button, CopyButton } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
-import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import { useCallFeed } from "../video-grid/useCallFeed";
 import { getRoomUrl } from "../matrix-utils";
 import { UserMenuContainer } from "../UserMenuContainer";
@@ -28,6 +32,22 @@ import { useMediaHandler } from "../settings/useMediaHandler";
 import { VideoPreview } from "./VideoPreview";
 import { AudioPreview } from "./AudioPreview";
 
+interface Props {
+  client: MatrixClient;
+  groupCall: GroupCall;
+  roomName: string;
+  avatarUrl: string;
+  state: GroupCallState;
+  onInitLocalCallFeed: () => void;
+  onEnter: (e: PressEvent) => void;
+  localCallFeed: CallFeed;
+  microphoneMuted: boolean;
+  toggleLocalVideoMuted: () => void;
+  toggleMicrophoneMuted: () => void;
+  localVideoMuted: boolean;
+  roomIdOrAlias: string;
+  isEmbedded: boolean;
+}
 export function LobbyView({
   client,
   groupCall,
@@ -41,8 +61,9 @@ export function LobbyView({
   localVideoMuted,
   toggleLocalVideoMuted,
   toggleMicrophoneMuted,
-  roomId,
-}) {
+  roomIdOrAlias,
+  isEmbedded,
+}: Props) {
   const { stream } = useCallFeed(localCallFeed);
   const {
     audioInput,
@@ -59,7 +80,7 @@ export function LobbyView({
 
   useLocationNavigation(state === GroupCallState.InitializingLocalCallFeed);
 
-  const joinCallButtonRef = useRef();
+  const joinCallButtonRef = useRef<HTMLButtonElement>();
 
   useEffect(() => {
     if (state === GroupCallState.LocalCallFeedInitialized) {
@@ -94,7 +115,7 @@ export function LobbyView({
             <VideoPreview
               state={state}
               client={client}
-              roomId={roomId}
+              roomIdOrAlias={roomIdOrAlias}
               microphoneMuted={microphoneMuted}
               localVideoMuted={localVideoMuted}
               toggleLocalVideoMuted={toggleLocalVideoMuted}
@@ -115,18 +136,20 @@ export function LobbyView({
           <Body>Or</Body>
           <CopyButton
             variant="secondaryCopy"
-            value={getRoomUrl(roomId)}
+            value={getRoomUrl(roomIdOrAlias)}
             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>
+        {!isEmbedded && (
+          <Body className={styles.joinRoomFooter}>
+            <Link color="primary" to="/">
+              Take me Home
+            </Link>
+          </Body>
+        )}
       </div>
     </div>
   );

src/room/OverflowMenu.tsx

@@ -15,10 +15,13 @@ limitations under the License.
 */
 
 import React, { useCallback } from "react";
+import { Item } from "@react-stately/collections";
+import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+import { OverlayTriggerState } from "@react-stately/overlays";
+
 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";
@@ -28,47 +31,75 @@ import { SettingsModal } from "../settings/SettingsModal";
 import { InviteModal } from "./InviteModal";
 import { TooltipTrigger } from "../Tooltip";
 import { FeedbackModal } from "./FeedbackModal";
-
+interface Props {
+  roomIdOrAlias: string;
+  inCall: boolean;
+  groupCall: GroupCall;
+  showInvite: boolean;
+  feedbackModalState: OverlayTriggerState;
+  feedbackModalProps: {
+    isOpen: boolean;
+    onClose: () => void;
+  };
+}
 export function OverflowMenu({
-  roomId,
+  roomIdOrAlias,
   inCall,
   groupCall,
   showInvite,
   feedbackModalState,
   feedbackModalProps,
-}) {
-  const { modalState: inviteModalState, modalProps: inviteModalProps } =
-    useModalTriggerState();
-  const { modalState: settingsModalState, modalProps: settingsModalProps } =
-    useModalTriggerState();
+}: Props) {
+  const {
+    modalState: inviteModalState,
+    modalProps: inviteModalProps,
+  }: {
+    modalState: OverlayTriggerState;
+    modalProps: {
+      isOpen: boolean;
+      onClose: () => void;
+    };
+  } = useModalTriggerState();
+  const {
+    modalState: settingsModalState,
+    modalProps: settingsModalProps,
+  }: {
+    modalState: OverlayTriggerState;
+    modalProps: {
+      isOpen: boolean;
+      onClose: () => void;
+    };
+  } = useModalTriggerState();
 
   // TODO: On closing modal, focus should be restored to the trigger button
   // https://github.com/adobe/react-spectrum/issues/2444
-  const onAction = useCallback((key) => {
-    switch (key) {
-      case "invite":
-        inviteModalState.open();
-        break;
-      case "settings":
-        settingsModalState.open();
-        break;
-      case "feedback":
-        feedbackModalState.open();
-        break;
-    }
-  });
+  const onAction = useCallback(
+    (key) => {
+      switch (key) {
+        case "invite":
+          inviteModalState.open();
+          break;
+        case "settings":
+          settingsModalState.open();
+          break;
+        case "feedback":
+          feedbackModalState.open();
+          break;
+      }
+    },
+    [feedbackModalState, inviteModalState, settingsModalState]
+  );
 
   return (
     <>
       <PopoverMenuTrigger disableOnState>
-        <TooltipTrigger placement="top">
+        <TooltipTrigger tooltip={() => "More"} placement="top">
           <Button variant="toolbar">
             <OverflowIcon />
           </Button>
-          {() => "More"}
         </TooltipTrigger>
-        {(props) => (
-          <Menu {...props} label="More menu" onAction={onAction}>
+        {(props: JSX.IntrinsicAttributes) => (
+          <Menu {...props} label="more menu" onAction={onAction}>
             {showInvite && (
               <Item key="invite" textValue="Invite people">
                 <AddUserIcon />
@@ -88,7 +119,7 @@ export function OverflowMenu({
       </PopoverMenuTrigger>
       {settingsModalState.isOpen && <SettingsModal {...settingsModalProps} />}
       {inviteModalState.isOpen && (
-        <InviteModal roomId={roomId} {...inviteModalProps} />
+        <InviteModal roomIdOrAlias={roomIdOrAlias} {...inviteModalProps} />
       )}
       {feedbackModalState.isOpen && (
         <FeedbackModal

src/room/PTTButton.module.css

@@ -1,22 +1,39 @@
 .pttButton {
   width: 100vw;
-  height: 100vh;
-  max-height: 232px;
-  max-width: 232px;
+  aspect-ratio: 1;
+  max-height: min(232px, calc(100vh - 16px));
+  max-width: min(232px, calc(100vw - 16px));
   border-radius: 116px;
   color: var(--primary-content);
   border: 6px solid var(--accent);
   background-color: #21262c;
   position: relative;
   padding: 0;
+  margin: 4px;
   cursor: pointer;
 }
 
+.micIcon {
+  max-height: 50%;
+}
+
+.avatar {
+  /* Remove explicit size to allow avatar to scale with the button */
+  width: 100% !important;
+  height: 100% !important;
+}
+
 .talking {
   background-color: var(--accent);
   cursor: unset;
 }
 
+.networkWaiting {
+  background-color: var(--tertiary-content);
+  border-color: var(--tertiary-content);
+  cursor: unset;
+}
+
 .error {
   background-color: var(--alert);
   border-color: var(--alert);

src/room/PTTButton.tsx

@@ -14,15 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useEffect, useState, createRef } from "react";
+import React, { useCallback, useState, useRef } from "react";
 import classNames from "classnames";
 import { useSpring, animated } from "@react-spring/web";
 
 import styles from "./PTTButton.module.css";
 import { ReactComponent as MicIcon } from "../icons/Mic.svg";
+import { useEventTarget } from "../useEvents";
 import { Avatar } from "../Avatar";
 
 interface Props {
+  enabled: boolean;
   showTalkOverError: boolean;
   activeSpeakerUserId: string;
   activeSpeakerDisplayName: string;
@@ -32,15 +34,13 @@ interface Props {
   size: number;
   startTalking: () => void;
   stopTalking: () => void;
-}
-
-interface State {
-  isHeld: boolean;
-  // If the button is being pressed by touch, the ID of that touch
-  activeTouchID: number | null;
+  networkWaiting: boolean;
+  enqueueNetworkWaiting: (value: boolean, delay: number) => void;
+  setNetworkWaiting: (value: boolean) => void;
 }
 
 export const PTTButton: React.FC<Props> = ({
+  enabled,
   showTalkOverError,
   activeSpeakerUserId,
   activeSpeakerDisplayName,
@@ -50,89 +50,114 @@ export const PTTButton: React.FC<Props> = ({
   size,
   startTalking,
   stopTalking,
+  networkWaiting,
+  enqueueNetworkWaiting,
+  setNetworkWaiting,
 }) => {
-  const buttonRef = createRef<HTMLButtonElement>();
+  const buttonRef = useRef<HTMLButtonElement>();
 
-  const [{ isHeld, activeTouchID }, setState] = useState<State>({
-    isHeld: false,
-    activeTouchID: null,
-  });
-  const onWindowMouseUp = useCallback(
-    (e) => {
-      if (isHeld) stopTalking();
-      setState({ isHeld: false, activeTouchID: null });
-    },
-    [isHeld, setState, stopTalking]
-  );
+  const [activeTouchId, setActiveTouchId] = useState<number | null>(null);
+  const [buttonHeld, setButtonHeld] = useState(false);
 
-  const onWindowTouchEnd = useCallback(
-    (e: TouchEvent) => {
-      // ignore any ended touches that weren't the one pressing the
-      // button (bafflingly the TouchList isn't an iterable so we
-      // have to do this a really old-school way).
-      let touchFound = false;
-      for (let i = 0; i < e.changedTouches.length; ++i) {
-        if (e.changedTouches.item(i).identifier === activeTouchID) {
-          touchFound = true;
-          break;
-        }
-      }
-      if (!touchFound) return;
-
-      e.preventDefault();
-      if (isHeld) stopTalking();
-      setState({ isHeld: false, activeTouchID: null });
-    },
-    [isHeld, activeTouchID, setState, stopTalking]
-  );
+  const hold = useCallback(() => {
+    // This update is delayed so the user only sees it if latency is significant
+    if (buttonHeld) return;
+    setButtonHeld(true);
+    enqueueNetworkWaiting(true, 100);
+    startTalking();
+  }, [enqueueNetworkWaiting, startTalking, buttonHeld]);
+  const unhold = useCallback(() => {
+    setButtonHeld(false);
+    setNetworkWaiting(false);
+    stopTalking();
+  }, [setNetworkWaiting, stopTalking]);
 
   const onButtonMouseDown = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
       e.preventDefault();
-      setState({ isHeld: true, activeTouchID: null });
-      startTalking();
+      hold();
     },
-    [setState, startTalking]
+    [hold]
   );
 
-  const onButtonTouchStart = useCallback(
-    (e: TouchEvent) => {
-      e.preventDefault();
+  // These listeners go on the window so even if the user's cursor / finger
+  // leaves the button while holding it, the button stays pushed until
+  // they stop clicking / tapping.
+  useEventTarget(window, "mouseup", unhold);
+  useEventTarget(
+    window,
+    "touchend",
+    useCallback(
+      (e: TouchEvent) => {
+        // ignore any ended touches that weren't the one pressing the
+        // button (bafflingly the TouchList isn't an iterable so we
+        // have to do this a really old-school way).
+        let touchFound = false;
+        for (let i = 0; i < e.changedTouches.length; ++i) {
+          if (e.changedTouches.item(i).identifier === activeTouchId) {
+            touchFound = true;
+            break;
+          }
+        }
+        if (!touchFound) return;
 
-      if (isHeld) return;
-
-      setState({
-        isHeld: true,
-        activeTouchID: e.changedTouches.item(0).identifier,
-      });
-      startTalking();
-    },
-    [isHeld, setState, startTalking]
+        e.preventDefault();
+        unhold();
+        setActiveTouchId(null);
+      },
+      [unhold, activeTouchId, setActiveTouchId]
+    )
   );
 
-  useEffect(() => {
-    const currentButtonElement = buttonRef.current;
+  // This is a native DOM listener too because we want to preventDefault in it
+  // to stop also getting a click event, so we need it to be non-passive.
+  useEventTarget(
+    buttonRef.current,
+    "touchstart",
+    useCallback(
+      (e: TouchEvent) => {
+        e.preventDefault();
 
-    // These listeners go on the window so even if the user's cursor / finger
-    // leaves the button while holding it, the button stays pushed until
-    // they stop clicking / tapping.
-    window.addEventListener("mouseup", onWindowMouseUp);
-    window.addEventListener("touchend", onWindowTouchEnd);
-    // This is a native DOM listener too because we want to preventDefault in it
-    // to stop also getting a click event, so we need it to be non-passive.
-    currentButtonElement.addEventListener("touchstart", onButtonTouchStart, {
-      passive: false,
-    });
+        hold();
+        setActiveTouchId(e.changedTouches.item(0).identifier);
+      },
+      [hold, setActiveTouchId]
+    ),
+    { passive: false }
+  );
 
-    return () => {
-      window.removeEventListener("mouseup", onWindowMouseUp);
-      window.removeEventListener("touchend", onWindowTouchEnd);
-      currentButtonElement.removeEventListener(
-        "touchstart",
-        onButtonTouchStart
-      );
-    };
-  }, [onWindowMouseUp, onWindowTouchEnd, onButtonTouchStart, buttonRef]);
+  useEventTarget(
+    window,
+    "keydown",
+    useCallback(
+      (e: KeyboardEvent) => {
+        if (e.code === "Space") {
+          if (!enabled) return;
+          e.preventDefault();
+
+          hold();
+        }
+      },
+      [enabled, hold]
+    )
+  );
+  useEventTarget(
+    window,
+    "keyup",
+    useCallback(
+      (e: KeyboardEvent) => {
+        if (e.code === "Space") {
+          e.preventDefault();
+
+          unhold();
+        }
+      },
+      [unhold]
+    )
+  );
+
+  // TODO: We will need to disable this for a global PTT hotkey to work
+  useEventTarget(window, "blur", unhold);
 
   const { shadow } = useSpring({
     shadow: (Math.max(activeSpeakerVolume, -70) + 70) * 0.6,
@@ -143,12 +168,15 @@ export const PTTButton: React.FC<Props> = ({
   });
   const shadowColor = showTalkOverError
     ? "var(--alert-20)"
+    : networkWaiting
+    ? "var(--tertiary-content-20)"
     : "var(--accent-20)";
 
   return (
     <animated.button
       className={classNames(styles.pttButton, {
         [styles.talking]: activeSpeakerUserId,
+        [styles.networkWaiting]: networkWaiting,
         [styles.error]: showTalkOverError,
       })}
       style={{

src/room/PTTCallView.module.css

@@ -28,6 +28,7 @@
   display: flex;
   flex-direction: column;
   margin: 20px;
+  text-align: center;
 }
 
 .participants > p {
@@ -41,6 +42,7 @@
 
 .talkingInfo {
   display: flex;
+  flex-shrink: 0;
   flex-direction: column;
   align-items: center;
   margin-bottom: 20px;

src/room/PTTCallView.tsx

@@ -14,12 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { useEffect } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
-import { GroupCall, MatrixClient, RoomMember } from "matrix-js-sdk";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
 import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
 
+import { useDelayedState } from "../useDelayedState";
 import { useModalTriggerState } from "../Modal";
 import { InviteModal } from "./InviteModal";
 import { HangupButton, InviteButton } from "../button";
@@ -37,8 +40,10 @@ import { usePTTSounds } from "../sound/usePttSounds";
 import { PTTClips } from "../sound/PTTClips";
 import { GroupCallInspector } from "./GroupCallInspector";
 import { OverflowMenu } from "./OverflowMenu";
+import { Size } from "../Avatar";
 
 function getPromptText(
+  networkWaiting: boolean,
   showTalkOverError: boolean,
   pttButtonHeld: boolean,
   activeSpeakerIsLocalUser: boolean,
@@ -47,10 +52,14 @@ function getPromptText(
   activeSpeakerDisplayName: string,
   connected: boolean
 ): string {
-  if (!connected) return "Connection Lost";
+  if (!connected) return "Connection lost";
 
   const isTouchScreen = Boolean(window.ontouchstart !== undefined);
 
+  if (networkWaiting) {
+    return "Waiting for network";
+  }
+
   if (showTalkOverError) {
     return "You can't talk at the same time";
   }
@@ -80,31 +89,34 @@ function getPromptText(
 
 interface Props {
   client: MatrixClient;
-  roomId: string;
+  roomIdOrAlias: string;
   roomName: string;
   avatarUrl: string;
   groupCall: GroupCall;
   participants: RoomMember[];
   userMediaFeeds: CallFeed[];
   onLeave: () => void;
+  isEmbedded: boolean;
 }
 
 export const PTTCallView: React.FC<Props> = ({
   client,
-  roomId,
+  roomIdOrAlias,
   roomName,
   avatarUrl,
   groupCall,
   participants,
   userMediaFeeds,
   onLeave,
+  isEmbedded,
 }) => {
   const { modalState: inviteModalState, modalProps: inviteModalProps } =
     useModalTriggerState();
   const { modalState: feedbackModalState, modalProps: feedbackModalProps } =
     useModalTriggerState();
   const [containerRef, bounds] = useMeasure({ polyfill: ResizeObserver });
-  const facepileSize = bounds.width < 800 ? "sm" : "md";
+  const facepileSize = bounds.width < 800 ? Size.SM : Size.MD;
+  const showControls = bounds.height > 500;
   const pttButtonSize = 232;
 
   const { audioOutput } = useMediaHandler();
@@ -128,18 +140,15 @@ export const PTTCallView: React.FC<Props> = ({
     stopTalking,
     transmitBlocked,
     connected,
-  } = usePTT(
-    client,
-    groupCall,
-    userMediaFeeds,
-    playClip,
-    !feedbackModalState.isOpen
-  );
+  } = usePTT(client, groupCall, userMediaFeeds, playClip);
 
+  const [talkingExpected, enqueueTalkingExpected, setTalkingExpected] =
+    useDelayedState(false);
   const showTalkOverError = pttButtonHeld && transmitBlocked;
+  const networkWaiting =
+    talkingExpected && !activeSpeakerUserId && !showTalkOverError;
 
-  const activeSpeakerIsLocalUser =
-    activeSpeakerUserId && client.getUserId() === activeSpeakerUserId;
+  const activeSpeakerIsLocalUser = activeSpeakerUserId === client.getUserId();
   const activeSpeakerUser = activeSpeakerUserId
     ? client.getUser(activeSpeakerUserId)
     : null;
@@ -148,6 +157,10 @@ export const PTTCallView: React.FC<Props> = ({
     ? activeSpeakerUser.displayName
     : "";
 
+  useEffect(() => {
+    setTalkingExpected(activeSpeakerIsLocalUser);
+  }, [activeSpeakerIsLocalUser, setTalkingExpected]);
+
   return (
     <div className={styles.pttCallView} ref={containerRef}>
       <PTTClips
@@ -163,60 +176,68 @@ export const PTTCallView: React.FC<Props> = ({
         // https://github.com/vector-im/element-call/issues/328
         show={false}
       />
-      <Header className={styles.header}>
-        <LeftNav>
-          <RoomSetupHeaderInfo
-            roomName={roomName}
-            avatarUrl={avatarUrl}
-            onPress={onLeave}
-          />
-        </LeftNav>
-        <RightNav />
-      </Header>
+      {showControls && (
+        <Header className={styles.header}>
+          <LeftNav>
+            <RoomSetupHeaderInfo
+              roomName={roomName}
+              avatarUrl={avatarUrl}
+              onPress={onLeave}
+              isEmbedded={isEmbedded}
+            />
+          </LeftNav>
+          <RightNav />
+        </Header>
+      )}
       <div className={styles.center}>
-        <div className={styles.participants}>
-          <p>{`${participants.length} ${
-            participants.length > 1 ? "people" : "person"
-          } connected`}</p>
-          <Facepile
-            size={facepileSize}
-            max={8}
-            className={styles.facepile}
-            client={client}
-            participants={participants}
-          />
-        </div>
-        <div className={styles.footer}>
-          <OverflowMenu
-            inCall
-            roomId={roomId}
-            client={client}
-            groupCall={groupCall}
-            showInvite={false}
-            feedbackModalState={feedbackModalState}
-            feedbackModalProps={feedbackModalProps}
-          />
-          <HangupButton onPress={onLeave} />
-          <InviteButton onPress={() => inviteModalState.open()} />
-        </div>
+        {showControls && (
+          <>
+            <div className={styles.participants}>
+              <p>{`${participants.length} ${
+                participants.length > 1 ? "people" : "person"
+              } connected`}</p>
+              <Facepile
+                size={facepileSize}
+                max={8}
+                className={styles.facepile}
+                client={client}
+                participants={participants}
+              />
+            </div>
+            <div className={styles.footer}>
+              <OverflowMenu
+                inCall
+                roomIdOrAlias={roomIdOrAlias}
+                groupCall={groupCall}
+                showInvite={false}
+                feedbackModalState={feedbackModalState}
+                feedbackModalProps={feedbackModalProps}
+              />
+              {!isEmbedded && <HangupButton onPress={onLeave} />}
+              <InviteButton onPress={() => inviteModalState.open()} />
+            </div>
+          </>
+        )}
 
         <div className={styles.pttButtonContainer}>
-          {activeSpeakerUserId ? (
-            <div className={styles.talkingInfo}>
-              <h2>
-                {!activeSpeakerIsLocalUser && (
-                  <AudioIcon className={styles.speakerIcon} />
-                )}
-                {activeSpeakerIsLocalUser
-                  ? "Talking..."
-                  : `${activeSpeakerDisplayName} is talking...`}
-              </h2>
-              <Timer value={activeSpeakerUserId} />
-            </div>
-          ) : (
-            <div className={styles.talkingInfo} />
-          )}
+          {showControls &&
+            (activeSpeakerUserId ? (
+              <div className={styles.talkingInfo}>
+                <h2>
+                  {!activeSpeakerIsLocalUser && (
+                    <AudioIcon className={styles.speakerIcon} />
+                  )}
+                  {activeSpeakerIsLocalUser
+                    ? "Talking..."
+                    : `${activeSpeakerDisplayName} is talking...`}
+                </h2>
+                <Timer value={activeSpeakerUserId} />
+              </div>
+            ) : (
+              <div className={styles.talkingInfo} />
+            ))}
           <PTTButton
+            enabled={!feedbackModalState.isOpen}
             showTalkOverError={showTalkOverError}
             activeSpeakerUserId={activeSpeakerUserId}
             activeSpeakerDisplayName={activeSpeakerDisplayName}
@@ -226,18 +247,24 @@ export const PTTCallView: React.FC<Props> = ({
             size={pttButtonSize}
             startTalking={startTalking}
             stopTalking={stopTalking}
+            networkWaiting={networkWaiting}
+            enqueueNetworkWaiting={enqueueTalkingExpected}
+            setNetworkWaiting={setTalkingExpected}
           />
-          <p className={styles.actionTip}>
-            {getPromptText(
-              showTalkOverError,
-              pttButtonHeld,
-              activeSpeakerIsLocalUser,
-              talkOverEnabled,
-              activeSpeakerUserId,
-              activeSpeakerDisplayName,
-              connected
-            )}
-          </p>
+          {showControls && (
+            <p className={styles.actionTip}>
+              {getPromptText(
+                networkWaiting,
+                showTalkOverError,
+                pttButtonHeld,
+                activeSpeakerIsLocalUser,
+                talkOverEnabled,
+                activeSpeakerUserId,
+                activeSpeakerDisplayName,
+                connected
+              )}
+            </p>
+          )}
           {userMediaFeeds.map((callFeed) => (
             <PTTFeed
               key={callFeed.userId}
@@ -245,7 +272,7 @@ export const PTTCallView: React.FC<Props> = ({
               audioOutputDevice={audioOutput}
             />
           ))}
-          {isAdmin && (
+          {isAdmin && showControls && (
             <Toggle
               isSelected={talkOverEnabled}
               onChange={setTalkOverEnabled}
@@ -256,8 +283,8 @@ export const PTTCallView: React.FC<Props> = ({
         </div>
       </div>
 
-      {inviteModalState.isOpen && (
-        <InviteModal roomId={roomId} {...inviteModalProps} />
+      {inviteModalState.isOpen && showControls && (
+        <InviteModal roomIdOrAlias={roomIdOrAlias} {...inviteModalProps} />
       )}
     </div>
   );

src/room/PTTFeed.tsx

@@ -14,12 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
 import React from "react";
+
 import { useCallFeed } from "../video-grid/useCallFeed";
 import { useMediaStream } from "../video-grid/useMediaStream";
 import styles from "./PTTFeed.module.css";
 
-export function PTTFeed({ callFeed, audioOutputDevice }) {
+export function PTTFeed({
+  callFeed,
+  audioOutputDevice,
+}: {
+  callFeed: CallFeed;
+  audioOutputDevice: string;
+}) {
   const { isLocal, stream } = useCallFeed(callFeed);
   const mediaRef = useMediaStream(stream, audioOutputDevice, isLocal);
   return <audio ref={mediaRef} className={styles.audioFeed} playsInline />;

src/room/RageshakeRequestModal.tsx

@@ -14,21 +14,32 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect } from "react";
-import { Modal, ModalContent } from "../Modal";
+import React, { FC, useEffect } from "react";
+
+import { Modal, ModalContent, ModalProps } from "../Modal";
 import { Button } from "../button";
 import { FieldRow, ErrorMessage } from "../input/Input";
 import { useSubmitRageshake } from "../settings/submit-rageshake";
 import { Body } from "../typography/Typography";
 
-export function RageshakeRequestModal({ rageshakeRequestId, roomId, ...rest }) {
+interface Props extends Omit<ModalProps, "title" | "children"> {
+  rageshakeRequestId: string;
+  roomIdOrAlias: string;
+  onClose: () => void;
+}
+
+export const RageshakeRequestModal: FC<Props> = ({
+  rageshakeRequestId,
+  roomIdOrAlias,
+  ...rest
+}) => {
   const { submitRageshake, sending, sent, error } = useSubmitRageshake();
 
   useEffect(() => {
     if (sent) {
       rest.onClose();
     }
-  }, [sent, rest.onClose]);
+  }, [sent, rest]);
 
   return (
     <Modal title="Debug Log Request" isDismissable {...rest}>
@@ -43,7 +54,7 @@ export function RageshakeRequestModal({ rageshakeRequestId, roomId, ...rest }) {
               submitRageshake({
                 sendLogs: true,
                 rageshakeRequestId,
-                roomId,
+                roomId: roomIdOrAlias, // Possibly not a room ID, but oh well
               })
             }
             disabled={sending}
@@ -59,4 +70,4 @@ export function RageshakeRequestModal({ rageshakeRequestId, roomId, ...rest }) {
       </ModalContent>
     </Modal>
   );
-}
+};

src/room/RoomAuthView.tsx

@@ -15,57 +15,39 @@ limitations under the License.
 */
 
 import React, { useCallback, useState } from "react";
+import { useLocation } from "react-router-dom";
+
 import styles from "./RoomAuthView.module.css";
-import { useClient } from "../ClientContext";
 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";
+import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
 
 export function RoomAuthView() {
-  const { setClient } = useClient();
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState();
-  const [privacyPolicyUrl, recaptchaKey, register] =
-    useInteractiveRegistration();
-  const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
+  const [error, setError] = useState<Error>();
+
+  const { registerPasswordlessUser, recaptchaId, privacyPolicyUrl } =
+    useRegisterPasswordlessUser();
 
   const onSubmit = useCallback(
     (e) => {
       e.preventDefault();
       const data = new FormData(e.target);
-      const displayName = data.get("displayName");
+      const dataForDisplayName = data.get("displayName");
+      const displayName =
+        typeof dataForDisplayName === "string" ? dataForDisplayName : "";
 
-      async function submit() {
-        setError(undefined);
-        setLoading(true);
-        const recaptchaResponse = await execute();
-        const userName = generateRandomName();
-        const [client, session] = await register(
-          userName,
-          randomString(16),
-          displayName,
-          recaptchaResponse,
-          true
-        );
-        setClient(client, session);
-      }
-
-      submit().catch((error) => {
-        console.error(error);
+      registerPasswordlessUser(displayName).catch((error) => {
+        console.error("Failed to register passwordless user", e);
         setLoading(false);
         setError(error);
-        reset();
       });
     },
-    [register, reset, execute]
+    [registerPasswordlessUser]
   );
 
   const location = useLocation();

src/room/RoomPage.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 New Vector Ltd
+Copyright 2021-2022 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,28 +14,46 @@ 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 React, { FC, useEffect, useState } from "react";
+
 import { useClient } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
 import { RoomAuthView } from "./RoomAuthView";
 import { GroupCallLoader } from "./GroupCallLoader";
 import { GroupCallView } from "./GroupCallView";
+import { useRoomParams } from "./useRoomParams";
 import { MediaHandlerProvider } from "../settings/useMediaHandler";
+import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
 
-export function RoomPage() {
+export const RoomPage: FC = () => {
   const { loading, isAuthenticated, error, client, isPasswordlessUser } =
     useClient();
 
-  const { roomId: maybeRoomId } = useParams();
-  const { hash, search } = useLocation();
-  const [viaServers] = useMemo(() => {
-    const params = new URLSearchParams(search);
-    return [params.getAll("via")];
-  }, [search]);
-  const roomId = (maybeRoomId || hash || "").toLowerCase();
+  const { roomAlias, roomId, viaServers, isEmbedded, isPtt, displayName } =
+    useRoomParams();
+  const roomIdOrAlias = roomId ?? roomAlias;
+  if (!roomIdOrAlias) throw new Error("No room specified");
 
-  if (loading) {
+  const { registerPasswordlessUser } = useRegisterPasswordlessUser();
+  const [isRegistering, setIsRegistering] = useState(false);
+
+  useEffect(() => {
+    // If we're not already authed and we've been given a display name as
+    // a URL param, automatically register a passwordless user
+    if (!isAuthenticated && displayName) {
+      setIsRegistering(true);
+      registerPasswordlessUser(displayName).finally(() => {
+        setIsRegistering(false);
+      });
+    }
+  }, [
+    isAuthenticated,
+    displayName,
+    setIsRegistering,
+    registerPasswordlessUser,
+  ]);
+
+  if (loading || isRegistering) {
     return <LoadingView />;
   }
 
@@ -49,16 +67,22 @@ export function RoomPage() {
 
   return (
     <MediaHandlerProvider client={client}>
-      <GroupCallLoader client={client} roomId={roomId} viaServers={viaServers}>
+      <GroupCallLoader
+        client={client}
+        roomIdOrAlias={roomIdOrAlias}
+        viaServers={viaServers}
+        createPtt={isPtt}
+      >
         {(groupCall) => (
           <GroupCallView
             client={client}
-            roomId={roomId}
+            roomIdOrAlias={roomIdOrAlias}
             groupCall={groupCall}
             isPasswordlessUser={isPasswordlessUser}
+            isEmbedded={isEmbedded}
           />
         )}
       </GroupCallLoader>
     </MediaHandlerProvider>
   );
-}
+};

src/room/RoomRedirect.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React, { useEffect } from "react";
 import { useLocation, useHistory } from "react-router-dom";
+
 import { defaultHomeserverHost } from "../matrix-utils";
 import { LoadingView } from "../FullScreenView";
 

src/room/Timer.tsx

@@ -16,11 +16,11 @@ limitations under the License.
 
 import React, { useEffect, useState } from "react";
 
-function leftPad(value) {
-  return value < 10 ? "0" + value : value;
+function leftPad(value: number): string {
+  return value < 10 ? "0" + value : "" + value;
 }
 
-function formatTime(msElapsed) {
+function formatTime(msElapsed: number): string {
   const secondsElapsed = msElapsed / 1000;
   const hours = Math.floor(secondsElapsed / 3600);
   const minutes = Math.floor(secondsElapsed / 60) - hours * 60;
@@ -28,15 +28,15 @@ function formatTime(msElapsed) {
   return `${leftPad(hours)}:${leftPad(minutes)}:${leftPad(seconds)}`;
 }
 
-export function Timer({ value }) {
-  const [timestamp, setTimestamp] = useState();
+export function Timer({ value }: { value: string }) {
+  const [timestamp, setTimestamp] = useState<string>();
 
   useEffect(() => {
     const startTimeMs = performance.now();
 
-    let animationFrame;
+    let animationFrame: number;
 
-    function onUpdate(curTimeMs) {
+    function onUpdate(curTimeMs: number) {
       const msElapsed = curTimeMs - startTimeMs;
       setTimestamp(formatTime(msElapsed));
       animationFrame = requestAnimationFrame(onUpdate);

src/room/VideoPreview.module.css

@@ -9,12 +9,11 @@
 }
 
 .preview video {
-  width: calc(100% + 1px);
+  width: 100%;
   height: 100%;
   object-fit: contain;
   background-color: black;
-  /* transform scale doesn't perfectly match width, so make -1.01 border issues */
-  transform: scaleX(-1.01);
+  transform: scaleX(-1);
 }
 
 .avatarContainer {

src/room/VideoPreview.tsx

@@ -15,29 +15,42 @@ limitations under the License.
 */
 
 import React from "react";
+import useMeasure from "react-use-measure";
+import { ResizeObserver } from "@juggle/resize-observer";
+import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
 import { MicButton, VideoButton } from "../button";
 import { useMediaStream } from "../video-grid/useMediaStream";
 import { OverflowMenu } from "./OverflowMenu";
 import { Avatar } from "../Avatar";
 import { useProfile } from "../profile/useProfile";
-import useMeasure from "react-use-measure";
-import { ResizeObserver } from "@juggle/resize-observer";
-import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import styles from "./VideoPreview.module.css";
 import { Body } from "../typography/Typography";
 import { useModalTriggerState } from "../Modal";
 
+interface Props {
+  client: MatrixClient;
+  state: GroupCallState;
+  roomIdOrAlias: string;
+  microphoneMuted: boolean;
+  localVideoMuted: boolean;
+  toggleLocalVideoMuted: () => void;
+  toggleMicrophoneMuted: () => void;
+  audioOutput: string;
+  stream: MediaStream;
+}
 export function VideoPreview({
   client,
   state,
-  roomId,
+  roomIdOrAlias,
   microphoneMuted,
   localVideoMuted,
   toggleLocalVideoMuted,
   toggleMicrophoneMuted,
   audioOutput,
   stream,
-}) {
+}: Props) {
   const videoRef = useMediaStream(stream, audioOutput, true);
   const { displayName, avatarUrl } = useProfile(client);
   const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
@@ -80,10 +93,12 @@ export function VideoPreview({
               onPress={toggleLocalVideoMuted}
             />
             <OverflowMenu
-              roomId={roomId}
-              client={client}
+              roomIdOrAlias={roomIdOrAlias}
               feedbackModalState={feedbackModalState}
               feedbackModalProps={feedbackModalProps}
+              inCall={false}
+              groupCall={undefined}
+              showInvite={false}
             />
           </div>
         </>

src/room/useGroupCall.ts

@@ -14,11 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useReducer, useState } from "react";
 import {
   GroupCallEvent,
   GroupCallState,
   GroupCall,
+  GroupCallErrorCode,
+  GroupCallUnknownDeviceError,
+  GroupCallError,
 } from "matrix-js-sdk/src/webrtc/groupCall";
 import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
@@ -26,7 +29,7 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import { usePageUnload } from "./usePageUnload";
 
-export interface UseGroupCallType {
+export interface UseGroupCallReturnType {
   state: GroupCallState;
   calls: MatrixCall[];
   localCallFeed: CallFeed;
@@ -48,6 +51,7 @@ export interface UseGroupCallType {
   localDesktopCapturerSourceId: string;
   participants: RoomMember[];
   hasLocalParticipant: boolean;
+  unencryptedEventsFromUsers: Set<string>;
 }
 
 interface State {
@@ -68,7 +72,7 @@ interface State {
   hasLocalParticipant: boolean;
 }
 
-export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
+export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
   const [
     {
       state,
@@ -106,6 +110,13 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
     hasLocalParticipant: false,
   });
 
+  const [unencryptedEventsFromUsers, addUnencryptedEventUser] = useReducer(
+    (state: Set<string>, newVal: string) => {
+      return new Set(state).add(newVal);
+    },
+    new Set<string>()
+  );
+
   const updateState = (state: Partial<State>) =>
     setState((prevState) => ({ ...prevState, ...state }));
 
@@ -180,6 +191,13 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
       });
     }
 
+    function onError(e: GroupCallError): void {
+      if (e.code === GroupCallErrorCode.UnknownDevice) {
+        const unknownDeviceError = e as GroupCallUnknownDeviceError;
+        addUnencryptedEventUser(unknownDeviceError.userId);
+      }
+    }
+
     groupCall.on(GroupCallEvent.GroupCallStateChanged, onGroupCallStateChanged);
     groupCall.on(GroupCallEvent.UserMediaFeedsChanged, onUserMediaFeedsChanged);
     groupCall.on(
@@ -194,6 +212,7 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
     );
     groupCall.on(GroupCallEvent.CallsChanged, onCallsChanged);
     groupCall.on(GroupCallEvent.ParticipantsChanged, onParticipantsChanged);
+    groupCall.on(GroupCallEvent.Error, onError);
 
     updateState({
       error: null,
@@ -242,6 +261,7 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
         GroupCallEvent.ParticipantsChanged,
         onParticipantsChanged
       );
+      groupCall.removeListener(GroupCallEvent.Error, onError);
       groupCall.leave();
     };
   }, [groupCall]);
@@ -282,9 +302,11 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
   const toggleScreensharing = useCallback(() => {
     updateState({ requestingScreenshare: true });
 
-    groupCall.setScreensharingEnabled(!groupCall.isScreensharing()).then(() => {
-      updateState({ requestingScreenshare: false });
-    });
+    groupCall
+      .setScreensharingEnabled(!groupCall.isScreensharing(), { audio: true })
+      .then(() => {
+        updateState({ requestingScreenshare: false });
+      });
   }, [groupCall]);
 
   useEffect(() => {
@@ -319,5 +341,6 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
     localDesktopCapturerSourceId,
     participants,
     hasLocalParticipant,
+    unencryptedEventsFromUsers,
   };
 }