Merge pull request #472 from vector-im/SimonBrandner/task/vs-code

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

.env.example

@@ -14,12 +14,16 @@
 # VITE_SENTRY_DSN=https://examplePublicKey@o0.ingest.sentry.io/0
 
 # VITE_CUSTOM_THEME=true
-# VITE_PRIMARY_COLOR=#0dbd8b
-# VITE_BG_COLOR_1=#ffffff
-# VITE_BG_COLOR_2=#f0f1f4
-# VITE_BG_COLOR_3=#dbdfe4
-# VITE_BG_COLOR_4=#d1d3d7
-# VITE_INPUT_BORDER_COLOR=#e7e7e7
-# VITE_INPUT_BORDER_COLOR_FOCUSED=#238cf5
-# VITE_TEXT_COLOR_1=#17191c
-# VITE_TEXT_COLOR_2=#61708b
+# VITE_THEME_ACCENT=#0dbd8b
+# VITE_THEME_ACCENT_20=#0dbd8b33
+# VITE_THEME_ALERT=#ff5b55
+# VITE_THEME_ALERT_20=#ff5b5533
+# VITE_THEME_LINKS=#0086e6
+# 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

.eslintrc.js

@@ -0,0 +1,38 @@
+module.exports = {
+    plugins: [
+        "matrix-org",
+    ],
+    extends: [
+        "plugin:matrix-org/react",
+        "plugin:matrix-org/a11y",
+        "prettier",
+    ],
+    env: {
+        browser: true,
+        node: true,
+    },
+    parserOptions: {
+        "ecmaVersion": "latest",
+        "sourceType": "module",
+    },
+    rules: {
+        "jsx-a11y/media-has-caption": ["off"],
+    },
+    overrides: [
+        {
+            files: [
+                "src/**/*.{ts,tsx}",
+            ],
+            extends: [
+                "plugin:matrix-org/typescript",
+                "plugin:matrix-org/react",
+                "prettier",
+            ],
+        },
+    ],
+    settings: {
+        react: {
+            version: "detect",
+        },
+    },
+};

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @vector-im/element-call-reviewers

.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/build.yaml

@@ -0,0 +1,31 @@
+name: Build
+on:
+  push:
+    branches: [main]
+env:
+  VITE_DEFAULT_HOMESERVER: "https://call.ems.host"
+  VITE_SENTRY_DSN: https://b1e328d49be3402ba96101338989fb35@sentry.matrix.org/41
+  VITE_SENTRY_ENVIRONMENT: main-branch-cd
+  VITE_RAGESHAKE_SUBMIT_URL: https://element.io/bugreports/submit
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Yarn cache
+        uses: actions/setup-node@v3
+        with:
+          cache: 'yarn'
+      - name: Install dependencies
+        run: "yarn install"
+      - name: Build
+        run: "yarn run build"
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: build
+          path: dist
+          # We'll only use this in a triggered job, then we're done with it
+          retention-days: 1

.github/workflows/lint.yaml

@@ -0,0 +1,22 @@
+name: Lint, format & type check
+on:
+  pull_request: {}
+jobs:
+  prettier:
+    name: Lint, format & type check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Yarn cache
+        uses: actions/setup-node@v3
+        with:
+          cache: 'yarn'
+      - name: Install dependencies
+        run: "yarn install"
+      - name: Prettier
+        run: "yarn run prettier:check"
+      - name: ESLint
+        run: "yarn run lint:js"
+      - name: Type check
+        run: "yarn run lint:types"

.github/workflows/netlify-main.yaml

@@ -0,0 +1,79 @@
+name: Netlify Main
+on:
+  workflow_run:
+    workflows: ["Build"]
+    types:
+      - completed
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      deployments: write
+    if: github.event.workflow_run.conclusion == 'success'
+    steps:
+      - name: Create Deployment
+        uses: bobheadxi/deployments@v1
+        id: deployment
+        with:
+          step: start
+          token: ${{ secrets.GITHUB_TOKEN }}
+          env: main-branch-cd
+          ref: ${{ github.event.workflow_run.head_sha }}
+
+      - name: 'Download artifact'
+        uses: actions/github-script@v3.1.0
+        with:
+          script: |
+            const artifacts = await github.actions.listWorkflowRunArtifacts({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                run_id: ${{ github.event.workflow_run.id }},
+            });
+            const matchArtifact = artifacts.data.artifacts.filter((artifact) => {
+                return artifact.name == "build"
+            })[0];
+            const download = await github.actions.downloadArtifact({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                artifact_id: matchArtifact.id,
+                archive_format: 'zip',
+            });
+            const fs = require('fs');
+            fs.writeFileSync('${{github.workspace}}/build.zip', Buffer.from(download.data));
+
+      - name: Extract Artifacts
+        run: unzip -d dist build.zip && rm build.zip
+
+      - name: Add redirects file
+        # We fetch from github directly as we don't bother checking out the repo
+        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/main/config/netlify_redirects > dist/_redirects
+
+      - name: Deploy to Netlify
+        id: netlify
+        uses: nwtgck/actions-netlify@v1.2.3
+        with:
+          publish-dir: dist
+          deploy-message: "Deploy from GitHub Actions"
+          production-branch: main
+          production-deploy: true
+          # These don't work because we're in workflow_run
+          enable-pull-request-comment: false
+          enable-commit-comment: false
+          github-deployment-environment: main
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 1
+
+      - name: Update deployment status
+        uses: bobheadxi/deployments@v1
+        if: always()
+        with:
+          step: finish
+          override: false
+          token: ${{ secrets.GITHUB_TOKEN }}
+          status: ${{ job.status }}
+          env: ${{ steps.deployment.outputs.env }}
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+          env_url: ${{ steps.netlify.outputs.deploy-url }}

.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

.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.prettierrc.json

@@ -0,0 +1 @@
+{}

.storybook/main.js

@@ -18,11 +18,6 @@ module.exports = {
     );
     config.plugins.push(svgrPlugin());
     config.resolve = config.resolve || {};
-    config.resolve.alias = config.resolve.alias || {};
-    config.resolve.alias["$(res)"] = path.resolve(
-      __dirname,
-      "../node_modules/matrix-react-sdk/res"
-    );
     config.resolve.dedupe = config.resolve.dedupe || [];
     config.resolve.dedupe.push("react", "react-dom", "matrix-js-sdk");
     return config;

.vscode/settings.json

@@ -1,5 +1,22 @@
 {
   "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,15 +1,15 @@
-FROM node:16-buster as builder
+FROM --platform=$BUILDPLATFORM node:16-buster as builder
 
 WORKDIR /src
 
-COPY . /src/matrix-video-chat
-RUN matrix-video-chat/scripts/dockerbuild.sh
+COPY . /src/element-call
+RUN element-call/scripts/dockerbuild.sh
 
 # App
 FROM nginxinc/nginx-unprivileged:alpine
 
-COPY --from=builder /src/matrix-video-chat/dist /app
-COPY scripts/default.conf /etc/nginx/conf.d/
+COPY --from=builder /src/element-call/dist /app
+COPY config/default.conf /etc/nginx/conf.d/
 
 USER root
 

README.md

@@ -6,7 +6,7 @@ Discussion in [#webrtc:matrix.org: ![#webrtc:matrix.org](https://img.shields.io/
 
 ## Getting Started
 
-`element-call` is built against the `robertlong/group-call` branch of both [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/1902) and [matrix-react-sdk](https://github.com/matrix-org/matrix-react-sdk/pull/6848). Because of how these packages are configured and Vite's requirements, you will need to clone them locally and use `yarn link` to stich things together.
+`element-call` is built against the `robertlong/group-call` branch of [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/1902). Because of how this package is configured and Vite's requirements, you will need to clone it locally and use `yarn link` to stich things together.
 
 First clone, install, and link `matrix-js-sdk`
 
@@ -18,17 +18,6 @@ yarn
 yarn link
 ```
 
-Then clone, install, link `matrix-js-sdk` into `matrix-react-sdk`, and link `matrix-react-sdk`
-
-```
-git clone https://github.com/matrix-org/matrix-react-sdk.git
-cd matrix-react-sdk
-git checkout robertlong/group-call
-yarn
-yarn link matrix-js-sdk
-yarn link
-```
-
 Next you'll also need [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html) installed locally and running on port 8008.
 
 Finally we can set up this project.
@@ -38,7 +27,7 @@ git clone https://github.com/vector-im/element-call.git
 cd element-call
 yarn
 yarn link matrix-js-sdk
-yarn link matrix-react-sdk
+cp .env.example .env
 yarn dev
 ```
 

config/netlify_redirects

@@ -0,0 +1,4 @@
+# This file is copied to the netlify deploy dir in the upload stage
+
+# Redirect any unknown path to index.html
+/*  /index.html 200

package.json

@@ -5,10 +5,16 @@
     "build": "vite build",
     "serve": "vite preview",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "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"
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
     "@react-aria/button": "^3.3.4",
     "@react-aria/dialog": "^3.1.4",
     "@react-aria/focus": "^3.5.0",
@@ -18,6 +24,7 @@
     "@react-aria/tabs": "^3.1.0",
     "@react-aria/tooltip": "^3.1.3",
     "@react-aria/utils": "^3.10.0",
+    "@react-spring/web": "^9.4.4",
     "@react-stately/collections": "^3.3.4",
     "@react-stately/overlays": "^3.1.3",
     "@react-stately/select": "^3.1.3",
@@ -25,15 +32,17 @@
     "@react-stately/tree": "^3.2.0",
     "@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#robertlong/group-call",
-    "matrix-react-sdk": "github:matrix-org/matrix-react-sdk#robertlong/group-call",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#984dd26a138411ef73903ff4e635f2752e0829f2",
     "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",
@@ -42,14 +51,29 @@
     "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": {
     "@babel/core": "^7.16.5",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
     "@storybook/react": "^6.5.0-alpha.5",
+    "@types/request": "^2.48.8",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
     "babel-loader": "^8.2.3",
+    "eslint": "^8.14.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-matrix-org": "^0.4.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "prettier": "^2.6.2",
     "sass": "^1.42.1",
     "storybook-builder-vite": "^0.1.12",
+    "typescript": "^4.6.4",
     "vite": "^2.4.2",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^0.4.0"

scripts/dockerbuild.sh

@@ -13,22 +13,11 @@ git checkout robertlong/group-call
 yarn install
 yarn run build
 yarn link
-cd ..
 
-git clone https://github.com/matrix-org/matrix-react-sdk.git
-cd matrix-react-sdk
-git checkout robertlong/group-call
-yarn link matrix-js-sdk
-yarn install
-yarn run build
-yarn link
-cd ..
-
-cd matrix-video-chat
+cd ../element-call
 
 export VITE_APP_VERSION=$(git describe --tags --abbrev=0)
 
 yarn link matrix-js-sdk
-yarn link matrix-react-sdk
 yarn install
 yarn run build

src/@types/global.d.ts

@@ -0,0 +1,30 @@
+/*
+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 "matrix-js-sdk/src/@types/global";
+
+declare global {
+  interface Window {
+    // 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 HTMLMediaElement {
+    setSinkId: (id: string) => void;
+  }
+}

src/@types/modules.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

src/Avatar.jsx

@@ -1,58 +0,0 @@
-import React, { useMemo } from "react";
-import classNames from "classnames";
-import styles from "./Avatar.module.css";
-
-const backgroundColors = [
-  "#5C56F5",
-  "#03B381",
-  "#368BD6",
-  "#AC3BA8",
-  "#E64F7A",
-  "#FF812D",
-  "#2DC2C5",
-  "#74D12C",
-];
-
-function hashStringToArrIndex(str, arrLength) {
-  let sum = 0;
-
-  for (let i = 0; i < str.length; i++) {
-    sum += str.charCodeAt(i);
-  }
-
-  return sum % arrLength;
-}
-
-export function Avatar({
-  bgKey,
-  src,
-  fallback,
-  size,
-  className,
-  style,
-  ...rest
-}) {
-  const backgroundColor = useMemo(() => {
-    const index = hashStringToArrIndex(
-      bgKey || fallback || src || "",
-      backgroundColors.length
-    );
-    return backgroundColors[index];
-  }, [bgKey, src, fallback]);
-
-  return (
-    <div
-      className={classNames(styles.avatar, styles[size || "md"], className)}
-      style={{ backgroundColor, ...style }}
-      {...rest}
-    >
-      {src ? (
-        <img src={src} />
-      ) : typeof fallback === "string" ? (
-        <span>{fallback}</span>
-      ) : (
-        fallback
-      )}
-    </div>
-  );
-}

src/Avatar.module.css

@@ -1,6 +1,6 @@
 .avatar {
   position: relative;
-  color: #ffffff;
+  color: var(--primary-content);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -17,7 +17,7 @@
 }
 
 .avatar svg * {
-  fill: #ffffff;
+  fill: var(--primary-content);
 }
 
 .avatar span {

src/Avatar.tsx

@@ -0,0 +1,115 @@
+import React, { useMemo, CSSProperties } from "react";
+import classNames from "classnames";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
+import { getAvatarUrl } from "./matrix-utils";
+import { useClient } from "./ClientContext";
+import styles from "./Avatar.module.css";
+
+const backgroundColors = [
+  "#5C56F5",
+  "#03B381",
+  "#368BD6",
+  "#AC3BA8",
+  "#E64F7A",
+  "#FF812D",
+  "#2DC2C5",
+  "#74D12C",
+];
+
+export enum Size {
+  XS = "xs",
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+  XL = "xl",
+}
+
+export const sizes = new Map([
+  [Size.XS, 22],
+  [Size.SM, 32],
+  [Size.MD, 36],
+  [Size.LG, 42],
+  [Size.XL, 90],
+]);
+
+function hashStringToArrIndex(str: string, arrLength: number) {
+  let sum = 0;
+
+  for (let i = 0; i < str.length; i++) {
+    sum += str.charCodeAt(i);
+  }
+
+  return sum % arrLength;
+}
+
+const resolveAvatarSrc = (client: MatrixClient, src: string, size: number) =>
+  src?.startsWith("mxc://") ? client && getAvatarUrl(client, src, size) : src;
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  bgKey?: string;
+  src: string;
+  fallback: string;
+  size?: Size | number;
+  className: string;
+  style?: CSSProperties;
+}
+
+export const Avatar: React.FC<Props> = ({
+  bgKey,
+  src,
+  fallback,
+  size = Size.MD,
+  className,
+  style = {},
+  ...rest
+}) => {
+  const { client } = useClient();
+
+  const [sizeClass, sizePx, sizeStyle] = useMemo(
+    () =>
+      Object.values(Size).includes(size as Size)
+        ? [styles[size as string], sizes.get(size as Size), {}]
+        : [
+            null,
+            size as number,
+            {
+              width: size,
+              height: size,
+              borderRadius: size,
+              fontSize: Math.round((size as number) / 2),
+            },
+          ],
+    [size]
+  );
+
+  const resolvedSrc = useMemo(
+    () => resolveAvatarSrc(client, src, sizePx),
+    [client, src, sizePx]
+  );
+
+  const backgroundColor = useMemo(() => {
+    const index = hashStringToArrIndex(
+      bgKey || fallback || src || "",
+      backgroundColors.length
+    );
+    return backgroundColors[index];
+  }, [bgKey, src, fallback]);
+
+  /* eslint-disable jsx-a11y/alt-text */
+  return (
+    <div
+      className={classNames(styles.avatar, sizeClass, className)}
+      style={{ backgroundColor, ...sizeStyle, ...style }}
+      {...rest}
+    >
+      {resolvedSrc ? (
+        <img src={resolvedSrc} />
+      ) : typeof fallback === "string" ? (
+        <span>{fallback}</span>
+      ) : (
+        fallback
+      )}
+    </div>
+  );
+};

src/ClientContext.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.
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, {
+  FC,
   useCallback,
   useEffect,
   useState,
@@ -23,17 +24,63 @@ import React, {
   useContext,
 } from "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 { ErrorView } from "./FullScreenView";
 import { initClient, defaultHomeserver } from "./matrix-utils";
 
-const ClientContext = createContext();
+declare global {
+  interface Window {
+    matrixclient: MatrixClient;
+  }
+}
 
-export function ClientProvider({ children }) {
+export interface Session {
+  user_id: string;
+  device_id: string;
+  access_token: string;
+  passwordlessUser: boolean;
+  tempPassword?: string;
+}
+
+const loadSession = (): Session => {
+  const data = localStorage.getItem("matrix-auth-store");
+  if (data) return JSON.parse(data);
+  return null;
+};
+const saveSession = (session: Session) =>
+  localStorage.setItem("matrix-auth-store", JSON.stringify(session));
+const clearSession = () => localStorage.removeItem("matrix-auth-store");
+
+interface ClientState {
+  loading: boolean;
+  isAuthenticated: boolean;
+  isPasswordlessUser: boolean;
+  client: MatrixClient;
+  userName: string;
+  changePassword: (password: string) => Promise<void>;
+  logout: () => void;
+  setClient: (client: MatrixClient, session: Session) => void;
+}
+
+const ClientContext = createContext<ClientState>(null);
+
+type ClientProviderState = Omit<
+  ClientState,
+  "changePassword" | "logout" | "setClient"
+> & { error?: Error };
+
+interface Props {
+  children: JSX.Element;
+}
+
+export const ClientProvider: FC<Props> = ({ children }) => {
   const history = useHistory();
   const [
     { loading, isAuthenticated, isPasswordlessUser, client, userName, error },
     setState,
-  ] = useState({
+  ] = useState<ClientProviderState>({
     loading: true,
     isAuthenticated: false,
     isPasswordlessUser: false,
@@ -43,56 +90,46 @@ export function ClientProvider({ children }) {
   });
 
   useEffect(() => {
-    async function restore() {
+    const restore = async (): Promise<
+      Pick<ClientProviderState, "client" | "isPasswordlessUser">
+    > => {
       try {
-        const authStore = localStorage.getItem("matrix-auth-store");
+        const session = loadSession();
 
-        if (authStore) {
-          const {
-            user_id,
-            device_id,
-            access_token,
-            passwordlessUser,
-            tempPassword,
-          } = JSON.parse(authStore);
+        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,
-          });
-
-          localStorage.setItem(
-            "matrix-auth-store",
-            JSON.stringify({
-              user_id,
-              device_id,
-              access_token,
-
-              passwordlessUser,
-              tempPassword,
-            })
+          const client = await initClient(
+            {
+              baseUrl: defaultHomeserver,
+              accessToken: access_token,
+              userId: user_id,
+              deviceId: device_id,
+            },
+            true
           );
+          /* eslint-enable camelcase */
 
-          return { client, passwordlessUser };
+          return { client, isPasswordlessUser: passwordlessUser };
         }
 
-        return { client: undefined };
+        return { client: undefined, isPasswordlessUser: false };
       } catch (err) {
         console.error(err);
-        localStorage.removeItem("matrix-auth-store");
+        clearSession();
         throw err;
       }
-    }
+    };
 
     restore()
-      .then(({ client, passwordlessUser }) => {
+      .then(({ client, isPasswordlessUser }) => {
         setState({
           client,
           loading: false,
-          isAuthenticated: !!client,
-          isPasswordlessUser: !!passwordlessUser,
+          isAuthenticated: Boolean(client),
+          isPasswordlessUser,
           userName: client?.getUserIdLocalpart(),
         });
       })
@@ -108,31 +145,23 @@ export function ClientProvider({ children }) {
   }, []);
 
   const changePassword = useCallback(
-    async (password) => {
-      const { tempPassword, passwordlessUser, ...existingSession } = JSON.parse(
-        localStorage.getItem("matrix-auth-store")
-      );
+    async (password: string) => {
+      const { tempPassword, ...session } = loadSession();
 
       await client.setPassword(
         {
           type: "m.login.password",
           identifier: {
             type: "m.id.user",
-            user: existingSession.user_id,
+            user: session.user_id,
           },
-          user: existingSession.user_id,
+          user: session.user_id,
           password: tempPassword,
         },
         password
       );
 
-      localStorage.setItem(
-        "matrix-auth-store",
-        JSON.stringify({
-          ...existingSession,
-          passwordlessUser: false,
-        })
-      );
+      saveSession({ ...session, passwordlessUser: false });
 
       setState({
         client,
@@ -146,23 +175,23 @@ export function ClientProvider({ children }) {
   );
 
   const setClient = useCallback(
-    (newClient, session) => {
+    (newClient: MatrixClient, session: Session) => {
       if (client && client !== newClient) {
         client.stopClient();
       }
 
       if (newClient) {
-        localStorage.setItem("matrix-auth-store", JSON.stringify(session));
+        saveSession(session);
 
         setState({
           client: newClient,
           loading: false,
           isAuthenticated: true,
-          isPasswordlessUser: !!session.passwordlessUser,
+          isPasswordlessUser: session.passwordlessUser,
           userName: newClient.getUserIdLocalpart(),
         });
       } else {
-        localStorage.removeItem("matrix-auth-store");
+        clearSession();
 
         setState({
           client: undefined,
@@ -177,29 +206,23 @@ export function ClientProvider({ children }) {
   );
 
   const logout = useCallback(() => {
-    localStorage.removeItem("matrix-auth-store");
-    window.location = "/";
+    clearSession();
+    history.push("/");
   }, [history]);
 
   useEffect(() => {
     if (client) {
       const loadTime = Date.now();
 
-      const onToDeviceEvent = (event) => {
-        if (event.getType() !== "org.matrix.call_duplicate_session") {
-          return;
-        }
+      const onToDeviceEvent = (event: MatrixEvent) => {
+        if (event.getType() !== "org.matrix.call_duplicate_session") return;
 
         const content = event.getContent();
 
-        if (content.session_id === client.getSessionId()) {
-          return;
-        }
+        if (content.session_id === client.getSessionId()) return;
 
         if (content.timestamp > loadTime) {
-          if (client) {
-            client.stopClient();
-          }
+          client?.stopClient();
 
           setState((prev) => ({
             ...prev,
@@ -210,7 +233,7 @@ export function ClientProvider({ children }) {
         }
       };
 
-      client.on("toDeviceEvent", onToDeviceEvent);
+      client.on(ClientEvent.ToDeviceEvent, onToDeviceEvent);
 
       client.sendToDevice("org.matrix.call_duplicate_session", {
         [client.getUserId()]: {
@@ -219,12 +242,12 @@ export function ClientProvider({ children }) {
       });
 
       return () => {
-        client.removeListener("toDeviceEvent", onToDeviceEvent);
+        client?.removeListener(ClientEvent.ToDeviceEvent, onToDeviceEvent);
       };
     }
   }, [client]);
 
-  const context = useMemo(
+  const context = useMemo<ClientState>(
     () => ({
       loading,
       isAuthenticated,
@@ -258,8 +281,6 @@ export function ClientProvider({ children }) {
   return (
     <ClientContext.Provider value={context}>{children}</ClientContext.Provider>
   );
-}
+};
 
-export function useClient() {
-  return useContext(ClientContext);
-}
+export const useClient = () => useContext(ClientContext);

src/Facepile.jsx

@@ -1,38 +1,63 @@
 import React from "react";
 import styles from "./Facepile.module.css";
 import classNames from "classnames";
-import { Avatar } from "./Avatar";
-import { getAvatarUrl } from "./matrix-utils";
+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];
 
-export function Facepile({ className, client, participants, ...rest }) {
   return (
     <div
-      className={classNames(styles.facepile, className)}
+      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, 3).map((member, i) => {
+      {participants.slice(0, max).map((member, i) => {
         const avatarUrl = member.user?.avatarUrl;
         return (
           <Avatar
             key={member.userId}
-            size="xs"
-            src={avatarUrl && getAvatarUrl(client, avatarUrl, 22)}
+            size={size}
+            src={avatarUrl}
             fallback={member.name.slice(0, 1).toUpperCase()}
             className={styles.avatar}
-            style={{ left: i * 22 }}
+            style={{ left: i * (_size - _overlap) }}
           />
         );
       })}
-      {participants.length > 3 && (
+      {participants.length > max && (
         <Avatar
           key="additional"
-          size="xs"
-          fallback={`+${participants.length - 3}`}
+          size={size}
+          fallback={`+${participants.length - max}`}
           className={styles.avatar}
-          style={{ left: 3 * 22 }}
+          style={{ left: max * (_size - _overlap) }}
         />
       )}
     </div>
   );
 }
+
+Facepile.defaultProps = {
+  max: 3,
+  size: "xs",
+};

src/Facepile.module.css

@@ -1,11 +1,26 @@
 .facepile {
   width: 100%;
-  height: 24px;
   position: relative;
 }
 
+.facepile.xs {
+  height: 24px;
+}
+
+.facepile.sm {
+  height: 32px;
+}
+
+.facepile.md {
+  height: 36px;
+}
+
 .facepile .avatar {
   position: absolute;
   top: 0;
-  border: 1px solid var(--bgColor2);
+  border: 1px solid var(--system);
+}
+
+.facepile.md .avatar {
+  border-width: 2px;
 }

src/Header.jsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { useRef } from "react";
+import React, { useCallback, useRef } from "react";
 import { Link } from "react-router-dom";
 import styles from "./Header.module.css";
 import { ReactComponent as Logo } from "./icons/Logo.svg";
@@ -8,6 +8,9 @@ import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
 import { useButton } from "@react-aria/button";
 import { Subtitle } from "./typography/Typography";
 import { Avatar } from "./Avatar";
+import { IncompatibleVersionModal } from "./IncompatibleVersionModal";
+import { useModalTriggerState } from "./Modal";
+import { Button } from "./button";
 
 export function Header({ children, className, ...rest }) {
   return (
@@ -57,12 +60,13 @@ export function HeaderLogo({ className }) {
   );
 }
 
-export function RoomHeaderInfo({ roomName }) {
+export function RoomHeaderInfo({ roomName, avatarUrl }) {
   return (
     <>
       <div className={styles.roomAvatar}>
         <Avatar
           size="md"
+          src={avatarUrl}
           bgKey={roomName}
           fallback={roomName.slice(0, 1).toUpperCase()}
         />
@@ -73,13 +77,49 @@ export function RoomHeaderInfo({ roomName }) {
   );
 }
 
-export function RoomSetupHeaderInfo({ roomName, ...rest }) {
+export function RoomSetupHeaderInfo({
+  roomName,
+  avatarUrl,
+  isEmbedded,
+  ...rest
+}) {
   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} />
+      <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
     </button>
   );
 }
+
+export function VersionMismatchWarning({ users, room }) {
+  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/Header.module.css

@@ -70,7 +70,7 @@
   background: transparent;
   border: none;
   display: flex;
-  color: var(--textColor1);
+  color: var(--primary-content);
   cursor: pointer;
   align-items: center;
 }
@@ -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/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";
+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

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

src/ListBox.module.css

@@ -5,8 +5,8 @@
   overflow-y: auto;
   list-style: none;
   background-color: transparent;
-  border: 1px solid var(--inputBorderColor);
-  background-color: var(--bgColor1);
+  border: 1px solid var(--quinary-content);
+  background-color: var(--background);
   border-radius: 8px;
 }
 
@@ -15,7 +15,7 @@
   align-items: center;
   justify-content: space-between;
   background-color: transparent;
-  color: var(--textColor1);
+  color: var(--primary-content);
   padding: 8px 16px;
   outline: none;
   cursor: pointer;
@@ -28,6 +28,6 @@
 }
 
 .option.disabled {
-  color: var(--textColor2);
+  color: var(--quaternary-content);
   background-color: var(--bgColor3);
 }

src/Menu.module.css

@@ -11,7 +11,7 @@
   display: flex;
   align-items: center;
   padding: 0 12px;
-  color: var(--textColor1);
+  color: var(--primary-content);
   font-size: 14px;
 }
 
@@ -25,7 +25,7 @@
 
 .menuItem.focused,
 .menuItem:hover {
-  background-color: var(--bgColor4);
+  background-color: var(--quinary-content);
 }
 
 .menuItem.focused:first-child,
@@ -39,3 +39,12 @@
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
 }
+
+.checkIcon {
+  position: absolute;
+  right: 16px;
+}
+
+.checkIcon * {
+  stroke: var(--primary-content);
+}

src/Tooltip.module.css

@@ -1,10 +1,10 @@
 .tooltip {
-  background-color: var(--bgColor2);
+  background-color: var(--system);
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding: 8px 10px;
-  color: var(--textColor1);
+  color: var(--primary-content);
   border-radius: 8px;
   max-width: 135px;
   width: max-content;

src/UserMenu.module.css

@@ -4,7 +4,7 @@
 }
 
 .userButton svg * {
-  fill: var(--textColor1);
+  fill: var(--primary-content);
 }
 
 .avatar {

src/auth/LoginPage.module.css

@@ -65,7 +65,7 @@
 }
 
 .authLinks a {
-  color: #0dbd8b;
+  color: var(--accent);
   text-decoration: none;
   font-weight: normal;
 }

src/auth/LoginPage.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,9 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useRef, useState, useMemo } from "react";
+import React, {
+  FC,
+  FormEvent,
+  useCallback,
+  useRef,
+  useState,
+  useMemo,
+} from "react";
 import { useHistory, useLocation, Link } from "react-router-dom";
+
 import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
+import { useClient } from "../ClientContext";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import { defaultHomeserver, defaultHomeserverHost } from "../matrix-utils";
@@ -24,27 +33,30 @@ import styles from "./LoginPage.module.css";
 import { useInteractiveLogin } from "./useInteractiveLogin";
 import { usePageTitle } from "../usePageTitle";
 
-export function LoginPage() {
+export const LoginPage: FC = () => {
   usePageTitle("Login");
 
-  const [_, login] = useInteractiveLogin();
-  const [homeserver, setHomeServer] = useState(defaultHomeserver);
-  const usernameRef = useRef();
-  const passwordRef = useRef();
+  const { setClient } = useClient();
+  const login = useInteractiveLogin();
+  const homeserver = defaultHomeserver; // TODO: Make this configurable
+  const usernameRef = useRef<HTMLInputElement>();
+  const passwordRef = useRef<HTMLInputElement>();
   const history = useHistory();
   const location = useLocation();
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState();
+  const [error, setError] = useState<Error>();
 
   // TODO: Handle hitting login page with authenticated client
 
   const onSubmitLoginForm = useCallback(
-    (e) => {
+    (e: FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       setLoading(true);
 
       login(homeserver, usernameRef.current.value, passwordRef.current.value)
-        .then(() => {
+        .then(([client, session]) => {
+          setClient(client, session);
+
           if (location.state && location.state.from) {
             history.push(location.state.from);
           } else {
@@ -56,13 +68,13 @@ export function LoginPage() {
           setLoading(false);
         });
     },
-    [login, location, history, homeserver]
+    [login, location, history, homeserver, setClient]
   );
 
   const homeserverHost = useMemo(() => {
     try {
       return new URL(homeserver).host;
-    } catch (_error) {
+    } catch (error) {
       return defaultHomeserverHost;
     }
   }, [homeserver]);
@@ -121,4 +133,4 @@ export function LoginPage() {
       </div>
     </>
   );
-}
+};

src/auth/RegisterPage.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,8 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  FC,
+  FormEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { useHistory, useLocation } from "react-router-dom";
+import { captureException } from "@sentry/react";
+import { sleep } from "matrix-js-sdk/src/utils";
+
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import { useClient } from "../ClientContext";
@@ -28,67 +38,68 @@ import { useRecaptcha } from "./useRecaptcha";
 import { Caption, Link } from "../typography/Typography";
 import { usePageTitle } from "../usePageTitle";
 
-export function RegisterPage() {
+export const RegisterPage: FC = () => {
   usePageTitle("Register");
 
-  const { loading, isAuthenticated, isPasswordlessUser, client } = useClient();
-  const confirmPasswordRef = useRef();
+  const { loading, isAuthenticated, isPasswordlessUser, client, setClient } =
+    useClient();
+  const confirmPasswordRef = useRef<HTMLInputElement>();
   const history = useHistory();
   const location = useLocation();
   const [registering, setRegistering] = useState(false);
-  const [error, setError] = useState();
+  const [error, setError] = useState<Error>();
   const [password, setPassword] = useState("");
   const [passwordConfirmation, setPasswordConfirmation] = useState("");
-  const [{ privacyPolicyUrl, recaptchaKey }, register] =
+  const [privacyPolicyUrl, recaptchaKey, register] =
     useInteractiveRegistration();
   const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
 
   const onSubmitRegisterForm = useCallback(
-    (e) => {
+    (e: FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      const data = new FormData(e.target);
-      const userName = data.get("userName");
-      const password = data.get("password");
-      const passwordConfirmation = data.get("passwordConfirmation");
+      const data = new FormData(e.target as HTMLFormElement);
+      const userName = data.get("userName") as string;
+      const password = data.get("password") as string;
+      const passwordConfirmation = data.get("passwordConfirmation") as string;
 
-      if (password !== passwordConfirmation) {
-        return;
-      }
+      if (password !== passwordConfirmation) return;
 
-      async function submit() {
+      const submit = async () => {
         setRegistering(true);
 
-        let roomIds;
-
-        if (client && isPasswordlessUser) {
-          const groupCalls = client.groupCallEventHandler.groupCalls.values();
-          roomIds = Array.from(groupCalls).map(
-            (groupCall) => groupCall.room.roomId
-          );
-        }
-
         const recaptchaResponse = await execute();
-        const newClient = await register(
+        const [newClient, session] = await register(
           userName,
           password,
           userName,
           recaptchaResponse
         );
 
-        if (roomIds) {
-          for (const roomId of roomIds) {
+        if (client && isPasswordlessUser) {
+          // Migrate the user's rooms
+          for (const groupCall of client.groupCallEventHandler.groupCalls.values()) {
+            const roomId = groupCall.room.roomId;
+
             try {
               await newClient.joinRoom(roomId);
             } catch (error) {
-              console.warn(`Couldn't join room ${roomId}`, error);
+              if (error.errcode === "M_LIMIT_EXCEEDED") {
+                await sleep(error.data.retry_after_ms);
+                await newClient.joinRoom(roomId);
+              } else {
+                captureException(error);
+                console.error(`Couldn't join room ${roomId}`, error);
+              }
             }
           }
         }
-      }
+
+        setClient(newClient, session);
+      };
 
       submit()
         .then(() => {
-          if (location.state && location.state.from) {
+          if (location.state?.from) {
             history.push(location.state.from);
           } else {
             history.push("/");
@@ -100,18 +111,23 @@ export function RegisterPage() {
           reset();
         });
     },
-    [register, location, history, isPasswordlessUser, reset, execute, client]
+    [
+      register,
+      location,
+      history,
+      isPasswordlessUser,
+      reset,
+      execute,
+      client,
+      setClient,
+    ]
   );
 
   useEffect(() => {
-    if (!confirmPasswordRef.current) {
-      return;
-    }
-
     if (password && passwordConfirmation && password !== passwordConfirmation) {
-      confirmPasswordRef.current.setCustomValidity("Passwords must match");
+      confirmPasswordRef.current?.setCustomValidity("Passwords must match");
     } else {
-      confirmPasswordRef.current.setCustomValidity("");
+      confirmPasswordRef.current?.setCustomValidity("");
     }
   }, [password, passwordConfirmation]);
 
@@ -119,7 +135,7 @@ export function RegisterPage() {
     if (!loading && isAuthenticated && !isPasswordlessUser && !registering) {
       history.push("/");
     }
-  }, [history, isAuthenticated, isPasswordlessUser, registering]);
+  }, [loading, history, isAuthenticated, isPasswordlessUser, registering]);
 
   if (loading) {
     return <LoadingView />;
@@ -207,4 +223,4 @@ export function RegisterPage() {
       </div>
     </>
   );
-}
+};

src/auth/generateRandomName.ts

@@ -1,3 +1,19 @@
+/*
+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 {
   uniqueNamesGenerator,
   adjectives,
@@ -126,12 +142,11 @@ const elements = [
   "oganesson",
 ];
 
-export function generateRandomName(config) {
+export function generateRandomName(): string {
   return uniqueNamesGenerator({
     dictionaries: [colors, adjectives, animals, elements],
     style: "lowerCase",
     length: 3,
     separator: "-",
-    ...config,
   });
 }

src/auth/useInteractiveLogin.js

@@ -1,45 +0,0 @@
-import matrix, { InteractiveAuth } from "matrix-js-sdk/src/browser-index";
-import { useState, useCallback } from "react";
-import { useClient } from "../ClientContext";
-import { initClient, defaultHomeserver } from "../matrix-utils";
-
-export function useInteractiveLogin() {
-  const { setClient } = useClient();
-  const [state, setState] = useState({ loading: false });
-
-  const auth = useCallback(async (homeserver, username, password) => {
-    const authClient = matrix.createClient(homeserver);
-
-    const interactiveAuth = new InteractiveAuth({
-      matrixClient: authClient,
-      busyChanged(loading) {
-        setState((prev) => ({ ...prev, loading }));
-      },
-      async doRequest(_auth, _background) {
-        return authClient.login("m.login.password", {
-          identifier: {
-            type: "m.id.user",
-            user: username,
-          },
-          password,
-        });
-      },
-    });
-
-    const { user_id, access_token, device_id } =
-      await interactiveAuth.attemptAuth();
-
-    const client = await initClient({
-      baseUrl: defaultHomeserver,
-      accessToken: access_token,
-      userId: user_id,
-      deviceId: device_id,
-    });
-
-    setClient(client, { user_id, access_token, device_id });
-
-    return client;
-  }, []);
-
-  return [state, auth];
-}

src/auth/useInteractiveLogin.ts

@@ -0,0 +1,72 @@
+/*
+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 { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
+import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { initClient, defaultHomeserver } from "../matrix-utils";
+import { Session } from "../ClientContext";
+
+export const useInteractiveLogin = () =>
+  useCallback<
+    (
+      homeserver: string,
+      username: string,
+      password: string
+    ) => Promise<[MatrixClient, Session]>
+  >(async (homeserver: string, username: string, password: string) => {
+    const authClient = createClient(homeserver);
+
+    const interactiveAuth = new InteractiveAuth({
+      matrixClient: authClient,
+      doRequest: () =>
+        authClient.login("m.login.password", {
+          identifier: {
+            type: "m.id.user",
+            user: username,
+          },
+          password,
+        }),
+      stateUpdated: null,
+      requestEmailToken: null,
+    });
+
+    // XXX: This claims to return an IAuthData which contains none of these
+    // things - the js-sdk types may be wrong?
+    /* eslint-disable camelcase,@typescript-eslint/no-explicit-any */
+    const { user_id, access_token, device_id } =
+      (await interactiveAuth.attemptAuth()) as any;
+    const session = {
+      user_id,
+      access_token,
+      device_id,
+      passwordlessUser: false,
+    };
+
+    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.js

@@ -1,96 +0,0 @@
-import matrix, { InteractiveAuth } from "matrix-js-sdk/src/browser-index";
-import { useState, useEffect, useCallback, useRef } from "react";
-import { useClient } from "../ClientContext";
-import { initClient, defaultHomeserver } from "../matrix-utils";
-
-export function useInteractiveRegistration() {
-  const { setClient } = useClient();
-  const [state, setState] = useState({ privacyPolicyUrl: "#", loading: false });
-
-  const authClientRef = useRef();
-
-  useEffect(() => {
-    authClientRef.current = matrix.createClient(defaultHomeserver);
-
-    authClientRef.current.registerRequest({}).catch((error) => {
-      const privacyPolicyUrl =
-        error.data?.params["m.login.terms"]?.policies?.privacy_policy?.en?.url;
-
-      const recaptchaKey = error.data?.params["m.login.recaptcha"]?.public_key;
-
-      if (privacyPolicyUrl || recaptchaKey) {
-        setState((prev) => ({ ...prev, privacyPolicyUrl, recaptchaKey }));
-      }
-    });
-  }, []);
-
-  const register = useCallback(
-    async (
-      username,
-      password,
-      displayName,
-      recaptchaResponse,
-      passwordlessUser
-    ) => {
-      const interactiveAuth = new InteractiveAuth({
-        matrixClient: authClientRef.current,
-        busyChanged(loading) {
-          setState((prev) => ({ ...prev, loading }));
-        },
-        async doRequest(auth, _background) {
-          return authClientRef.current.registerRequest({
-            username,
-            password,
-            auth: auth || undefined,
-          });
-        },
-        stateUpdated(nextStage, status) {
-          if (status.error) {
-            throw new Error(error);
-          }
-
-          if (nextStage === "m.login.terms") {
-            interactiveAuth.submitAuthDict({
-              type: "m.login.terms",
-            });
-          } else if (nextStage === "m.login.recaptcha") {
-            interactiveAuth.submitAuthDict({
-              type: "m.login.recaptcha",
-              response: recaptchaResponse,
-            });
-          }
-        },
-      });
-
-      const { user_id, access_token, device_id } =
-        await interactiveAuth.attemptAuth();
-
-      const client = await initClient({
-        baseUrl: defaultHomeserver,
-        accessToken: access_token,
-        userId: user_id,
-        deviceId: device_id,
-      });
-
-      await client.setDisplayName(displayName);
-
-      const session = { user_id, device_id, access_token, passwordlessUser };
-
-      if (passwordlessUser) {
-        session.tempPassword = password;
-      }
-
-      setClient(client, session);
-
-      const user = client.getUser(client.getUserId());
-
-      user.setRawDisplayName(displayName);
-      user.setDisplayName(displayName);
-
-      return client;
-    },
-    []
-  );
-
-  return [state, register];
-}

src/auth/useInteractiveRegistration.ts

@@ -0,0 +1,127 @@
+/*
+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 { useState, useEffect, useCallback, useRef } from "react";
+import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
+import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { initClient, defaultHomeserver } from "../matrix-utils";
+import { Session } from "../ClientContext";
+
+export const useInteractiveRegistration = (): [
+  string,
+  string,
+  (
+    username: string,
+    password: string,
+    displayName: string,
+    recaptchaResponse: string,
+    passwordlessUser?: boolean
+  ) => Promise<[MatrixClient, Session]>
+] => {
+  const [privacyPolicyUrl, setPrivacyPolicyUrl] = useState<string>();
+  const [recaptchaKey, setRecaptchaKey] = useState<string>();
+
+  const authClient = useRef<MatrixClient>();
+  if (!authClient.current) {
+    authClient.current = createClient(defaultHomeserver);
+  }
+
+  useEffect(() => {
+    authClient.current.registerRequest({}).catch((error) => {
+      setPrivacyPolicyUrl(
+        error.data?.params["m.login.terms"]?.policies?.privacy_policy?.en?.url
+      );
+      setRecaptchaKey(error.data?.params["m.login.recaptcha"]?.public_key);
+    });
+  }, []);
+
+  const register = useCallback(
+    async (
+      username: string,
+      password: string,
+      displayName: string,
+      recaptchaResponse: string,
+      passwordlessUser?: boolean
+    ): Promise<[MatrixClient, Session]> => {
+      const interactiveAuth = new InteractiveAuth({
+        matrixClient: authClient.current,
+        doRequest: (auth) =>
+          authClient.current.registerRequest({
+            username,
+            password,
+            auth: auth || undefined,
+          }),
+        stateUpdated: (nextStage, status) => {
+          if (status.error) {
+            throw new Error(status.error);
+          }
+
+          if (nextStage === "m.login.terms") {
+            interactiveAuth.submitAuthDict({
+              type: "m.login.terms",
+            });
+          } else if (nextStage === "m.login.recaptcha") {
+            interactiveAuth.submitAuthDict({
+              type: "m.login.recaptcha",
+              response: recaptchaResponse,
+            });
+          }
+        },
+        requestEmailToken: null,
+      });
+
+      // XXX: This claims to return an IAuthData which contains none of these
+      // things - the js-sdk types may be wrong?
+      /* eslint-disable camelcase,@typescript-eslint/no-explicit-any */
+      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,
+        },
+        false
+      );
+
+      await client.setDisplayName(displayName);
+
+      const session: Session = {
+        user_id,
+        device_id,
+        access_token,
+        passwordlessUser,
+      };
+      /* eslint-enable camelcase */
+
+      if (passwordlessUser) {
+        session.tempPassword = password;
+      }
+
+      const user = client.getUser(client.getUserId());
+      user.setRawDisplayName(displayName);
+      user.setDisplayName(displayName);
+
+      return [client, session];
+    },
+    []
+  );
+
+  return [privacyPolicyUrl, recaptchaKey, register];
+};

src/auth/useRecaptcha.ts

@@ -1,49 +1,62 @@
-import { randomString } from "matrix-js-sdk/src/randomstring";
+/*
+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 { useEffect, useCallback, useRef, useState } from "react";
+import { randomString } from "matrix-js-sdk/src/randomstring";
+
+declare global {
+  interface Window {
+    mxOnRecaptchaLoaded: () => void;
+  }
+}
 
 const RECAPTCHA_SCRIPT_URL =
   "https://www.recaptcha.net/recaptcha/api.js?onload=mxOnRecaptchaLoaded&render=explicit";
 
-export function useRecaptcha(sitekey) {
+interface RecaptchaPromiseRef {
+  resolve: (response: string) => void;
+  reject: (error: Error) => void;
+}
+
+export const useRecaptcha = (sitekey: string) => {
   const [recaptchaId] = useState(() => randomString(16));
-  const promiseRef = useRef();
+  const promiseRef = useRef<RecaptchaPromiseRef>();
 
   useEffect(() => {
-    if (!sitekey) {
-      return;
-    }
+    if (!sitekey) return;
 
     const onRecaptchaLoaded = () => {
-      if (!document.getElementById(recaptchaId)) {
-        return;
-      }
+      if (!document.getElementById(recaptchaId)) return;
 
       window.grecaptcha.render(recaptchaId, {
         sitekey,
         size: "invisible",
-        callback: (response) => {
-          if (promiseRef.current) {
-            promiseRef.current.resolve(response);
-          }
-        },
-        "error-callback": (error) => {
-          if (promiseRef.current) {
-            promiseRef.current.reject(error);
-          }
-        },
+        callback: (response: string) => promiseRef.current?.resolve(response),
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        "error-callback": () => promiseRef.current?.reject(new Error()),
       });
     };
 
-    if (
-      typeof window.grecaptcha !== "undefined" &&
-      typeof window.grecaptcha.render === "function"
-    ) {
+    if (typeof window.grecaptcha?.render === "function") {
       onRecaptchaLoaded();
     } else {
       window.mxOnRecaptchaLoaded = onRecaptchaLoaded;
 
       if (!document.querySelector(`script[src="${RECAPTCHA_SCRIPT_URL}"]`)) {
-        const scriptTag = document.createElement("script");
+        const scriptTag = document.createElement("script") as HTMLScriptElement;
         scriptTag.src = RECAPTCHA_SCRIPT_URL;
         scriptTag.async = true;
         document.body.appendChild(scriptTag);
@@ -64,7 +77,7 @@ export function useRecaptcha(sitekey) {
     return new Promise((resolve, reject) => {
       const observer = new MutationObserver((mutationsList) => {
         for (const item of mutationsList) {
-          if (item.target?.style?.visibility !== "visible") {
+          if ((item.target as HTMLElement)?.style?.visibility !== "visible") {
             reject(new Error("Recaptcha dismissed"));
             observer.disconnect();
             return;
@@ -85,7 +98,7 @@ export function useRecaptcha(sitekey) {
 
       window.grecaptcha.execute();
 
-      const iframe = document.querySelector(
+      const iframe = document.querySelector<HTMLIFrameElement>(
         'iframe[src*="recaptcha/api2/bframe"]'
       );
 
@@ -95,13 +108,11 @@ export function useRecaptcha(sitekey) {
         });
       }
     });
-  }, [recaptchaId, sitekey]);
+  }, [sitekey]);
 
   const reset = useCallback(() => {
-    if (window.grecaptcha) {
-      window.grecaptcha.reset();
-    }
-  }, [recaptchaId]);
+    window.grecaptcha?.reset();
+  }, []);
 
   return { execute, reset, recaptchaId };
-}
+};

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

@@ -20,7 +20,9 @@ limitations under the License.
 .iconButton,
 .iconCopyButton,
 .secondary,
-.copyButton {
+.secondaryHangup,
+.copyButton,
+.dropdownButton {
   position: relative;
   display: flex;
   justify-content: center;
@@ -34,6 +36,7 @@ limitations under the License.
 }
 
 .secondary,
+.secondaryHangup,
 .button,
 .copyButton {
   padding: 7px 15px;
@@ -43,8 +46,8 @@ limitations under the License.
 }
 
 .button {
-  color: #fff;
-  background-color: var(--primaryColor);
+  color: var(--primary-content);
+  background-color: var(--accent);
 }
 
 .button:focus,
@@ -53,6 +56,7 @@ limitations under the License.
 .iconButton:focus,
 .iconCopyButton:focus,
 .secondary:focus,
+.secondaryHangup:focus,
 .copyButton:focus {
   outline: auto;
 }
@@ -62,46 +66,46 @@ limitations under the License.
   width: 50px;
   height: 50px;
   border-radius: 50px;
-  background-color: var(--bgColor2);
+  background-color: var(--system);
 }
 
 .toolbarButton:hover,
 .toolbarButtonSecondary:hover {
-  background-color: var(--bgColor4);
+  background-color: var(--quinary-content);
 }
 
 .toolbarButton.on,
 .toolbarButton.off {
-  background-color: #ffffff;
+  background-color: var(--primary-content);
 }
 
 .toolbarButtonSecondary.on {
-  background-color: #0dbd8b;
+  background-color: var(--accent);
 }
 
 .iconButton:not(.stroke) svg * {
-  fill: #ffffff;
+  fill: var(--primary-content);
 }
 
 .iconButton:not(.stroke):hover svg * {
-  fill: #0dbd8b;
+  fill: var(--accent);
 }
 
 .iconButton.on:not(.stroke) svg * {
-  fill: #0dbd8b;
+  fill: var(--accent);
 }
 
 .iconButton.on.stroke svg * {
-  stroke: #0dbd8b;
+  stroke: var(--accent);
 }
 
 .hangupButton,
 .hangupButton:hover {
-  background-color: #ff5b55;
+  background-color: var(--alert);
 }
 
 .toolbarButton.on svg * {
-  fill: #0dbd8b;
+  fill: var(--accent);
 }
 
 .toolbarButton.off svg * {
@@ -109,19 +113,25 @@ limitations under the License.
 }
 
 .toolbarButtonSecondary.on svg * {
-  fill: #ffffff;
+  fill: var(--primary-content);
 }
 
 .secondary,
 .copyButton {
-  color: #0dbd8b;
-  border: 2px solid #0dbd8b;
+  color: var(--accent);
+  border: 2px solid var(--accent);
+  background-color: transparent;
+}
+
+.secondaryHangup {
+  color: var(--alert);
+  border: 2px solid var(--alert);
   background-color: transparent;
 }
 
 .copyButton.secondaryCopy {
-  color: var(--textColor1);
-  border-color: var(--textColor1);
+  color: var(--primary-content);
+  border-color: var(--primary-content);
 }
 
 .copyButton {
@@ -144,12 +154,12 @@ limitations under the License.
 }
 
 .copyButton:not(.on) svg * {
-  fill: #0dbd8b;
+  fill: var(--accent);
 }
 
 .copyButton.on {
   border-color: transparent;
-  background-color: #0dbd8b;
+  background-color: var(--accent);
   color: white;
 }
 
@@ -158,23 +168,49 @@ limitations under the License.
 }
 
 .copyButton.secondaryCopy:not(.on) svg * {
-  fill: var(--textColor1);
+  fill: var(--primary-content);
 }
 
 .iconCopyButton svg * {
-  fill: var(--textColor3);
+  fill: var(--tertiary-content);
 }
 
 .iconCopyButton:hover svg * {
-  fill: #0dbd8b;
+  fill: var(--accent);
 }
 
 .iconCopyButton.on svg *,
 .iconCopyButton.on:hover svg * {
   fill: transparent;
-  stroke: #0dbd8b;
+  stroke: var(--accent);
+}
+
+.dropdownButton {
+  color: var(--primary-content);
+  padding: 2px 8px;
+  border-radius: 8px;
+}
+
+.dropdownButton:hover,
+.dropdownButton.on {
+  background-color: var(--quinary-content);
+}
+
+.dropdownButton svg {
+  margin-left: 8px;
+}
+
+.dropdownButton svg * {
+  fill: var(--primary-content);
 }
 
 .lg {
   height: 40px;
 }
+
+.linkButton {
+  background-color: transparent;
+  border: none;
+  color: var(--accent);
+  cursor: pointer;
+}

src/button/Button.tsx

@@ -1,5 +1,24 @@
+/*
+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 } 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";
@@ -7,10 +26,24 @@ import { ReactComponent as VideoIcon } from "../icons/Video.svg";
 import { ReactComponent as DisableVideoIcon } from "../icons/DisableVideo.svg";
 import { ReactComponent as HangupIcon } from "../icons/Hangup.svg";
 import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg";
-import { useButton } from "@react-aria/button";
-import { mergeProps, useObjectRef } from "@react-aria/utils";
+import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
+import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
+import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
 import { TooltipTrigger } from "../Tooltip";
 
+export type ButtonVariant =
+  | "default"
+  | "toolbar"
+  | "toolbarSecondary"
+  | "icon"
+  | "secondary"
+  | "copy"
+  | "secondaryCopy"
+  | "iconCopy"
+  | "secondaryHangup"
+  | "dropdown"
+  | "link";
+
 export const variantToClassName = {
   default: [styles.button],
   toolbar: [styles.toolbarButton],
@@ -18,15 +51,31 @@ export const variantToClassName = {
   icon: [styles.iconButton],
   secondary: [styles.secondary],
   copy: [styles.copyButton],
+  secondaryCopy: [styles.secondaryCopy, styles.copyButton],
   iconCopy: [styles.iconCopyButton],
-  secondaryCopy: [styles.copyButton],
+  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;
+  [index: string]: unknown;
+}
+export const Button = forwardRef<HTMLButtonElement, Props>(
   (
     {
       variant = "default",
@@ -42,7 +91,7 @@ export const Button = forwardRef(
     },
     ref
   ) => {
-    const buttonRef = useObjectRef(ref);
+    const buttonRef = useObjectRef<HTMLButtonElement>(ref);
     const { buttonProps } = useButton(
       { onPress, onPressStart, ...rest },
       buttonRef
@@ -53,7 +102,7 @@ export const Button = forwardRef(
     let filteredButtonProps = buttonProps;
 
     if (rest.type === "submit" && !rest.onPress) {
-      const { onKeyDown, onKeyUp, ...filtered } = buttonProps;
+      const { ...filtered } = buttonProps;
       filteredButtonProps = filtered;
     }
 
@@ -67,19 +116,27 @@ export const Button = forwardRef(
           {
             [styles.on]: on,
             [styles.off]: off,
-            [styles.secondaryCopy]: variant === "secondaryCopy",
           }
         )}
         {...mergeProps(rest, filteredButtonProps)}
         ref={buttonRef}
       >
-        {children}
+        <>
+          {children}
+          {variant === "dropdown" && <ArrowDownIcon />}
+        </>
       </button>
     );
   }
 );
 
-export function MicButton({ muted, ...rest }) {
+export function MicButton({
+  muted,
+  ...rest
+}: {
+  muted: boolean;
+  [index: string]: unknown;
+}) {
   return (
     <TooltipTrigger>
       <Button variant="toolbar" {...rest} off={muted}>
@@ -90,7 +147,13 @@ export function MicButton({ muted, ...rest }) {
   );
 }
 
-export function VideoButton({ muted, ...rest }) {
+export function VideoButton({
+  muted,
+  ...rest
+}: {
+  muted: boolean;
+  [index: string]: unknown;
+}) {
   return (
     <TooltipTrigger>
       <Button variant="toolbar" {...rest} off={muted}>
@@ -101,7 +164,15 @@ export function VideoButton({ muted, ...rest }) {
   );
 }
 
-export function ScreenshareButton({ enabled, className, ...rest }) {
+export function ScreenshareButton({
+  enabled,
+  className,
+  ...rest
+}: {
+  enabled: boolean;
+  className?: string;
+  [index: string]: unknown;
+}) {
   return (
     <TooltipTrigger>
       <Button variant="toolbarSecondary" {...rest} on={enabled}>
@@ -112,7 +183,13 @@ export function ScreenshareButton({ enabled, className, ...rest }) {
   );
 }
 
-export function HangupButton({ className, ...rest }) {
+export function HangupButton({
+  className,
+  ...rest
+}: {
+  className?: string;
+  [index: string]: unknown;
+}) {
   return (
     <TooltipTrigger>
       <Button
@@ -126,3 +203,37 @@ export function HangupButton({ className, ...rest }) {
     </TooltipTrigger>
   );
 }
+
+export function SettingsButton({
+  className,
+  ...rest
+}: {
+  className?: string;
+  [index: string]: unknown;
+}) {
+  return (
+    <TooltipTrigger>
+      <Button variant="toolbar" {...rest}>
+        <SettingsIcon />
+      </Button>
+      {() => "Settings"}
+    </TooltipTrigger>
+  );
+}
+
+export function InviteButton({
+  className,
+  ...rest
+}: {
+  className?: string;
+  [index: string]: unknown;
+}) {
+  return (
+    <TooltipTrigger>
+      <Button variant="toolbar" {...rest}>
+        <AddUserIcon />
+      </Button>
+      {() => "Invite"}
+    </TooltipTrigger>
+  );
+}

src/button/CopyButton.tsx

@@ -1,9 +1,33 @@
+/*
+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 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;
+  className: string;
+  variant: ButtonVariant;
+  copiedMessage: string;
+}
 export function CopyButton({
   value,
   children,
@@ -11,7 +35,7 @@ export function CopyButton({
   variant,
   copiedMessage,
   ...rest
-}) {
+}: Props) {
   const [isCopied, setCopied] = useClipboard(value, { successDuration: 3000 });
 
   return (

src/button/LinkButton.jsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import classNames from "classnames";
-import { variantToClassName, sizeToClassName } from "./Button";
-
-export function LinkButton({ className, variant, size, children, ...rest }) {
-  return (
-    <Link
-      className={classNames(
-        variantToClassName[variant || "secondary"],
-        sizeToClassName[size],
-        className
-      )}
-      {...rest}
-    >
-      {children}
-    </Link>
-  );
-}

src/button/LinkButton.tsx

@@ -0,0 +1,54 @@
+/*
+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 from "react";
+import { Link } from "react-router-dom";
+import classNames from "classnames";
+
+import {
+  variantToClassName,
+  sizeToClassName,
+  ButtonVariant,
+  ButtonSize,
+} from "./Button";
+interface Props {
+  className: string;
+  variant: ButtonVariant;
+  size: ButtonSize;
+  children: JSX.Element;
+  [index: string]: unknown;
+}
+
+export function LinkButton({
+  className,
+  variant,
+  size,
+  children,
+  ...rest
+}: Props) {
+  return (
+    <Link
+      className={classNames(
+        variantToClassName[variant || "secondary"],
+        sizeToClassName[size],
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </Link>
+  );
+}

src/button/index.js

@@ -1,3 +0,0 @@
-export * from "./Button";
-export * from "./CopyButton";
-export * from "./LinkButton";

src/button/index.ts

@@ -0,0 +1,19 @@
+/*
+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.
+*/
+
+export * from "./Button";
+export * from "./CopyButton";
+export * from "./LinkButton";

src/form/Form.jsx

@@ -1,3 +1,19 @@
+/*
+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, { forwardRef } from "react";
 import styles from "./Form.module.css";

src/home/CallList.jsx

@@ -1,3 +1,19 @@
+/*
+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 from "react";
 import { Link } from "react-router-dom";
 import { CopyButton } from "../button";

src/home/CallList.module.css

@@ -10,7 +10,7 @@
 .callTile {
   height: 95px;
   padding: 12px;
-  background-color: var(--bgColor2);
+  background-color: var(--system);
   border-radius: 8px;
   overflow: hidden;
   box-sizing: border-box;
@@ -36,7 +36,7 @@
   flex-direction: column;
   flex: 1;
   padding: 0 16px;
-  color: var(--textColor1);
+  color: var(--primary-content);
   min-width: 0;
 }
 

src/home/CallTypeDropdown.module.css

@@ -0,0 +1,3 @@
+.label {
+  margin-bottom: 0;
+}

src/home/CallTypeDropdown.tsx

@@ -0,0 +1,69 @@
+/*
+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, { FC } from "react";
+import { Item } from "@react-stately/collections";
+
+import { Headline } from "../typography/Typography";
+import { Button } from "../button";
+import { PopoverMenuTrigger } from "../popover/PopoverMenu";
+import { ReactComponent as VideoIcon } from "../icons/Video.svg";
+import { ReactComponent as MicIcon } from "../icons/Mic.svg";
+import { ReactComponent as CheckIcon } from "../icons/Check.svg";
+import styles from "./CallTypeDropdown.module.css";
+import commonStyles from "./common.module.css";
+import menuStyles from "../Menu.module.css";
+import { Menu } from "../Menu";
+
+export enum CallType {
+  Video = "video",
+  Radio = "radio",
+}
+
+interface Props {
+  callType: CallType;
+  setCallType: (value: CallType) => void;
+}
+
+export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
+  return (
+    <PopoverMenuTrigger placement="bottom">
+      <Button variant="dropdown" className={commonStyles.headline}>
+        <Headline className={styles.label}>
+          {callType === CallType.Video ? "Video call" : "Walkie-talkie call"}
+        </Headline>
+      </Button>
+      {(props) => (
+        <Menu {...props} label="Call type menu" onAction={setCallType}>
+          <Item key={CallType.Video} textValue="Video call">
+            <VideoIcon />
+            <span>Video call</span>
+            {callType === CallType.Video && (
+              <CheckIcon className={menuStyles.checkIcon} />
+            )}
+          </Item>
+          <Item key={CallType.Radio} textValue="Walkie-talkie call">
+            <MicIcon />
+            <span>Walkie-talkie call</span>
+            {callType === CallType.Radio && (
+              <CheckIcon className={menuStyles.checkIcon} />
+            )}
+          </Item>
+        </Menu>
+      )}
+    </PopoverMenuTrigger>
+  );
+};

src/home/JoinExistingCallModal.jsx

@@ -1,3 +1,19 @@
+/*
+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 from "react";
 import { Modal, ModalContent } from "../Modal";
 import { Button } from "../button";

src/home/RegisteredView.jsx

@@ -1,5 +1,21 @@
+/*
+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, { useState, useCallback } from "react";
-import { createRoom, roomAliasFromRoomName } from "../matrix-utils";
+import { createRoom, roomAliasLocalpartFromRoomName } from "../matrix-utils";
 import { useGroupCallRooms } from "./useGroupCallRooms";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import commonStyles from "./common.module.css";
@@ -11,10 +27,12 @@ import { UserMenuContainer } from "../UserMenuContainer";
 import { useModalTriggerState } from "../Modal";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { useHistory } from "react-router-dom";
-import { Headline, Title } from "../typography/Typography";
+import { Title } from "../typography/Typography";
 import { Form } from "../form/Form";
+import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
 
 export function RegisteredView({ client }) {
+  const [callType, setCallType] = useState(CallType.Video);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
   const history = useHistory();
@@ -23,12 +41,13 @@ export function RegisteredView({ client }) {
       e.preventDefault();
       const data = new FormData(e.target);
       const roomName = data.get("callName");
+      const ptt = callType === CallType.Radio;
 
       async function submit() {
         setError(undefined);
         setLoading(true);
 
-        const roomIdOrAlias = await createRoom(client, roomName);
+        const roomIdOrAlias = await createRoom(client, roomName, ptt);
 
         if (roomIdOrAlias) {
           history.push(`/room/${roomIdOrAlias}`);
@@ -37,7 +56,7 @@ export function RegisteredView({ client }) {
 
       submit().catch((error) => {
         if (error.errcode === "M_ROOM_IN_USE") {
-          setExistingRoomId(roomAliasFromRoomName(roomName));
+          setExistingRoomId(roomAliasLocalpartFromRoomName(roomName));
           setLoading(false);
           setError(undefined);
           modalState.open();
@@ -49,7 +68,7 @@ export function RegisteredView({ client }) {
         }
       });
     },
-    [client]
+    [client, callType]
   );
 
   const recentRooms = useGroupCallRooms(client);
@@ -60,6 +79,9 @@ export function RegisteredView({ client }) {
     history.push(`/${existingRoomId}`);
   }, [history, existingRoomId]);
 
+  const callNameLabel =
+    callType === CallType.Video ? "Video call name" : "Walkie-talkie call name";
+
   return (
     <>
       <Header>
@@ -73,20 +95,19 @@ export function RegisteredView({ client }) {
       <div className={commonStyles.container}>
         <main className={commonStyles.main}>
           <HeaderLogo className={commonStyles.logo} />
-          <Headline className={commonStyles.headline}>
-            Enter a call name
-          </Headline>
+          <CallTypeDropdown callType={callType} setCallType={setCallType} />
           <Form className={styles.form} onSubmit={onSubmit}>
             <FieldRow className={styles.fieldRow}>
               <InputField
                 id="callName"
                 name="callName"
-                label="Call name"
-                placeholder="Call name"
+                label={callNameLabel}
+                placeholder={callNameLabel}
                 type="text"
                 required
                 autoComplete="off"
               />
+
               <Button
                 type="submit"
                 size="lg"

src/home/RegisteredView.module.css

@@ -7,6 +7,10 @@
 }
 
 .fieldRow {
+  margin-bottom: 24px;
+}
+
+.fieldRow:last-child {
   margin-bottom: 0;
 }
 

src/home/UnauthenticatedView.jsx

@@ -1,76 +1,110 @@
+/*
+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, useState } from "react";
+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, roomAliasFromRoomName } from "../matrix-utils";
+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 { 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() {
+  const { setClient } = useClient();
+  const [callType, setCallType] = useState(CallType.Video);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
-  const [{ privacyPolicyUrl, recaptchaKey }, register] =
+  const [privacyPolicyUrl, recaptchaKey, register] =
     useInteractiveRegistration();
   const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
+
+  const { modalState, modalProps } = useModalTriggerState();
+  const [onFinished, setOnFinished] = useState();
+  const history = useHistory();
+
   const onSubmit = useCallback(
     (e) => {
       e.preventDefault();
       const data = new FormData(e.target);
       const roomName = data.get("callName");
       const displayName = data.get("displayName");
+      const ptt = callType === CallType.Radio;
 
       async function submit() {
         setError(undefined);
         setLoading(true);
         const recaptchaResponse = await execute();
         const userName = generateRandomName();
-        const client = await register(
+        const [client, session] = await register(
           userName,
           randomString(16),
           displayName,
           recaptchaResponse,
           true
         );
-        const roomIdOrAlias = await createRoom(client, roomName);
 
-        if (roomIdOrAlias) {
-          history.push(`/room/${roomIdOrAlias}`);
+        let roomIdOrAlias;
+        try {
+          roomIdOrAlias = await createRoom(client, roomName, ptt);
+        } catch (error) {
+          if (error.errcode === "M_ROOM_IN_USE") {
+            setOnFinished(() => () => {
+              setClient(client, session);
+              const aliasLocalpart = roomAliasLocalpartFromRoomName(roomName);
+              const [, serverName] = client.getUserId().split(":");
+              history.push(`/room/#${aliasLocalpart}:${serverName}`);
+            });
+
+            setLoading(false);
+            modalState.open();
+            return;
+          } else {
+            throw error;
+          }
         }
+
+        // Only consider the registration successful if we managed to create the room, too
+        setClient(client, session);
+        history.push(`/room/${roomIdOrAlias}`);
       }
 
       submit().catch((error) => {
-        if (error.errcode === "M_ROOM_IN_USE") {
-          setExistingRoomId(roomAliasFromRoomName(roomName));
-          setLoading(false);
-          setError(undefined);
-          modalState.open();
-        } else {
-          console.error(error);
-          setLoading(false);
-          setError(error);
-          reset();
-        }
+        console.error(error);
+        setLoading(false);
+        setError(error);
+        reset();
       });
     },
-    [register, reset, execute]
+    [register, reset, execute, history, callType]
   );
 
-  const { modalState, modalProps } = useModalTriggerState();
-  const [existingRoomId, setExistingRoomId] = useState();
-  const history = useHistory();
-  const onJoinExistingRoom = useCallback(() => {
-    history.push(`/${existingRoomId}`);
-  }, [history, existingRoomId]);
+  const callNameLabel =
+    callType === CallType.Video ? "Video call name" : "Walkie-talkie call name";
 
   return (
     <>
@@ -85,16 +119,14 @@ export function UnauthenticatedView() {
       <div className={commonStyles.container}>
         <main className={commonStyles.main}>
           <HeaderLogo className={commonStyles.logo} />
-          <Headline className={commonStyles.headline}>
-            Enter a call name
-          </Headline>
+          <CallTypeDropdown callType={callType} setCallType={setCallType} />
           <Form className={styles.form} onSubmit={onSubmit}>
             <FieldRow>
               <InputField
                 id="callName"
                 name="callName"
-                label="Call name"
-                placeholder="Call name"
+                label={callNameLabel}
+                placeholder={callNameLabel}
                 type="text"
                 required
                 autoComplete="off"
@@ -141,7 +173,7 @@ export function UnauthenticatedView() {
         </footer>
       </div>
       {modalState.isOpen && (
-        <JoinExistingCallModal onJoin={onJoinExistingRoom} {...modalProps} />
+        <JoinExistingCallModal onJoin={onFinished} {...modalProps} />
       )}
     </>
   );

src/home/useGroupCallRooms.js

@@ -1,3 +1,19 @@
+/*
+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 { useState, useEffect } from "react";
 
 const tsCache = {};
@@ -63,7 +79,7 @@ export function useGroupCallRooms(client) {
         return {
           roomId: room.getCanonicalAlias() || room.roomId,
           roomName: room.name,
-          avatarUrl: null,
+          avatarUrl: room.getMxcAvatarUrl(),
           room,
           groupCall,
           participants: [...groupCall.participants],
@@ -81,7 +97,7 @@ export function useGroupCallRooms(client) {
       client.removeListener("GroupCall.incoming", updateRooms);
       client.removeListener("GroupCall.participants", updateRooms);
     };
-  }, []);
+  }, [client]);
 
   return rooms;
 }

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/MicMuted.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.9206 1.0544C1.68141 0.815201 1.29359 0.815201 1.0544 1.0544C0.815201 1.29359 0.815201 1.68141 1.0544 1.9206L4.55 5.41621V7C4.55 8.3531 5.6469 9.45 7 9.45C7.45436 9.45 7.87983 9.32632 8.24458 9.11079L9.12938 9.99558C8.52863 10.4234 7.7937 10.675 7 10.675C4.97035 10.675 3.325 9.02965 3.325 7C3.325 6.66173 3.05077 6.3875 2.7125 6.3875C2.37423 6.3875 2.1 6.66173 2.1 7C2.1 9.49877 3.97038 11.5607 6.3875 11.8621V12.5125C6.3875 12.8508 6.66173 13.125 7 13.125C7.33827 13.125 7.6125 12.8508 7.6125 12.5125V11.8621C8.50718 11.7505 9.32696 11.3978 10.0047 10.8709L12.0794 12.9456C12.3186 13.1848 12.7064 13.1848 12.9456 12.9456C13.1848 12.7064 13.1848 12.3186 12.9456 12.0794L1.9206 1.0544Z" fill="white"/>
+<path d="M10.5474 7.96338L11.5073 8.92525C11.7601 8.33424 11.9 7.68346 11.9 7C11.9 6.66173 11.6258 6.3875 11.2875 6.3875C10.9492 6.3875 10.675 6.66173 10.675 7C10.675 7.33336 10.6306 7.65634 10.5474 7.96338Z" fill="white"/>
+<path d="M4.81385 2.21784L9.45 6.86366V3.325C9.45 1.9719 8.3531 0.875 7 0.875C6.04532 0.875 5.21818 1.42104 4.81385 2.21784Z" fill="white"/>
+</svg>

src/icons/VideoMuted.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.20333 0.963373C0.474437 0.690007 0.913989 0.690007 1.1851 0.963373L11.5983 11.4633C11.8694 11.7367 11.8694 12.1799 11.5983 12.4533C11.3272 12.7267 10.8876 12.7267 10.6165 12.4533L0.20333 1.95332C-0.0677768 1.67995 -0.0677768 1.23674 0.20333 0.963373Z" fill="white"/>
+<path d="M0.418261 3.63429C0.226267 3.95219 0.115674 4.32557 0.115674 4.725V9.85832C0.115674 11.0181 1.0481 11.9583 2.19831 11.9583H8.65411L0.447396 3.66596C0.437225 3.65568 0.427513 3.64511 0.418261 3.63429Z" fill="white"/>
+<path d="M9.95036 4.725V8.33212L4.30219 2.625H7.86772C9.01793 2.625 9.95036 3.5652 9.95036 4.725Z" fill="white"/>
+<path d="M12.8721 4.11817L11.1074 5.54167V9.04166L12.8721 10.4652C13.3266 10.8318 14 10.5055 14 9.91855V4.66478C14 4.07782 13.3266 3.7515 12.8721 4.11817Z" fill="white"/>
+</svg>

src/index.css

@@ -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.
@@ -25,19 +25,20 @@ limitations under the License.
 :root {
   --inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f,
     U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF;
-  --primaryColor: #0dbd8b;
-  --bgColor1: #15191e;
-  --bgColor2: #21262c;
-  --bgColor3: #444;
-  --bgColor4: #394049;
-  --bgColor5: #8d97a5;
-  --textColor1: #fff;
-  --textColor2: #6f7882;
-  --textColor3: #8e99a4;
-  --textColor4: #a9b2bc;
-  --inputBorderColor: #394049;
-  --inputBorderColorFocused: #0086e6;
-  --linkColor: #0086e6;
+  --accent: #0dbd8b;
+  --accent-20: #0dbd8b33;
+  --alert: #ff5b55;
+  --alert-20: #ff5b5533;
+  --links: #0086e6;
+  --primary-content: #ffffff;
+  --secondary-content: #a9b2bc;
+  --tertiary-content: #8e99a4;
+  --tertiary-content-20: #8e99a433;
+  --quaternary-content: #6f7882;
+  --quinary-content: #394049;
+  --system: #21262c;
+  --background: #15191e;
+  --bgColor3: #444; /* This isn't found anywhere in the designs or Compound */
 }
 
 @font-face {
@@ -121,8 +122,9 @@ limitations under the License.
 }
 
 body {
-  background-color: var(--bgColor1);
-  color: var(--textColor1);
+  background-color: var(--background);
+  color: var(--primary-content);
+  color-scheme: dark;
   margin: 0;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
@@ -181,7 +183,7 @@ p {
 }
 
 a {
-  color: var(--primaryColor);
+  color: var(--accent);
   text-decoration: none;
 }
 
@@ -193,8 +195,8 @@ a:active {
 hr {
   width: calc(100% - 24px);
   border: none;
-  border-top: 1px solid var(--bgColor4);
-  color: var(--textColor2);
+  border-top: 1px solid var(--quinary-content);
+  color: var(--quaternary-content);
   overflow: visible;
   text-align: center;
   height: 5px;

src/input/AvatarInputField.jsx

@@ -1,3 +1,19 @@
+/*
+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 { useObjectRef } from "@react-aria/utils";
 import React, { useEffect } from "react";
 import { useCallback } from "react";

src/input/AvatarInputField.module.css

@@ -26,7 +26,7 @@
   position: absolute;
   bottom: 11px;
   right: -4px;
-  background-color: var(--bgColor4);
+  background-color: var(--quinary-content);
   width: 20px;
   height: 20px;
   border-radius: 10px;
@@ -37,5 +37,5 @@
 }
 
 .removeButton {
-  color: #0dbd8b;
+  color: var(--accent);
 }

src/input/Input.jsx

@@ -1,3 +1,19 @@
+/*
+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 } from "react";
 import classNames from "classnames";
 import styles from "./Input.module.css";
@@ -23,7 +39,18 @@ export function Field({ children, className, ...rest }) {
 
 export const InputField = forwardRef(
   (
-    { id, label, className, type, checked, prefix, suffix, disabled, ...rest },
+    {
+      id,
+      label,
+      className,
+      type,
+      checked,
+      prefix,
+      suffix,
+      description,
+      disabled,
+      ...rest
+    },
     ref
   ) => {
     return (
@@ -66,6 +93,7 @@ export const InputField = forwardRef(
           {label}
         </label>
         {suffix && <span>{suffix}</span>}
+        {description && <p className={styles.description}>{description}</p>}
       </Field>
     );
   }

src/input/Input.module.css

@@ -26,7 +26,7 @@
 .inputField {
   border-radius: 4px;
   transition: border-color 0.25s;
-  border: 1px solid var(--inputBorderColor);
+  border: 1px solid var(--quinary-content);
 }
 
 .inputField input,
@@ -36,8 +36,8 @@
   border: none;
   border-radius: 4px;
   padding: 12px 9px 10px 9px;
-  color: var(--textColor1);
-  background-color: var(--bgColor1);
+  color: var(--primary-content);
+  background-color: var(--background);
   flex: 1;
   min-width: 0;
 }
@@ -45,7 +45,7 @@
 .inputField.disabled input,
 .inputField.disabled textarea,
 .inputField.disabled span {
-  color: var(--textColor2);
+  color: var(--quaternary-content);
 }
 
 .inputField span {
@@ -65,13 +65,13 @@
 .inputField input:placeholder-shown:focus::placeholder,
 .inputField textarea:placeholder-shown:focus::placeholder {
   transition: color 0.25s ease-in 0.1s;
-  color: var(--textColor2);
+  color: var(--quaternary-content);
 }
 
 .inputField label {
   transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
     top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
-  color: var(--textColor3);
+  color: var(--tertiary-content);
   background-color: transparent;
   font-size: 15px;
   position: absolute;
@@ -87,7 +87,7 @@
 }
 
 .inputField:focus-within {
-  border-color: var(--inputBorderColorFocused);
+  border-color: var(--links);
 }
 
 .inputField input:focus,
@@ -101,7 +101,7 @@
 .inputField textarea:focus + label,
 .inputField textarea:not(:placeholder-shown) + label,
 .inputField.prefix textarea + label {
-  background-color: var(--bgColor2);
+  background-color: var(--system);
   transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
     top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
   font-size: 10px;
@@ -112,19 +112,21 @@
 
 .inputField input:focus + label,
 .inputField textarea:focus + label {
-  color: var(--inputBorderColorFocused);
+  color: var(--links);
 }
 
 .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 {
@@ -154,12 +156,12 @@
 }
 
 .checkbox svg * {
-  stroke: #fff;
+  stroke: var(--primary-content);
 }
 
 .checkboxField input[type="checkbox"]:checked + label > .checkbox {
-  background: var(--primaryColor);
-  border-color: var(--primaryColor);
+  background: var(--accent);
+  border-color: var(--accent);
 }
 
 .checkboxField input[type="checkbox"]:checked + label > .checkbox svg {
@@ -167,12 +169,18 @@
 }
 
 .checkboxField:focus-within .checkbox {
-  border: 1.5px solid var(--inputBorderColorFocused) !important;
+  border: 1.5px solid var(--links) !important;
 }
 
 .errorMessage {
   margin: 0;
   font-size: 13px;
-  color: #ff5b55;
+  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/SelectInput.jsx

@@ -1,3 +1,19 @@
+/*
+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, { useRef } from "react";
 import { HiddenSelect, useSelect } from "@react-aria/select";
 import { useButton } from "@react-aria/button";

src/input/SelectInput.module.css

@@ -17,11 +17,11 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 12px;
-  background-color: var(--bgColor1);
+  background-color: var(--background);
   border-radius: 8px;
-  border: 1px solid var(--inputBorderColor);
+  border: 1px solid var(--quinary-content);
   font-size: 15px;
-  color: var(--textColor1);
+  color: var(--primary-content);
   height: 40px;
   max-width: 100%;
   width: 100%;

src/input/Toggle.jsx

@@ -0,0 +1,57 @@
+/*
+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, useRef } from "react";
+import styles from "./Toggle.module.css";
+import { useToggleButton } from "@react-aria/button";
+import classNames from "classnames";
+import { Field } from "./Input";
+
+export function Toggle({ id, label, className, onChange, isSelected }) {
+  const buttonRef = useRef();
+  const toggle = useCallback(() => {
+    onChange(!isSelected);
+  });
+  const { buttonProps } = useToggleButton(
+    { isSelected },
+    { toggle },
+    buttonRef
+  );
+
+  return (
+    <Field
+      className={classNames(
+        styles.toggle,
+        { [styles.on]: isSelected },
+        className
+      )}
+    >
+      <button
+        {...buttonProps}
+        ref={buttonRef}
+        id={id}
+        className={classNames(styles.button, {
+          [styles.isPressed]: isSelected,
+        })}
+      >
+        <div className={styles.ball} />
+      </button>
+      <label className={styles.label} htmlFor={id}>
+        {label}
+      </label>
+    </Field>
+  );
+}

src/input/Toggle.module.css

@@ -0,0 +1,46 @@
+.toggle {
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.button {
+  position: relative;
+  padding: 0;
+  transition: background-color 0.2s ease-out 0.1s;
+  width: 44px;
+  height: 24px;
+  border: none;
+  border-radius: 21px;
+  background-color: var(--quaternary-content);
+  cursor: pointer;
+  margin-right: 8px;
+}
+
+.ball {
+  transition: left 0.15s ease-out 0.1s;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 21px;
+  background-color: var(--background);
+  left: 2px;
+  top: 2px;
+}
+
+.label {
+  padding: 10px 8px;
+  line-height: 24px;
+  color: var(--quaternary-content);
+}
+
+.toggle.on .button {
+  background-color: var(--accent);
+}
+
+.toggle.on .ball {
+  left: 22px;
+}
+
+.toggle.on .label {
+  color: var(--primary-content);
+}

src/main.jsx

@@ -1,74 +0,0 @@
-/*
-Copyright 2021 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from "react";
-import ReactDOM from "react-dom";
-import { createBrowserHistory } from "history";
-import "./index.css";
-import App from "./App";
-import * as Sentry from "@sentry/react";
-import { Integrations } from "@sentry/tracing";
-import { ErrorView } from "./FullScreenView";
-import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
-import { InspectorContextProvider } from "./room/GroupCallInspector";
-
-rageshake.init();
-
-console.info(`matrix-video-chat ${import.meta.env.VITE_APP_VERSION || "dev"}`);
-
-if (import.meta.env.VITE_CUSTOM_THEME) {
-  const style = document.documentElement.style;
-  style.setProperty("--primaryColor", import.meta.env.VITE_PRIMARY_COLOR);
-  style.setProperty("--bgColor1", import.meta.env.VITE_BG_COLOR_1);
-  style.setProperty("--bgColor2", import.meta.env.VITE_BG_COLOR_2);
-  style.setProperty("--bgColor3", import.meta.env.VITE_BG_COLOR_3);
-  style.setProperty("--bgColor4", import.meta.env.VITE_BG_COLOR_4);
-  style.setProperty("--bgColor5", import.meta.env.VITE_BG_COLOR_5);
-  style.setProperty("--textColor1", import.meta.env.VITE_TEXT_COLOR_1);
-  style.setProperty("--textColor2", import.meta.env.VITE_TEXT_COLOR_2);
-  style.setProperty("--textColor4", import.meta.env.VITE_TEXT_COLOR_4);
-  style.setProperty(
-    "--inputBorderColor",
-    import.meta.env.VITE_INPUT_BORDER_COLOR
-  );
-  style.setProperty(
-    "--inputBorderColorFocused",
-    import.meta.env.VITE_INPUT_BORDER_COLOR_FOCUSED
-  );
-}
-
-const history = createBrowserHistory();
-
-Sentry.init({
-  dsn: import.meta.env.VITE_SENTRY_DSN,
-  integrations: [
-    new Integrations.BrowserTracing({
-      routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
-    }),
-  ],
-  tracesSampleRate: 1.0,
-});
-
-ReactDOM.render(
-  <React.StrictMode>
-    <Sentry.ErrorBoundary fallback={ErrorView}>
-      <InspectorContextProvider>
-        <App history={history} />
-      </InspectorContextProvider>
-    </Sentry.ErrorBoundary>
-  </React.StrictMode>,
-  document.getElementById("root")
-);

src/main.tsx

@@ -0,0 +1,114 @@
+/*
+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.
+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.
+*/
+
+// We need to import this somewhere, once, so that the correct 'request'
+// function gets set. It needs to be not in the same file as we use
+// createClient, or the typescript transpiler gets confused about
+// dependency references.
+import "matrix-js-sdk/src/browser-index";
+
+import React from "react";
+import ReactDOM from "react-dom";
+import { createBrowserHistory } from "history";
+import * as Sentry from "@sentry/react";
+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);
+  style.setProperty(
+    "--accent-20",
+    import.meta.env.VITE_THEME_ACCENT_20 as string
+  );
+  style.setProperty("--alert", import.meta.env.VITE_THEME_ALERT as string);
+  style.setProperty(
+    "--alert-20",
+    import.meta.env.VITE_THEME_ALERT_20 as string
+  );
+  style.setProperty("--links", import.meta.env.VITE_THEME_LINKS as string);
+  style.setProperty(
+    "--primary-content",
+    import.meta.env.VITE_THEME_PRIMARY_CONTENT as string
+  );
+  style.setProperty(
+    "--secondary-content",
+    import.meta.env.VITE_THEME_SECONDARY_CONTENT as string
+  );
+  style.setProperty(
+    "--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
+  );
+  style.setProperty(
+    "--quinary-content",
+    import.meta.env.VITE_THEME_QUINARY_CONTENT as string
+  );
+  style.setProperty("--system", import.meta.env.VITE_THEME_SYSTEM as string);
+  style.setProperty(
+    "--background",
+    import.meta.env.VITE_THEME_BACKGROUND as string
+  );
+}
+
+const history = createBrowserHistory();
+
+Sentry.init({
+  dsn: import.meta.env.VITE_SENTRY_DSN as string,
+  environment:
+    (import.meta.env.VITE_SENTRY_ENVIRONMENT as string) ?? "production",
+  integrations: [
+    new Integrations.BrowserTracing({
+      routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
+    }),
+  ],
+  tracesSampleRate: 1.0,
+});
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Sentry.ErrorBoundary fallback={ErrorView}>
+      <InspectorContextProvider>
+        <App history={history} />
+      </InspectorContextProvider>
+    </Sentry.ErrorBoundary>
+  </React.StrictMode>,
+  document.getElementById("root")
+);

src/matrix-utils.js

@@ -1,137 +0,0 @@
-import matrix from "matrix-js-sdk/src/browser-index";
-import {
-  GroupCallIntent,
-  GroupCallType,
-} from "matrix-js-sdk/src/browser-index";
-
-export const defaultHomeserver =
-  import.meta.env.VITE_DEFAULT_HOMESERVER ||
-  `${window.location.protocol}//${window.location.host}`;
-
-export const defaultHomeserverHost = new URL(defaultHomeserver).host;
-
-function waitForSync(client) {
-  return new Promise((resolve, reject) => {
-    const onSync = (state, _old, data) => {
-      if (state === "PREPARED") {
-        resolve();
-        client.removeListener("sync", onSync);
-      } else if (state === "ERROR") {
-        reject(data?.error);
-        client.removeListener("sync", onSync);
-      }
-    };
-    client.on("sync", onSync);
-  });
-}
-
-export async function initClient(clientOptions) {
-  const client = matrix.createClient({
-    ...clientOptions,
-    useAuthorizationHeader: true,
-  });
-
-  await client.startClient({
-    // dirty hack to reduce chance of gappy syncs
-    // should be fixed by spotting gaps and backpaginating
-    initialSyncLimit: 50,
-  });
-
-  await waitForSync(client);
-
-  return client;
-}
-
-export function roomAliasFromRoomName(roomName) {
-  return roomName
-    .trim()
-    .replace(/\s/g, "-")
-    .replace(/[^\w-]/g, "")
-    .toLowerCase();
-}
-
-export function roomNameFromRoomId(roomId) {
-  return roomId
-    .match(/([^:]+):.*$/)[1]
-    .substring(1)
-    .split("-")
-    .map((part) =>
-      part.length > 0 ? part.charAt(0).toUpperCase() + part.slice(1) : part
-    )
-    .join(" ")
-    .toLowerCase();
-}
-
-export function isLocalRoomId(roomId) {
-  if (!roomId) {
-    return false;
-  }
-
-  const parts = roomId.match(/[^:]+:(.*)$/);
-
-  if (parts.length < 2) {
-    return false;
-  }
-
-  return parts[1] === defaultHomeserverHost;
-}
-
-export async function createRoom(client, name) {
-  const { room_id, room_alias } = await client.createRoom({
-    visibility: "private",
-    preset: "public_chat",
-    name,
-    room_alias_name: roomAliasFromRoomName(name),
-    power_level_content_override: {
-      invite: 100,
-      kick: 100,
-      ban: 100,
-      redact: 50,
-      state_default: 0,
-      events_default: 0,
-      users_default: 0,
-      events: {
-        "m.room.power_levels": 100,
-        "m.room.history_visibility": 100,
-        "m.room.tombstone": 100,
-        "m.room.encryption": 100,
-        "m.room.name": 50,
-        "m.room.message": 0,
-        "m.room.encrypted": 50,
-        "m.sticker": 50,
-        "org.matrix.msc3401.call.member": 0,
-      },
-      users: {
-        [client.getUserId()]: 100,
-      },
-    },
-  });
-
-  await client.createGroupCall(
-    room_id,
-    GroupCallType.Video,
-    GroupCallIntent.Prompt
-  );
-
-  return room_alias || room_id;
-}
-
-export function getRoomUrl(roomId) {
-  if (roomId.startsWith("#")) {
-    const [localPart, host] = roomId.replace("#", "").split(":");
-
-    if (host !== defaultHomeserverHost) {
-      return `${window.location.protocol}//${window.location.host}/room/${roomId}`;
-    } else {
-      return `${window.location.protocol}//${window.location.host}/${localPart}`;
-    }
-  } else {
-    return `${window.location.protocol}//${window.location.host}/room/${roomId}`;
-  }
-}
-
-export function getAvatarUrl(client, mxcUrl, avatarSize = 96) {
-  const width = Math.floor(avatarSize * window.devicePixelRatio);
-  const height = Math.floor(avatarSize * window.devicePixelRatio);
-  return mxcUrl && client.mxcUrlToHttp(mxcUrl, width, height, "crop");
-}

src/matrix-utils.ts

@@ -0,0 +1,279 @@
+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 { MemoryStore } from "matrix-js-sdk/src/store/memory";
+import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
+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, MatrixClient } from "matrix-js-sdk/src/matrix";
+import { ICreateClientOpts } from "matrix-js-sdk/src/matrix";
+import { ClientEvent } from "matrix-js-sdk/src/client";
+import { Visibility, Preset } from "matrix-js-sdk/src/@types/partials";
+import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import IndexedDBWorker from "./IndexedDBWorker?worker";
+
+export const defaultHomeserver =
+  (import.meta.env.VITE_DEFAULT_HOMESERVER as string) ??
+  `${window.location.protocol}//${window.location.host}`;
+
+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 = (
+      state: SyncState,
+      _old: SyncState,
+      data: ISyncStateData
+    ) => {
+      if (state === "PREPARED") {
+        resolve();
+        client.removeListener(ClientEvent.Sync, onSync);
+      } else if (state === "ERROR") {
+        reject(data?.error);
+        client.removeListener(ClientEvent.Sync, onSync);
+      }
+    };
+    client.on(ClientEvent.Sync, onSync);
+  });
+}
+
+/**
+ * Initialises and returns a new 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,
+  restore: boolean
+): Promise<MatrixClient> {
+  // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
+  window.OLM_OPTIONS = {};
+  await Olm.init({ locateFile: () => olmWasmPath });
+
+  let indexedDB: IDBFactory;
+
+  try {
+    indexedDB = window.indexedDB;
+  } catch (e) {}
+
+  const storeOpts = {} as ICreateClientOpts;
+
+  if (indexedDB && localStorage && !import.meta.env.DEV) {
+    storeOpts.store = new IndexedDBStore({
+      indexedDB: window.indexedDB,
+      localStorage,
+      dbName: SYNC_STORE_NAME,
+      workerFactory: () => new IndexedDBWorker(),
+    });
+  } else if (localStorage) {
+    storeOpts.store = new MemoryStore({ 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,
+      CRYPTO_STORE_NAME
+    );
+  } else if (localStorage) {
+    storeOpts.cryptoStore = new LocalStorageCryptoStore(localStorage);
+  } else {
+    storeOpts.cryptoStore = new MemoryCryptoStore();
+  }
+
+  // XXX: we read from the URL search 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 params = new URLSearchParams(window.location.search);
+  // disable e2e only if enableE2e=false is given
+  const enableE2e = params.get("enableE2e") !== "false";
+
+  if (!enableE2e) {
+    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
+    // so we don't want API calls taking ages, we'd rather they just fail.
+    localTimeoutMs: 5000,
+    useE2eForGroupCall: enableE2e,
+  });
+
+  try {
+    await client.store.startup();
+  } catch (error) {
+    console.error(
+      "Error starting matrix client store. Falling back to memory store.",
+      error
+    );
+    client.store = new MemoryStore({ localStorage });
+    await client.store.startup();
+  }
+
+  if (client.initCrypto) {
+    await client.initCrypto();
+  }
+
+  await client.startClient({
+    // dirty hack to reduce chance of gappy syncs
+    // should be fixed by spotting gaps and backpaginating
+    initialSyncLimit: 50,
+  });
+
+  await waitForSync(client);
+
+  return client;
+}
+
+export function roomAliasLocalpartFromRoomName(roomName: string): string {
+  return roomName
+    .trim()
+    .replace(/\s/g, "-")
+    .replace(/[^\w-]/g, "")
+    .toLowerCase();
+}
+
+export function fullAliasFromRoomName(
+  roomName: string,
+  client: MatrixClient
+): string {
+  return `#${roomAliasLocalpartFromRoomName(roomName)}:${client.getDomain()}`;
+}
+
+export function roomNameFromRoomId(roomId: string): string {
+  return roomId
+    .match(/([^:]+):.*$/)[1]
+    .substring(1)
+    .split("-")
+    .map((part) =>
+      part.length > 0 ? part.charAt(0).toUpperCase() + part.slice(1) : part
+    )
+    .join(" ")
+    .toLowerCase();
+}
+
+export function isLocalRoomId(roomId: string): boolean {
+  if (!roomId) {
+    return false;
+  }
+
+  const parts = roomId.match(/[^:]+:(.*)$/);
+
+  if (parts.length < 2) {
+    return false;
+  }
+
+  return parts[1] === defaultHomeserverHost;
+}
+
+export async function createRoom(
+  client: MatrixClient,
+  name: string
+): Promise<string> {
+  await client.createRoom({
+    visibility: Visibility.Private,
+    preset: Preset.PublicChat,
+    name,
+    room_alias_name: roomAliasLocalpartFromRoomName(name),
+    power_level_content_override: {
+      invite: 100,
+      kick: 100,
+      ban: 100,
+      redact: 50,
+      state_default: 0,
+      events_default: 0,
+      users_default: 0,
+      events: {
+        "m.room.power_levels": 100,
+        "m.room.history_visibility": 100,
+        "m.room.tombstone": 100,
+        "m.room.encryption": 100,
+        "m.room.name": 50,
+        "m.room.message": 0,
+        "m.room.encrypted": 50,
+        "m.sticker": 50,
+        "org.matrix.msc3401.call.member": 0,
+      },
+      users: {
+        [client.getUserId()]: 100,
+      },
+    },
+  });
+
+  return fullAliasFromRoomName(name, client);
+}
+
+export function getRoomUrl(roomId: string): string {
+  if (roomId.startsWith("#")) {
+    const [localPart, host] = roomId.replace("#", "").split(":");
+
+    if (host !== defaultHomeserverHost) {
+      return `${window.location.protocol}//${window.location.host}/room/${roomId}`;
+    } else {
+      return `${window.location.protocol}//${window.location.host}/${localPart}`;
+    }
+  } else {
+    return `${window.location.protocol}//${window.location.host}/room/${roomId}`;
+  }
+}
+
+export function getAvatarUrl(
+  client: MatrixClient,
+  mxcUrl: string,
+  avatarSize = 96
+): string {
+  const width = Math.floor(avatarSize * window.devicePixelRatio);
+  const height = Math.floor(avatarSize * window.devicePixelRatio);
+  return mxcUrl && client.mxcUrlToHttp(mxcUrl, width, height, "crop");
+}

src/popover/Popover.jsx

@@ -1,3 +1,19 @@
+/*
+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 { DismissButton, useOverlay } from "@react-aria/overlays";
 import { FocusScope } from "@react-aria/focus";

src/popover/Popover.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 194px;
-  background: var(--bgColor2);
+  background: var(--system);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 8px;
 }

src/popover/PopoverMenu.jsx

@@ -1,3 +1,19 @@
+/*
+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";

src/profile/ProfileModal.tsx

@@ -1,4 +1,22 @@
+/*
+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, useEffect, useState } from "react";
+import { MatrixClient } from "matrix-js-sdk";
+
 import { Button } from "../button";
 import { useProfile } from "./useProfile";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
@@ -6,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: () => {};
+  [rest: string]: unknown;
+}
+export function ProfileModal({ client, ...rest }: Props) {
   const { onClose } = rest;
   const {
     success,
@@ -34,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.js

@@ -1,95 +0,0 @@
-import { useState, useCallback, useEffect } from "react";
-import { getAvatarUrl } from "../matrix-utils";
-
-export function useProfile(client) {
-  const [{ loading, displayName, avatarUrl, error, success }, setState] =
-    useState(() => {
-      const user = client?.getUser(client.getUserId());
-
-      return {
-        success: false,
-        loading: false,
-        displayName: user?.rawDisplayName,
-        avatarUrl: user && client && getAvatarUrl(client, user.avatarUrl),
-        error: null,
-      };
-    });
-
-  useEffect(() => {
-    const onChangeUser = (_event, { displayName, avatarUrl }) => {
-      setState({
-        success: false,
-        loading: false,
-        displayName,
-        avatarUrl: getAvatarUrl(client, avatarUrl),
-        error: null,
-      });
-    };
-
-    let user;
-
-    if (client) {
-      const userId = client.getUserId();
-      user = client.getUser(userId);
-      user.on("User.displayName", onChangeUser);
-      user.on("User.avatarUrl", onChangeUser);
-    }
-
-    return () => {
-      if (user) {
-        user.removeListener("User.displayName", onChangeUser);
-        user.removeListener("User.avatarUrl", onChangeUser);
-      }
-    };
-  }, [client]);
-
-  const saveProfile = useCallback(
-    async ({ displayName, avatar, removeAvatar }) => {
-      if (client) {
-        setState((prev) => ({
-          ...prev,
-          loading: true,
-          error: null,
-          success: false,
-        }));
-
-        try {
-          await client.setDisplayName(displayName);
-
-          let mxcAvatarUrl;
-
-          if (removeAvatar) {
-            await client.setAvatarUrl("");
-          } else if (avatar) {
-            mxcAvatarUrl = await client.uploadContent(avatar);
-            await client.setAvatarUrl(mxcAvatarUrl);
-          }
-
-          setState((prev) => ({
-            ...prev,
-            displayName,
-            avatarUrl: removeAvatar
-              ? null
-              : mxcAvatarUrl
-              ? getAvatarUrl(client, mxcAvatarUrl)
-              : prev.avatarUrl,
-            loading: false,
-            success: true,
-          }));
-        } catch (error) {
-          setState((prev) => ({
-            ...prev,
-            loading: false,
-            error,
-            success: false,
-          }));
-        }
-      } else {
-        console.error("Client not initialized before calling saveProfile");
-      }
-    },
-    [client]
-  );
-
-  return { loading, error, displayName, avatarUrl, saveProfile, success };
-}

src/profile/useProfile.ts

@@ -0,0 +1,138 @@
+/*
+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 { 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";
+
+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<ProfileLoadState>(() => {
+      const user = client?.getUser(client.getUserId());
+
+      return {
+        success: false,
+        loading: false,
+        displayName: user?.rawDisplayName,
+        avatarUrl: user?.avatarUrl,
+        error: null,
+      };
+    });
+
+  useEffect(() => {
+    const onChangeUser = (
+      _event: MatrixEvent,
+      { displayName, avatarUrl }: User
+    ) => {
+      setState({
+        success: false,
+        loading: false,
+        displayName,
+        avatarUrl,
+        error: null,
+      });
+    };
+
+    let user: User;
+
+    if (client) {
+      const userId = client.getUserId();
+      user = client.getUser(userId);
+      user.on(UserEvent.DisplayName, onChangeUser);
+      user.on(UserEvent.AvatarUrl, onChangeUser);
+    }
+
+    return () => {
+      if (user) {
+        user.removeListener(UserEvent.DisplayName, onChangeUser);
+        user.removeListener(UserEvent.AvatarUrl, onChangeUser);
+      }
+    };
+  }, [client]);
+
+  const saveProfile = useCallback<ProfileSaveCallback>(
+    async ({ displayName, avatar, removeAvatar }) => {
+      if (client) {
+        setState((prev) => ({
+          ...prev,
+          loading: true,
+          error: null,
+          success: false,
+        }));
+
+        try {
+          await client.setDisplayName(displayName);
+
+          let mxcAvatarUrl: string;
+
+          if (removeAvatar) {
+            await client.setAvatarUrl("");
+          } else if (avatar) {
+            mxcAvatarUrl = await client.uploadContent(avatar);
+            await client.setAvatarUrl(mxcAvatarUrl);
+          }
+
+          setState((prev) => ({
+            ...prev,
+            displayName,
+            avatarUrl: removeAvatar ? null : mxcAvatarUrl ?? prev.avatarUrl,
+            loading: false,
+            success: true,
+          }));
+        } catch (error: unknown) {
+          setState((prev) => ({
+            ...prev,
+            loading: false,
+            error: error instanceof Error ? error : Error(error as string),
+            success: false,
+          }));
+        }
+      } else {
+        console.error("Client not initialized before calling saveProfile");
+      }
+    },
+    [client]
+  );
+
+  return {
+    loading,
+    error,
+    displayName,
+    avatarUrl,
+    saveProfile,
+    success,
+  };
+}

src/room/AudioPreview.jsx

@@ -0,0 +1,85 @@
+/*
+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 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 { Body } from "../typography/Typography";
+
+export function AudioPreview({
+  state,
+  roomName,
+  audioInput,
+  audioInputs,
+  setAudioInput,
+  audioOutput,
+  audioOutputs,
+  setAudioOutput,
+}) {
+  return (
+    <>
+      <h1>{`${roomName} - Walkie-talkie call`}</h1>
+      <div className={styles.preview}>
+        {state === GroupCallState.LocalCallFeedUninitialized && (
+          <Body fontWeight="semiBold" className={styles.microphonePermissions}>
+            Microphone permissions needed to join the call.
+          </Body>
+        )}
+        {state === GroupCallState.InitializingLocalCallFeed && (
+          <Body fontWeight="semiBold" className={styles.microphonePermissions}>
+            Accept microphone permissions to join the call.
+          </Body>
+        )}
+        {state === GroupCallState.LocalCallFeedInitialized && (
+          <>
+            <SelectInput
+              label="Microphone"
+              selectedKey={audioInput}
+              onSelectionChange={setAudioInput}
+              className={styles.inputField}
+            >
+              {audioInputs.map(({ deviceId, label }, index) => (
+                <Item key={deviceId}>
+                  {!!label && label.trim().length > 0
+                    ? label
+                    : `Microphone ${index + 1}`}
+                </Item>
+              ))}
+            </SelectInput>
+            {audioOutputs.length > 0 && (
+              <SelectInput
+                label="Speaker"
+                selectedKey={audioOutput}
+                onSelectionChange={setAudioOutput}
+                className={styles.inputField}
+              >
+                {audioOutputs.map(({ deviceId, label }, index) => (
+                  <Item key={deviceId}>
+                    {!!label && label.trim().length > 0
+                      ? label
+                      : `Speaker ${index + 1}`}
+                  </Item>
+                ))}
+              </SelectInput>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+}

src/room/AudioPreview.module.css

@@ -0,0 +1,27 @@
+.preview {
+  margin: 20px 0;
+  padding: 24px 20px;
+  border-radius: 8px;
+  width: calc(100% - 40px);
+  max-width: 414px;
+}
+
+.inputField {
+  width: 100%;
+}
+
+.inputField:last-child {
+  margin-bottom: 0;
+}
+
+.microphonePermissions {
+  margin: 20px;
+  text-align: center;
+}
+
+@media (min-width: 800px) {
+  .preview {
+    margin-top: 40px;
+    background-color: #21262c;
+  }
+}

src/room/CallEndedView.jsx

@@ -1,3 +1,19 @@
+/*
+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 from "react";
 import styles from "./CallEndedView.module.css";
 import { LinkButton } from "../button";

src/room/FeedbackModal.jsx

@@ -1,8 +1,27 @@
+/*
+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, useEffect } from "react";
 import { Modal, ModalContent } from "../Modal";
 import { Button } from "../button";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import { useSubmitRageshake, useRageshakeRequest } from "../settings/rageshake";
+import {
+  useSubmitRageshake,
+  useRageshakeRequest,
+} from "../settings/submit-rageshake";
 import { Body } from "../typography/Typography";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 

src/room/GridLayoutMenu.jsx

@@ -1,10 +1,26 @@
+/*
+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 from "react";
 import { Button } from "../button";
 import { PopoverMenuTrigger } from "../popover/PopoverMenu";
 import { ReactComponent as SpotlightIcon } from "../icons/Spotlight.svg";
 import { ReactComponent as FreedomIcon } from "../icons/Freedom.svg";
 import { ReactComponent as CheckIcon } from "../icons/Check.svg";
-import styles from "./GridLayoutMenu.module.css";
+import menuStyles from "../Menu.module.css";
 import { Menu } from "../Menu";
 import { Item } from "@react-stately/collections";
 import { Tooltip, TooltipTrigger } from "../Tooltip";
@@ -23,13 +39,15 @@ export function GridLayoutMenu({ layout, setLayout }) {
           <Item key="freedom" textValue="Freedom">
             <FreedomIcon />
             <span>Freedom</span>
-            {layout === "freedom" && <CheckIcon className={styles.checkIcon} />}
+            {layout === "freedom" && (
+              <CheckIcon className={menuStyles.checkIcon} />
+            )}
           </Item>
           <Item key="spotlight" textValue="Spotlight">
             <SpotlightIcon />
             <span>Spotlight</span>
             {layout === "spotlight" && (
-              <CheckIcon className={styles.checkIcon} />
+              <CheckIcon className={menuStyles.checkIcon} />
             )}
           </Item>
         </Menu>

src/room/GridLayoutMenu.module.css

@@ -1,8 +0,0 @@
-.checkIcon {
-  position: absolute;
-  right: 16px;
-}
-
-.checkIcon * {
-  stroke: var(--textColor1);
-}

src/room/GroupCallInspector.jsx

@@ -1,3 +1,19 @@
+/*
+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 { Resizable } from "re-resizable";
 import React, {
   useEffect,

src/room/GroupCallInspector.module.css

@@ -1,5 +1,5 @@
 .inspector {
-  background-color: var(--bgColor2);
+  background-color: var(--system);
 }
 
 .scrollContainer {
@@ -20,6 +20,6 @@
 
 .sequenceDiagramViewer :global(.messageText) {
   font-size: 12px;
-  fill: var(--textColor1) !important;
-  stroke: var(--textColor1) !important;
+  fill: var(--primary-content) !important;
+  stroke: var(--primary-content) !important;
 }

src/room/GroupCallLoader.jsx

@@ -1,14 +1,36 @@
+/*
+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 from "react";
 import { useLoadGroupCall } from "./useLoadGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
 import { usePageTitle } from "../usePageTitle";
 
-export function GroupCallLoader({ client, roomId, viaServers, children }) {
+export function GroupCallLoader({
+  client,
+  roomId,
+  viaServers,
+  createPtt,
+  children,
+}) {
   const { loading, error, groupCall } = useLoadGroupCall(
     client,
     roomId,
     viaServers,
-    true
+    createPtt
   );
 
   usePageTitle(groupCall ? groupCall.room.name : "Loading...");

src/room/GroupCallView.jsx

@@ -1,34 +1,39 @@
+/*
+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, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
-import { useGroupCall } from "matrix-react-sdk/src/hooks/useGroupCall";
+import { useGroupCall } from "./useGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
 import { LobbyView } from "./LobbyView";
 import { InCallView } from "./InCallView";
+import { PTTCallView } from "./PTTCallView";
 import { CallEndedView } from "./CallEndedView";
+import { useRoomAvatar } from "./useRoomAvatar";
 import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 import { useLocationNavigation } from "../useLocationNavigation";
 
 export function GroupCallView({
   client,
   isPasswordlessUser,
+  isEmbedded,
   roomId,
   groupCall,
-  simpleGrid,
 }) {
-  const [showInspector, setShowInspector] = useState(
-    () => !!localStorage.getItem("matrix-group-call-inspector")
-  );
-  const onChangeShowInspector = useCallback((show) => {
-    setShowInspector(show);
-
-    if (show) {
-      localStorage.setItem("matrix-group-call-inspector", "true");
-    } else {
-      localStorage.removeItem("matrix-group-call-inspector");
-    }
-  }, []);
-
   const {
     state,
     error,
@@ -48,11 +53,18 @@ export function GroupCallView({
     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);
 
@@ -73,28 +85,43 @@ export function GroupCallView({
   if (error) {
     return <ErrorView error={error} />;
   } else if (state === GroupCallState.Entered) {
-    return (
-      <InCallView
-        groupCall={groupCall}
-        client={client}
-        roomName={groupCall.room.name}
-        microphoneMuted={microphoneMuted}
-        localVideoMuted={localVideoMuted}
-        toggleLocalVideoMuted={toggleLocalVideoMuted}
-        toggleMicrophoneMuted={toggleMicrophoneMuted}
-        userMediaFeeds={userMediaFeeds}
-        activeSpeaker={activeSpeaker}
-        onLeave={onLeave}
-        toggleScreensharing={toggleScreensharing}
-        isScreensharing={isScreensharing}
-        localScreenshareFeed={localScreenshareFeed}
-        screenshareFeeds={screenshareFeeds}
-        simpleGrid={simpleGrid}
-        setShowInspector={onChangeShowInspector}
-        showInspector={showInspector}
-        roomId={roomId}
-      />
-    );
+    if (groupCall.isPtt) {
+      return (
+        <PTTCallView
+          client={client}
+          roomId={roomId}
+          roomName={groupCall.room.name}
+          avatarUrl={avatarUrl}
+          groupCall={groupCall}
+          participants={participants}
+          userMediaFeeds={userMediaFeeds}
+          onLeave={onLeave}
+          isEmbedded={isEmbedded}
+        />
+      );
+    } else {
+      return (
+        <InCallView
+          groupCall={groupCall}
+          client={client}
+          roomName={groupCall.room.name}
+          avatarUrl={avatarUrl}
+          microphoneMuted={microphoneMuted}
+          localVideoMuted={localVideoMuted}
+          toggleLocalVideoMuted={toggleLocalVideoMuted}
+          toggleMicrophoneMuted={toggleMicrophoneMuted}
+          userMediaFeeds={userMediaFeeds}
+          activeSpeaker={activeSpeaker}
+          onLeave={onLeave}
+          toggleScreensharing={toggleScreensharing}
+          isScreensharing={isScreensharing}
+          localScreenshareFeed={localScreenshareFeed}
+          screenshareFeeds={screenshareFeeds}
+          roomId={roomId}
+          unencryptedEventsFromUsers={unencryptedEventsFromUsers}
+        />
+      );
+    }
   } else if (state === GroupCallState.Entering) {
     return (
       <FullScreenView>
@@ -104,23 +131,32 @@ export function GroupCallView({
   } else if (left) {
     return <CallEndedView client={client} />;
   } else {
-    return (
-      <LobbyView
-        client={client}
-        hasLocalParticipant={hasLocalParticipant}
-        roomName={groupCall.room.name}
-        state={state}
-        onInitLocalCallFeed={initLocalCallFeed}
-        localCallFeed={localCallFeed}
-        onEnter={enter}
-        microphoneMuted={microphoneMuted}
-        localVideoMuted={localVideoMuted}
-        toggleLocalVideoMuted={toggleLocalVideoMuted}
-        toggleMicrophoneMuted={toggleMicrophoneMuted}
-        setShowInspector={onChangeShowInspector}
-        showInspector={showInspector}
-        roomId={roomId}
-      />
-    );
+    if (isEmbedded) {
+      return (
+        <FullScreenView>
+          <h1>Loading room...</h1>
+        </FullScreenView>
+      );
+    } 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}
+          isEmbedded={isEmbedded}
+        />
+      );
+    }
   }
 }

src/room/InCallView.jsx

@@ -1,4 +1,20 @@
-import React, { useCallback, useMemo } from "react";
+/*
+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,
@@ -6,25 +22,29 @@ import {
   VideoButton,
   ScreenshareButton,
 } from "../button";
-import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
-import VideoGrid, {
-  useVideoGridLayout,
-} from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid";
-import { VideoTileContainer } from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoTileContainer";
-import SimpleVideoGrid from "matrix-react-sdk/src/components/views/voip/GroupCallView/SimpleVideoGrid";
-import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss";
-import { getAvatarUrl } from "../matrix-utils";
+import {
+  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/rageshake";
+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";
+import { useAudioContext } from "../video-grid/useMediaStream";
 
-const canScreenshare = "getDisplayMedia" in navigator.mediaDevices;
+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.
@@ -34,6 +54,7 @@ export function InCallView({
   client,
   groupCall,
   roomName,
+  avatarUrl,
   microphoneMuted,
   localVideoMuted,
   toggleLocalVideoMuted,
@@ -44,15 +65,18 @@ export function InCallView({
   toggleScreensharing,
   isScreensharing,
   screenshareFeeds,
-  simpleGrid,
-  setShowInspector,
-  showInspector,
   roomId,
+  unencryptedEventsFromUsers,
 }) {
   usePreventScroll();
   const [layout, setLayout] = useVideoGridLayout(screenshareFeeds.length > 0);
 
+  const [audioContext, audioDestination, audioRef] = useAudioContext();
   const { audioOutput } = useMediaHandler();
+  const [showInspector] = useShowInspector();
+
+  const { modalState: feedbackModalState, modalProps: feedbackModalProps } =
+    useModalTriggerState();
 
   const items = useMemo(() => {
     const participants = [];
@@ -89,23 +113,6 @@ export function InCallView({
     return participants;
   }, [userMediaFeeds, activeSpeaker, screenshareFeeds, layout]);
 
-  const onFocusTile = useCallback(
-    (tiles, focusedTile) => {
-      if (layout === "freedom") {
-        return tiles.map((tile) => {
-          if (tile === focusedTile) {
-            return { ...tile, focused: !tile.focused };
-          }
-
-          return tile;
-        });
-      } else {
-        return tiles;
-      }
-    },
-    [layout, setLayout]
-  );
-
   const renderAvatar = useCallback(
     (roomMember, width, height) => {
       const avatarUrl = roomMember.user?.avatarUrl;
@@ -114,13 +121,8 @@ export function InCallView({
       return (
         <Avatar
           key={roomMember.userId}
-          style={{
-            width: size,
-            height: size,
-            borderRadius: size,
-            fontSize: Math.round(size / 2),
-          }}
-          src={avatarUrl && getAvatarUrl(client, avatarUrl, 96)}
+          size={size}
+          src={avatarUrl}
           fallback={roomMember.name.slice(0, 1).toUpperCase()}
           className={styles.avatar}
         />
@@ -136,9 +138,14 @@ export function InCallView({
 
   return (
     <div className={styles.inRoom}>
+      <audio ref={audioRef} />
       <Header>
         <LeftNav>
-          <RoomHeaderInfo roomName={roomName} />
+          <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
+          <VersionMismatchWarning
+            users={unencryptedEventsFromUsers}
+            room={groupCall.room}
+          />
         </LeftNav>
         <RightNav>
           <GridLayoutMenu layout={layout} setLayout={setLayout} />
@@ -149,15 +156,8 @@ export function InCallView({
         <div className={styles.centerMessage}>
           <p>Waiting for other participants...</p>
         </div>
-      ) : simpleGrid ? (
-        <SimpleVideoGrid items={items} />
       ) : (
-        <VideoGrid
-          items={items}
-          layout={layout}
-          onFocusTile={onFocusTile}
-          disableAnimations={isSafari}
-        >
+        <VideoGrid items={items} layout={layout} disableAnimations={isSafari}>
           {({ item, ...rest }) => (
             <VideoTileContainer
               key={item.id}
@@ -165,6 +165,8 @@ export function InCallView({
               getAvatar={renderAvatar}
               showName={items.length > 2 || item.focused}
               audioOutputDevice={audioOutput}
+              audioContext={audioContext}
+              audioDestination={audioDestination}
               disableSpeakingIndicator={items.length < 3}
               {...rest}
             />
@@ -183,10 +185,11 @@ export function InCallView({
         <OverflowMenu
           inCall
           roomId={roomId}
-          setShowInspector={setShowInspector}
-          showInspector={showInspector}
           client={client}
           groupCall={groupCall}
+          showInvite={true}
+          feedbackModalState={feedbackModalState}
+          feedbackModalProps={feedbackModalProps}
         />
         <HangupButton onPress={onLeave} />
       </div>

src/room/InviteModal.jsx

@@ -1,3 +1,19 @@
+/*
+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 from "react";
 import { Modal, ModalContent } from "../Modal";
 import { CopyButton } from "../button";

src/room/LobbyView.jsx

@@ -1,24 +1,38 @@
+/*
+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, { useEffect, useRef } from "react";
 import styles from "./LobbyView.module.css";
-import { Button, CopyButton, MicButton, VideoButton } from "../button";
+import { Button, CopyButton } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
-import { useCallFeed } from "matrix-react-sdk/src/hooks/useCallFeed";
-import { useMediaStream } from "matrix-react-sdk/src/hooks/useMediaStream";
+import { useCallFeed } from "../video-grid/useCallFeed";
 import { getRoomUrl } from "../matrix-utils";
-import { OverflowMenu } from "./OverflowMenu";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { Body, Link } from "../typography/Typography";
-import { Avatar } from "../Avatar";
-import { useProfile } from "../profile/useProfile";
-import useMeasure from "react-use-measure";
-import { ResizeObserver } from "@juggle/resize-observer";
 import { useLocationNavigation } from "../useLocationNavigation";
 import { useMediaHandler } from "../settings/useMediaHandler";
+import { VideoPreview } from "./VideoPreview";
+import { AudioPreview } from "./AudioPreview";
 
 export function LobbyView({
   client,
+  groupCall,
   roomName,
+  avatarUrl,
   state,
   onInitLocalCallFeed,
   onEnter,
@@ -27,16 +41,18 @@ export function LobbyView({
   localVideoMuted,
   toggleLocalVideoMuted,
   toggleMicrophoneMuted,
-  setShowInspector,
-  showInspector,
   roomId,
+  isEmbedded,
 }) {
   const { stream } = useCallFeed(localCallFeed);
-  const { audioOutput } = useMediaHandler();
-  const videoRef = useMediaStream(stream, audioOutput, true);
-  const { displayName, avatarUrl } = useProfile(client);
-  const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
-  const avatarSize = (previewBounds.height - 66) / 2;
+  const {
+    audioInput,
+    audioInputs,
+    setAudioInput,
+    audioOutput,
+    audioOutputs,
+    setAudioOutput,
+  } = useMediaHandler();
 
   useEffect(() => {
     onInitLocalCallFeed();
@@ -56,7 +72,7 @@ export function LobbyView({
     <div className={styles.room}>
       <Header>
         <LeftNav>
-          <RoomHeaderInfo roomName={roomName} />
+          <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
         </LeftNav>
         <RightNav>
           <UserMenuContainer />
@@ -64,53 +80,30 @@ export function LobbyView({
       </Header>
       <div className={styles.joinRoom}>
         <div className={styles.joinRoomContent}>
-          <div className={styles.preview} ref={previewRef}>
-            <video ref={videoRef} muted playsInline disablePictureInPicture />
-            {state === GroupCallState.LocalCallFeedUninitialized && (
-              <Body fontWeight="semiBold" className={styles.webcamPermissions}>
-                Webcam/microphone permissions needed to join the call.
-              </Body>
-            )}
-            {state === GroupCallState.InitializingLocalCallFeed && (
-              <Body fontWeight="semiBold" className={styles.webcamPermissions}>
-                Accept webcam/microphone permissions to join the call.
-              </Body>
-            )}
-            {state === GroupCallState.LocalCallFeedInitialized && (
-              <>
-                {localVideoMuted && (
-                  <div className={styles.avatarContainer}>
-                    <Avatar
-                      style={{
-                        width: avatarSize,
-                        height: avatarSize,
-                        borderRadius: avatarSize,
-                        fontSize: Math.round(avatarSize / 2),
-                      }}
-                      src={avatarUrl}
-                      fallback={displayName.slice(0, 1).toUpperCase()}
-                    />
-                  </div>
-                )}
-                <div className={styles.previewButtons}>
-                  <MicButton
-                    muted={microphoneMuted}
-                    onPress={toggleMicrophoneMuted}
-                  />
-                  <VideoButton
-                    muted={localVideoMuted}
-                    onPress={toggleLocalVideoMuted}
-                  />
-                  <OverflowMenu
-                    roomId={roomId}
-                    setShowInspector={setShowInspector}
-                    showInspector={showInspector}
-                    client={client}
-                  />
-                </div>
-              </>
-            )}
-          </div>
+          {groupCall.isPtt ? (
+            <AudioPreview
+              roomName={roomName}
+              state={state}
+              audioInput={audioInput}
+              audioInputs={audioInputs}
+              setAudioInput={setAudioInput}
+              audioOutput={audioOutput}
+              audioOutputs={audioOutputs}
+              setAudioOutput={setAudioOutput}
+            />
+          ) : (
+            <VideoPreview
+              state={state}
+              client={client}
+              roomId={roomId}
+              microphoneMuted={microphoneMuted}
+              localVideoMuted={localVideoMuted}
+              toggleLocalVideoMuted={toggleLocalVideoMuted}
+              toggleMicrophoneMuted={toggleMicrophoneMuted}
+              stream={stream}
+              audioOutput={audioOutput}
+            />
+          )}
           <Button
             ref={joinCallButtonRef}
             className={styles.copyButton}
@@ -130,11 +123,13 @@ export function LobbyView({
             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/LobbyView.module.css

@@ -46,58 +46,6 @@ limitations under the License.
   margin-top: 50px;
 }
 
-.preview {
-  position: relative;
-  min-height: 280px;
-  height: 50vh;
-  border-radius: 24px;
-  overflow: hidden;
-  background-color: var(--bgColor3);
-  margin: 20px;
-}
-
-.preview video {
-  width: calc(100% + 1px);
-  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);
-}
-
-.avatarContainer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 66px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--bgColor3);
-}
-
-.webcamPermissions {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  margin: 0;
-  text-align: center;
-}
-
-.previewButtons {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 66px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(23, 25, 28, 0.9);
-}
-
 .joinCallButton {
   position: absolute;
   width: 100%;
@@ -118,17 +66,3 @@ limitations under the License.
 .copyButton:last-child {
   margin-bottom: 0;
 }
-
-.previewButtons > * {
-  margin-right: 30px;
-}
-
-.previewButtons > :last-child {
-  margin-right: 0px;
-}
-
-@media (min-width: 800px) {
-  .preview {
-    margin-top: 40px;
-  }
-}