Merge pull request #310 from vector-im/ptt

Add feature-flagged support for Radio/PTT Mode
Merge remote-tracking branch 'origin/main' into ptt
2022-05-04 11:40:26 +01:00 · 2022-05-04 11:37:52 +01:00 · 2022-05-04 11:35:33 +01:00 · 2022-05-04 11:35:15 +01:00 · 2022-05-04 11:35:15 +01:00 · 2022-05-04 11:34:28 +01:00
60 changed files with 4255 additions and 1383 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,35 @@
+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: {
+        // We break this rule in a few places: dial it back to a warning
+        // (and run with max warnings) to tolerate the existing code
+        "react-hooks/exhaustive-deps": ["warn"],
+    },
+    overrides: [
+        {
+            files: [
+                "src/**/*.{ts,tsx}",
+            ],
+        },
+    ],
+    settings: {
+        react: {
+            version: "detect",
+        },
+    },
+};
--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@@ -0,0 +1,20 @@
+name: Lint and format
+on:
+  pull_request: {}
+jobs:
+  prettier:
+    name: Lint and format
+    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"
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@ node_modules
 .DS_Store
 dist
 dist-ssr
-*.local
+*.local
+.idea/
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+node_modules
+dist
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1 @@
+{}
--- a/.storybook/main.js
+++ b/.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;
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,4 +2,4 @@
  "editor.formatOnSave": true,
  "editor.insertSpaces": true,
  "editor.tabSize": 2
-}
+}
--- a/6
+++ b/6
@@ -2,13 +2,13 @@ FROM 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 --from=builder /src/element-call/dist /app
 COPY scripts/default.conf /etc/nginx/conf.d/

 USER root
--- a/README.md
+++ b/README.md
@@ -1,10 +1,12 @@
-# Matrix Video Chat
+# Element Call

-Testbed for full mesh video chat.
+Showcase for full mesh video chat powered by Matrix, implementing [MSC3401](https://github.com/matrix-org/matrix-spec-proposals/blob/matthew/group-voip/proposals/3401-group-voip.md).
+
+Discussion in [#webrtc:matrix.org: ![#webrtc:matrix.org](https://img.shields.io/matrix/webrtc:matrix.org)](https://matrix.to/#/#webrtc:matrix.org)

 ## Getting Started

-`matrix-video-chat` 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`

@@ -16,30 +18,36 @@ 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.

 ```
-git clone https://github.com/vector-im/matrix-video-chat.git
-cd matrix-video-chat
+git clone https://github.com/vector-im/element-call.git
+cd element-call
 yarn
 yarn link matrix-js-sdk
-yarn link matrix-react-sdk
 yarn dev
 ```

 ## Config

 Configuration options are documented in the `.env` file.
+
+## License
+
+All files in this project are:
+
+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.
--- a/package.json
+++ b/package.json
@@ -5,7 +5,10 @@
    "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": "eslint --max-warnings 11 src"
  },
  "dependencies": {
    "@juggle/resize-observer": "^3.3.1",
@@ -18,6 +21,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,11 +29,12 @@
    "@react-stately/tree": "^3.2.0",
    "@sentry/react": "^6.13.3",
    "@sentry/tracing": "^6.13.3",
+    "@use-gesture/react": "^10.2.11",
    "classnames": "^2.3.1",
    "color-hash": "^2.0.1",
    "events": "^3.3.0",
+    "lodash-move": "^1.1.1",
    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#robertlong/group-call",
-    "matrix-react-sdk": "github:matrix-org/matrix-react-sdk#robertlong/group-call",
    "mermaid": "^8.13.8",
    "normalize.css": "^8.0.1",
    "pako": "^2.0.4",
@@ -48,6 +53,13 @@
    "@babel/core": "^7.16.5",
    "@storybook/react": "^6.5.0-alpha.5",
    "babel-loader": "^8.2.3",
+    "eslint": "^8.14.0",
+    "eslint-config-prettier": "^8.5.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",
    "vite": "^2.4.2",
--- a/scripts/dockerbuild.sh
+++ b/scripts/dockerbuild.sh
@@ -5,6 +5,7 @@ set -ex
 export VITE_DEFAULT_HOMESERVER=https://call.ems.host
 export VITE_SENTRY_DSN=https://b1e328d49be3402ba96101338989fb35@sentry.matrix.org/41
 export VITE_RAGESHAKE_SUBMIT_URL=https://element.io/bugreports/submit
+export VITE_PRODUCT_NAME="Element Call"

 git clone https://github.com/matrix-org/matrix-js-sdk.git
 cd matrix-js-sdk
@@ -12,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
--- a/src/Facepile.jsx
+++ b/src/Facepile.jsx
@@ -4,35 +4,63 @@ import classNames from "classnames";
 import { Avatar } from "./Avatar";
 import { getAvatarUrl } from "./matrix-utils";

-export function Facepile({ className, client, participants, ...rest }) {
+const overlapMap = {
+  xs: 2,
+  sm: 4,
+  md: 8,
+};
+
+const sizeMap = {
+  xs: 24,
+  sm: 32,
+  md: 36,
+};
+
+export function Facepile({
+  className,
+  client,
+  participants,
+  max,
+  size,
+  ...rest
+}) {
+  const _size = sizeMap[size];
+  const _overlap = overlapMap[size];
+
  return (
    <div
-      className={classNames(styles.facepile, className)}
+      className={classNames(styles.facepile, styles[size], className)}
      title={participants.map((member) => member.name).join(", ")}
+      style={{ width: participants.length * (_size - _overlap) + _overlap }}
      {...rest}
    >
-      {participants.slice(0, 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 && getAvatarUrl(client, avatarUrl, _size)}
            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",
+};
--- a/src/Facepile.module.css
+++ b/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);
 }
+
+.facepile.md .avatar {
+  border-width: 2px;
+}
--- a/src/button/Button.jsx
+++ b/src/button/Button.jsx
@@ -7,6 +7,8 @@ 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 { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
+import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
 import { useButton } from "@react-aria/button";
 import { mergeProps, useObjectRef } from "@react-aria/utils";
 import { TooltipTrigger } from "../Tooltip";
@@ -20,6 +22,7 @@ export const variantToClassName = {
  copy: [styles.copyButton],
  iconCopy: [styles.iconCopyButton],
  secondaryCopy: [styles.copyButton],
+  secondaryHangup: [styles.secondaryHangup],
 };

 export const sizeToClassName = {
@@ -126,3 +129,25 @@ export function HangupButton({ className, ...rest }) {
    </TooltipTrigger>
  );
 }
+
+export function SettingsButton({ className, ...rest }) {
+  return (
+    <TooltipTrigger>
+      <Button variant="toolbar" {...rest}>
+        <SettingsIcon />
+      </Button>
+      {() => "Settings"}
+    </TooltipTrigger>
+  );
+}
+
+export function InviteButton({ className, ...rest }) {
+  return (
+    <TooltipTrigger>
+      <Button variant="toolbar" {...rest}>
+        <AddUserIcon />
+      </Button>
+      {() => "Invite"}
+    </TooltipTrigger>
+  );
+}
--- a/src/button/Button.module.css
+++ b/src/button/Button.module.css
@@ -20,6 +20,7 @@ limitations under the License.
 .iconButton,
 .iconCopyButton,
 .secondary,
+.secondaryHangup,
 .copyButton {
  position: relative;
  display: flex;
@@ -34,6 +35,7 @@ limitations under the License.
 }

 .secondary,
+.secondaryHangup,
 .button,
 .copyButton {
  padding: 7px 15px;
@@ -53,6 +55,7 @@ limitations under the License.
 .iconButton:focus,
 .iconCopyButton:focus,
 .secondary:focus,
+.secondaryHangup:focus,
 .copyButton:focus {
  outline: auto;
 }
@@ -119,6 +122,12 @@ limitations under the License.
  background-color: transparent;
 }

+.secondaryHangup {
+  color: #ff5b55;
+  border: 2px solid #ff5b55;
+  background-color: transparent;
+}
+
 .copyButton.secondaryCopy {
  color: var(--textColor1);
  border-color: var(--textColor1);
--- a/src/home/RegisteredView.jsx
+++ b/src/home/RegisteredView.jsx
@@ -13,22 +13,25 @@ import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { useHistory } from "react-router-dom";
 import { Headline, Title } from "../typography/Typography";
 import { Form } from "../form/Form";
+import { useShouldShowPtt } from "../useShouldShowPtt";

 export function RegisteredView({ client }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState();
  const history = useHistory();
+  const shouldShowPtt = useShouldShowPtt();
  const onSubmit = useCallback(
    (e) => {
      e.preventDefault();
      const data = new FormData(e.target);
      const roomName = data.get("callName");
+      const ptt = data.get("ptt") !== null;

      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}`);
@@ -87,6 +90,7 @@ export function RegisteredView({ client }) {
                required
                autoComplete="off"
              />
+
              <Button
                type="submit"
                size="lg"
@@ -96,6 +100,16 @@ export function RegisteredView({ client }) {
                {loading ? "Loading..." : "Go"}
              </Button>
            </FieldRow>
+            {shouldShowPtt && (
+              <FieldRow className={styles.fieldRow}>
+                <InputField
+                  id="ptt"
+                  name="ptt"
+                  label="Push to Talk"
+                  type="checkbox"
+                />
+              </FieldRow>
+            )}
            {error && (
              <FieldRow className={styles.fieldRow}>
                <ErrorMessage>{error.message}</ErrorMessage>
--- a/src/home/RegisteredView.module.css
+++ b/src/home/RegisteredView.module.css
@@ -7,6 +7,10 @@
 }

 .fieldRow {
+  margin-bottom: 24px;
+}
+
+.fieldRow:last-child {
  margin-bottom: 0;
 }

--- a/src/home/UnauthenticatedView.jsx
+++ b/src/home/UnauthenticatedView.jsx
@@ -15,8 +15,10 @@ import { Form } from "../form/Form";
 import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
+import { useShouldShowPtt } from "../useShouldShowPtt";

 export function UnauthenticatedView() {
+  const shouldShowPtt = useShouldShowPtt();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState();
  const [{ privacyPolicyUrl, recaptchaKey }, register] =
@@ -28,6 +30,7 @@ export function UnauthenticatedView() {
      const data = new FormData(e.target);
      const roomName = data.get("callName");
      const displayName = data.get("displayName");
+      const ptt = data.get("ptt") !== null;

      async function submit() {
        setError(undefined);
@@ -41,7 +44,7 @@ export function UnauthenticatedView() {
          recaptchaResponse,
          true
        );
-        const roomIdOrAlias = await createRoom(client, roomName);
+        const roomIdOrAlias = await createRoom(client, roomName, ptt);

        if (roomIdOrAlias) {
          history.push(`/room/${roomIdOrAlias}`);
@@ -111,6 +114,16 @@ export function UnauthenticatedView() {
                autoComplete="off"
              />
            </FieldRow>
+            {shouldShowPtt && (
+              <FieldRow>
+                <InputField
+                  id="ptt"
+                  name="ptt"
+                  label="Push to Talk"
+                  type="checkbox"
+                />
+              </FieldRow>
+            )}
            <Caption>
              By clicking "Go", you agree to our{" "}
              <Link href={privacyPolicyUrl}>Terms and conditions</Link>
--- a/src/icons/MicMuted.svg
+++ b/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>
--- a/src/icons/VideoMuted.svg
+++ b/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>
--- a/src/input/Toggle.jsx
+++ b/src/input/Toggle.jsx
@@ -0,0 +1,41 @@
+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>
+  );
+}
--- a/src/input/Toggle.module.css
+++ b/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: #6f7882;
+  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: #15191e;
+  left: 2px;
+  top: 2px;
+}
+
+.label {
+  padding: 10px 8px;
+  line-height: 24px;
+  color: #6f7882;
+}
+
+.toggle.on .button {
+  background-color: #0dbd8b;
+}
+
+.toggle.on .ball {
+  left: 22px;
+}
+
+.toggle.on .label {
+  color: #ffffff;
+}
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -22,10 +22,10 @@ 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 { init as initRageshake } from "./settings/rageshake";
 import { InspectorContextProvider } from "./room/GroupCallInspector";

-rageshake.init();
+initRageshake();

 console.info(`matrix-video-chat ${import.meta.env.VITE_APP_VERSION || "dev"}`);

--- a/src/matrix-utils.js
+++ b/src/matrix-utils.js
@@ -76,7 +76,7 @@ export function isLocalRoomId(roomId) {
  return parts[1] === defaultHomeserverHost;
 }

-export async function createRoom(client, name) {
+export async function createRoom(client, name, isPtt = false) {
  const { room_id, room_alias } = await client.createRoom({
    visibility: "private",
    preset: "public_chat",
@@ -107,9 +107,12 @@ export async function createRoom(client, name) {
    },
  });

+  console.log({ isPtt });
+
  await client.createGroupCall(
    room_id,
-    GroupCallType.Video,
+    isPtt ? GroupCallType.Voice : GroupCallType.Video,
+    isPtt,
    GroupCallIntent.Prompt
  );

--- a/src/room/AudioPreview.jsx
+++ b/src/room/AudioPreview.jsx
@@ -0,0 +1,61 @@
+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} - Radio 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 }) => (
+                <Item key={deviceId}>{label}</Item>
+              ))}
+            </SelectInput>
+            {audioOutputs.length > 0 && (
+              <SelectInput
+                label="Speaker"
+                selectedKey={audioOutput}
+                onSelectionChange={setAudioOutput}
+                className={styles.inputField}
+              >
+                {audioOutputs.map(({ deviceId, label }) => (
+                  <Item key={deviceId}>{label}</Item>
+                ))}
+              </SelectInput>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+}
--- a/src/room/AudioPreview.module.css
+++ b/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;
+  }
+}
--- a/src/room/FeedbackModal.jsx
+++ b/src/room/FeedbackModal.jsx
@@ -2,7 +2,10 @@ 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";

--- a/src/room/GroupCallView.jsx
+++ b/src/room/GroupCallView.jsx
@@ -1,10 +1,11 @@
 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 { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 import { useLocationNavigation } from "../useLocationNavigation";
@@ -14,7 +15,6 @@ export function GroupCallView({
  isPasswordlessUser,
  roomId,
  groupCall,
-  simpleGrid,
 }) {
  const [showInspector, setShowInspector] = useState(
    () => !!localStorage.getItem("matrix-group-call-inspector")
@@ -48,6 +48,7 @@ export function GroupCallView({
    localScreenshareFeed,
    screenshareFeeds,
    hasLocalParticipant,
+    participants,
  } = useGroupCall(groupCall);

  useEffect(() => {
@@ -73,28 +74,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}
+          groupCall={groupCall}
+          participants={participants}
+          userMediaFeeds={userMediaFeeds}
+          onLeave={onLeave}
+          setShowInspector={onChangeShowInspector}
+          showInspector={showInspector}
+        />
+      );
+    } else {
+      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}
+          setShowInspector={onChangeShowInspector}
+          showInspector={showInspector}
+          roomId={roomId}
+        />
+      );
+    }
  } else if (state === GroupCallState.Entering) {
    return (
      <FullScreenView>
@@ -107,6 +123,7 @@ export function GroupCallView({
    return (
      <LobbyView
        client={client}
+        groupCall={groupCall}
        hasLocalParticipant={hasLocalParticipant}
        roomName={groupCall.room.name}
        state={state}
--- a/src/room/InCallView.jsx
+++ b/src/room/InCallView.jsx
@@ -7,19 +7,15 @@ import {
  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 { VideoGrid, useVideoGridLayout } from "../video-grid/VideoGrid";
+import { VideoTileContainer } from "../video-grid/VideoTileContainer";
 import { getAvatarUrl } from "../matrix-utils";
 import { GroupCallInspector } from "./GroupCallInspector";
 import { OverflowMenu } from "./OverflowMenu";
 import { GridLayoutMenu } from "./GridLayoutMenu";
 import { Avatar } from "../Avatar";
 import { UserMenuContainer } from "../UserMenuContainer";
-import { useRageshakeRequestModal } from "../settings/rageshake";
+import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
 import { usePreventScroll } from "@react-aria/overlays";
 import { useMediaHandler } from "../settings/useMediaHandler";
@@ -44,7 +40,6 @@ export function InCallView({
  toggleScreensharing,
  isScreensharing,
  screenshareFeeds,
-  simpleGrid,
  setShowInspector,
  showInspector,
  roomId,
@@ -149,8 +144,6 @@ export function InCallView({
        <div className={styles.centerMessage}>
          <p>Waiting for other participants...</p>
        </div>
-      ) : simpleGrid ? (
-        <SimpleVideoGrid items={items} />
      ) : (
        <VideoGrid
          items={items}
--- a/src/room/LobbyView.jsx
+++ b/src/room/LobbyView.jsx
@@ -1,23 +1,20 @@
 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,
  state,
  onInitLocalCallFeed,
@@ -32,11 +29,14 @@ export function LobbyView({
  roomId,
 }) {
  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();
@@ -64,53 +64,31 @@ 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}
+              microphoneMuted={microphoneMuted}
+              localVideoMuted={localVideoMuted}
+              toggleLocalVideoMuted={toggleLocalVideoMuted}
+              toggleMicrophoneMuted={toggleMicrophoneMuted}
+              setShowInspector={setShowInspector}
+              showInspector={showInspector}
+              stream={stream}
+              audioOutput={audioOutput}
+            />
+          )}
          <Button
            ref={joinCallButtonRef}
            className={styles.copyButton}
--- a/src/room/LobbyView.module.css
+++ b/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;
-  }
-}
--- a/src/room/PTTButton.jsx
+++ b/src/room/PTTButton.jsx
@@ -0,0 +1,48 @@
+import React from "react";
+import classNames from "classnames";
+import styles from "./PTTButton.module.css";
+import { ReactComponent as MicIcon } from "../icons/Mic.svg";
+import { Avatar } from "../Avatar";
+
+export function PTTButton({
+  showTalkOverError,
+  activeSpeakerUserId,
+  activeSpeakerDisplayName,
+  activeSpeakerAvatarUrl,
+  activeSpeakerIsLocalUser,
+  size,
+  startTalking,
+  stopTalking,
+}) {
+  return (
+    <button
+      className={classNames(styles.pttButton, {
+        [styles.talking]: activeSpeakerUserId,
+        [styles.error]: showTalkOverError,
+      })}
+      onMouseDown={startTalking}
+      onMouseUp={stopTalking}
+    >
+      {activeSpeakerIsLocalUser || !activeSpeakerUserId ? (
+        <MicIcon
+          className={styles.micIcon}
+          width={size / 3}
+          height={size / 3}
+        />
+      ) : (
+        <Avatar
+          key={activeSpeakerUserId}
+          style={{
+            width: size - 12,
+            height: size - 12,
+            borderRadius: size - 12,
+            fontSize: Math.round((size - 12) / 2),
+          }}
+          src={activeSpeakerAvatarUrl}
+          fallback={activeSpeakerDisplayName.slice(0, 1).toUpperCase()}
+          className={styles.avatar}
+        />
+      )}
+    </button>
+  );
+}
--- a/src/room/PTTButton.module.css
+++ b/src/room/PTTButton.module.css
@@ -0,0 +1,25 @@
+.pttButton {
+  width: 100vw;
+  height: 100vh;
+  max-height: 232px;
+  max-width: 232px;
+  border-radius: 116px;
+  color: ##fff;
+  border: 6px solid #0dbd8b;
+  background-color: #21262c;
+  position: relative;
+  padding: 0;
+}
+
+.talking {
+  background-color: #0dbd8b;
+  box-shadow: 0px 0px 0px 17px rgba(13, 189, 139, 0.2),
+    0px 0px 0px 34px rgba(13, 189, 139, 0.2);
+}
+
+.error {
+  background-color: #ff5b55;
+  border-color: #ff5b55;
+  box-shadow: 0px 0px 0px 17px rgba(255, 91, 85, 0.2),
+    0px 0px 0px 34px rgba(255, 91, 85, 0.2);
+}
--- a/src/room/PTTCallView.jsx
+++ b/src/room/PTTCallView.jsx
@@ -0,0 +1,164 @@
+import React from "react";
+import { useModalTriggerState } from "../Modal";
+import { SettingsModal } from "../settings/SettingsModal";
+import { InviteModal } from "./InviteModal";
+import { HangupButton, InviteButton, SettingsButton } from "../button";
+import { Header, LeftNav, RightNav, RoomSetupHeaderInfo } from "../Header";
+import styles from "./PTTCallView.module.css";
+import { Facepile } from "../Facepile";
+import { PTTButton } from "./PTTButton";
+import { PTTFeed } from "./PTTFeed";
+import { useMediaHandler } from "../settings/useMediaHandler";
+import useMeasure from "react-use-measure";
+import { ResizeObserver } from "@juggle/resize-observer";
+import { usePTT } from "./usePTT";
+import { Timer } from "./Timer";
+import { Toggle } from "../input/Toggle";
+import { getAvatarUrl } from "../matrix-utils";
+import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
+
+export function PTTCallView({
+  client,
+  roomId,
+  roomName,
+  groupCall,
+  participants,
+  userMediaFeeds,
+  onLeave,
+  setShowInspector,
+  showInspector,
+}) {
+  const { modalState: inviteModalState, modalProps: inviteModalProps } =
+    useModalTriggerState();
+  const { modalState: settingsModalState, modalProps: settingsModalProps } =
+    useModalTriggerState();
+  const [containerRef, bounds] = useMeasure({ polyfill: ResizeObserver });
+  const facepileSize = bounds.width < 800 ? "sm" : "md";
+  const pttButtonSize = 232;
+  const pttBorderWidth = 6;
+
+  const { audioOutput } = useMediaHandler();
+
+  const {
+    pttButtonHeld,
+    isAdmin,
+    talkOverEnabled,
+    setTalkOverEnabled,
+    activeSpeakerUserId,
+    startTalking,
+    stopTalking,
+  } = usePTT(client, groupCall, userMediaFeeds);
+
+  const activeSpeakerIsLocalUser =
+    activeSpeakerUserId && client.getUserId() === activeSpeakerUserId;
+  const showTalkOverError =
+    pttButtonHeld && !activeSpeakerIsLocalUser && !talkOverEnabled;
+  const activeSpeakerUser = activeSpeakerUserId
+    ? client.getUser(activeSpeakerUserId)
+    : null;
+  const activeSpeakerAvatarUrl = activeSpeakerUser
+    ? getAvatarUrl(
+        client,
+        activeSpeakerUser.avatarUrl,
+        pttButtonSize - pttBorderWidth * 2
+      )
+    : null;
+  const activeSpeakerDisplayName = activeSpeakerUser
+    ? activeSpeakerUser.displayName
+    : "";
+
+  return (
+    <div className={styles.pttCallView} ref={containerRef}>
+      <Header className={styles.header}>
+        <LeftNav>
+          <RoomSetupHeaderInfo roomName={roomName} onPress={onLeave} />
+        </LeftNav>
+        <RightNav />
+      </Header>
+      <div className={styles.center}>
+        <div className={styles.participants}>
+          <p>{`${participants.length} ${
+            participants.length > 1 ? "people" : "person"
+          } connected`}</p>
+          <Facepile
+            size={facepileSize}
+            max={8}
+            className={styles.facepile}
+            client={client}
+            participants={participants}
+          />
+        </div>
+        <div className={styles.footer}>
+          <SettingsButton onPress={() => settingsModalState.open()} />
+          <HangupButton onPress={onLeave} />
+          <InviteButton onPress={() => inviteModalState.open()} />
+        </div>
+
+        <div className={styles.pttButtonContainer}>
+          {activeSpeakerUserId ? (
+            <div className={styles.talkingInfo}>
+              <h2>
+                {!activeSpeakerIsLocalUser && (
+                  <AudioIcon className={styles.speakerIcon} />
+                )}
+                {activeSpeakerIsLocalUser
+                  ? "Talking..."
+                  : `${activeSpeakerDisplayName} is talking...`}
+              </h2>
+              <Timer value={activeSpeakerUserId} />
+            </div>
+          ) : (
+            <div className={styles.talkingInfo} />
+          )}
+          <PTTButton
+            showTalkOverError={showTalkOverError}
+            activeSpeakerUserId={activeSpeakerUserId}
+            activeSpeakerDisplayName={activeSpeakerDisplayName}
+            activeSpeakerAvatarUrl={activeSpeakerAvatarUrl}
+            activeSpeakerIsLocalUser={activeSpeakerIsLocalUser}
+            size={pttButtonSize}
+            startTalking={startTalking}
+            stopTalking={stopTalking}
+          />
+          <p className={styles.actionTip}>
+            {showTalkOverError
+              ? "You can't talk at the same time"
+              : pttButtonHeld
+              ? "Release spacebar key to stop"
+              : talkOverEnabled &&
+                activeSpeakerUserId &&
+                !activeSpeakerIsLocalUser
+              ? `Press and hold spacebar to talk over ${activeSpeakerDisplayName}`
+              : "Press and hold spacebar to talk"}
+          </p>
+          {userMediaFeeds.map((callFeed) => (
+            <PTTFeed
+              key={callFeed.userId}
+              callFeed={callFeed}
+              audioOutputDevice={audioOutput}
+            />
+          ))}
+          {isAdmin && (
+            <Toggle
+              isSelected={talkOverEnabled}
+              onChange={setTalkOverEnabled}
+              label="Talk over speaker"
+              id="talkOverEnabled"
+            />
+          )}
+        </div>
+      </div>
+
+      {settingsModalState.isOpen && (
+        <SettingsModal
+          {...settingsModalProps}
+          setShowInspector={setShowInspector}
+          showInspector={showInspector}
+        />
+      )}
+      {inviteModalState.isOpen && (
+        <InviteModal roomId={roomId} {...inviteModalProps} />
+      )}
+    </div>
+  );
+}
--- a/src/room/PTTCallView.module.css
+++ b/src/room/PTTCallView.module.css
@@ -0,0 +1,106 @@
+.pttCallView {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  min-height: 100%;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+}
+
+.center {
+  width: 100%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+}
+
+.participants {
+  display: flex;
+  flex-direction: column;
+  margin: 20px;
+}
+
+.participants > p {
+  color: #a9b2bc;
+  margin-bottom: 8px;
+}
+
+.facepile {
+  align-self: center;
+}
+
+.talkingInfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
+  height: 88px;
+}
+
+.speakerIcon {
+  margin-right: 8px;
+}
+
+.pttButtonContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  justify-content: center;
+}
+
+.actionTip {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 17px;
+}
+
+.footer {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  height: 64px;
+  margin-bottom: 20px;
+}
+
+.footer > * {
+  margin-right: 30px;
+}
+
+.footer > :last-child {
+  margin-right: 0px;
+}
+
+@media (min-width: 800px) {
+  .participants {
+    margin-bottom: 67px;
+  }
+
+  .talkingInfo {
+    margin-bottom: 38px;
+  }
+
+  .center {
+    margin-top: 48px;
+  }
+
+  .actionTip {
+    margin-top: 42px;
+    margin-bottom: 45px;
+  }
+
+  .pttButtonContainer {
+    flex: 0;
+    margin-bottom: 0;
+    justify-content: flex-start;
+  }
+
+  .footer {
+    flex: auto;
+    order: 4;
+  }
+}
--- a/src/room/PTTFeed.jsx
+++ b/src/room/PTTFeed.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { useCallFeed } from "../video-grid/useCallFeed";
+import { useMediaStream } from "../video-grid/useMediaStream";
+import styles from "./PTTFeed.module.css";
+
+export function PTTFeed({ callFeed, audioOutputDevice }) {
+  const { isLocal, stream } = useCallFeed(callFeed);
+  const mediaRef = useMediaStream(stream, audioOutputDevice, isLocal);
+  return <audio ref={mediaRef} className={styles.audioFeed} playsInline />;
+}
--- a/src/room/PTTFeed.module.css
+++ b/src/room/PTTFeed.module.css
@@ -0,0 +1,3 @@
+.audioFeed {
+  display: none;
+}
--- a/src/room/RageshakeRequestModal.jsx
+++ b/src/room/RageshakeRequestModal.jsx
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { Modal, ModalContent } from "../Modal";
 import { Button } from "../button";
 import { FieldRow, ErrorMessage } from "../input/Input";
-import { useSubmitRageshake } from "../settings/rageshake";
+import { useSubmitRageshake } from "../settings/submit-rageshake";
 import { Body } from "../typography/Typography";

 export function RageshakeRequestModal({ rageshakeRequestId, roomId, ...rest }) {
--- a/src/room/RoomPage.jsx
+++ b/src/room/RoomPage.jsx
@@ -29,9 +29,9 @@ export function RoomPage() {

  const { roomId: maybeRoomId } = useParams();
  const { hash, search } = useLocation();
-  const [simpleGrid, viaServers] = useMemo(() => {
+  const [viaServers] = useMemo(() => {
    const params = new URLSearchParams(search);
-    return [params.has("simple"), params.getAll("via")];
+    return [params.getAll("via")];
  }, [search]);
  const roomId = (maybeRoomId || hash || "").toLowerCase();

@@ -56,7 +56,6 @@ export function RoomPage() {
            roomId={roomId}
            groupCall={groupCall}
            isPasswordlessUser={isPasswordlessUser}
-            simpleGrid={simpleGrid}
          />
        )}
      </GroupCallLoader>
--- a/src/room/Timer.jsx
+++ b/src/room/Timer.jsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react";
+
+function leftPad(value) {
+  return value < 10 ? "0" + value : value;
+}
+
+function formatTime(msElapsed) {
+  const secondsElapsed = msElapsed / 1000;
+  const hours = Math.floor(secondsElapsed / 3600);
+  const minutes = Math.floor(secondsElapsed / 60) - hours * 60;
+  const seconds = Math.floor(secondsElapsed - hours * 3600 - minutes * 60);
+  return `${leftPad(hours)}:${leftPad(minutes)}:${leftPad(seconds)}`;
+}
+
+export function Timer({ value }) {
+  const [timestamp, setTimestamp] = useState();
+
+  useEffect(() => {
+    const startTimeMs = performance.now();
+
+    let animationFrame;
+
+    function onUpdate(curTimeMs) {
+      const msElapsed = curTimeMs - startTimeMs;
+      setTimestamp(formatTime(msElapsed));
+      animationFrame = requestAnimationFrame(onUpdate);
+    }
+
+    onUpdate(startTimeMs);
+
+    return () => {
+      cancelAnimationFrame(animationFrame);
+    };
+  }, [value]);
+
+  return <p>{timestamp}</p>;
+}
--- a/src/room/VideoPreview.jsx
+++ b/src/room/VideoPreview.jsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { MicButton, VideoButton } from "../button";
+import { useMediaStream } from "../video-grid/useMediaStream";
+import { OverflowMenu } from "./OverflowMenu";
+import { Avatar } from "../Avatar";
+import { useProfile } from "../profile/useProfile";
+import useMeasure from "react-use-measure";
+import { ResizeObserver } from "@juggle/resize-observer";
+import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
+import styles from "./VideoPreview.module.css";
+import { Body } from "../typography/Typography";
+
+export function VideoPreview({
+  client,
+  state,
+  roomId,
+  microphoneMuted,
+  localVideoMuted,
+  toggleLocalVideoMuted,
+  toggleMicrophoneMuted,
+  setShowInspector,
+  showInspector,
+  audioOutput,
+  stream,
+}) {
+  const videoRef = useMediaStream(stream, audioOutput, true);
+  const { displayName, avatarUrl } = useProfile(client);
+  const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
+  const avatarSize = (previewBounds.height - 66) / 2;
+
+  return (
+    <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>
+  );
+}
--- a/src/room/VideoPreview.module.css
+++ b/src/room/VideoPreview.module.css
@@ -0,0 +1,65 @@
+.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);
+}
+
+.previewButtons > * {
+  margin-right: 30px;
+}
+
+.previewButtons > :last-child {
+  margin-right: 0px;
+}
+
+@media (min-width: 800px) {
+  .preview {
+    margin-top: 40px;
+  }
+}
--- a/src/room/useGroupCall.js
+++ b/src/room/useGroupCall.js
@@ -0,0 +1,252 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  GroupCallEvent,
+  GroupCallState,
+} from "matrix-js-sdk/src/webrtc/groupCall";
+import { usePageUnload } from "./usePageUnload";
+
+export function useGroupCall(groupCall) {
+  const [
+    {
+      state,
+      calls,
+      localCallFeed,
+      activeSpeaker,
+      userMediaFeeds,
+      error,
+      microphoneMuted,
+      localVideoMuted,
+      isScreensharing,
+      screenshareFeeds,
+      localScreenshareFeed,
+      localDesktopCapturerSourceId,
+      participants,
+      hasLocalParticipant,
+      requestingScreenshare,
+    },
+    setState,
+  ] = useState({
+    state: GroupCallState.LocalCallFeedUninitialized,
+    calls: [],
+    userMediaFeeds: [],
+    microphoneMuted: false,
+    localVideoMuted: false,
+    screenshareFeeds: [],
+    isScreensharing: false,
+    requestingScreenshare: false,
+    participants: [],
+    hasLocalParticipant: false,
+  });
+
+  const updateState = (state) =>
+    setState((prevState) => ({ ...prevState, ...state }));
+
+  useEffect(() => {
+    function onGroupCallStateChanged() {
+      updateState({
+        state: groupCall.state,
+        calls: [...groupCall.calls],
+        localCallFeed: groupCall.localCallFeed,
+        activeSpeaker: groupCall.activeSpeaker,
+        userMediaFeeds: [...groupCall.userMediaFeeds],
+        microphoneMuted: groupCall.isMicrophoneMuted(),
+        localVideoMuted: groupCall.isLocalVideoMuted(),
+        isScreensharing: groupCall.isScreensharing(),
+        localScreenshareFeed: groupCall.localScreenshareFeed,
+        localDesktopCapturerSourceId: groupCall.localDesktopCapturerSourceId,
+        screenshareFeeds: [...groupCall.screenshareFeeds],
+        participants: [...groupCall.participants],
+      });
+    }
+
+    function onUserMediaFeedsChanged(userMediaFeeds) {
+      updateState({
+        userMediaFeeds: [...userMediaFeeds],
+      });
+    }
+
+    function onScreenshareFeedsChanged(screenshareFeeds) {
+      updateState({
+        screenshareFeeds: [...screenshareFeeds],
+      });
+    }
+
+    function onActiveSpeakerChanged(activeSpeaker) {
+      updateState({
+        activeSpeaker: activeSpeaker,
+      });
+    }
+
+    function onLocalMuteStateChanged(microphoneMuted, localVideoMuted) {
+      updateState({
+        microphoneMuted,
+        localVideoMuted,
+      });
+    }
+
+    function onLocalScreenshareStateChanged(
+      isScreensharing,
+      localScreenshareFeed,
+      localDesktopCapturerSourceId
+    ) {
+      updateState({
+        isScreensharing,
+        localScreenshareFeed,
+        localDesktopCapturerSourceId,
+      });
+    }
+
+    function onCallsChanged(calls) {
+      updateState({
+        calls: [...calls],
+      });
+    }
+
+    function onParticipantsChanged(participants) {
+      updateState({
+        participants: [...participants],
+        hasLocalParticipant: groupCall.hasLocalParticipant(),
+      });
+    }
+
+    groupCall.on(GroupCallEvent.GroupCallStateChanged, onGroupCallStateChanged);
+    groupCall.on(GroupCallEvent.UserMediaFeedsChanged, onUserMediaFeedsChanged);
+    groupCall.on(
+      GroupCallEvent.ScreenshareFeedsChanged,
+      onScreenshareFeedsChanged
+    );
+    groupCall.on(GroupCallEvent.ActiveSpeakerChanged, onActiveSpeakerChanged);
+    groupCall.on(GroupCallEvent.LocalMuteStateChanged, onLocalMuteStateChanged);
+    groupCall.on(
+      GroupCallEvent.LocalScreenshareStateChanged,
+      onLocalScreenshareStateChanged
+    );
+    groupCall.on(GroupCallEvent.CallsChanged, onCallsChanged);
+    groupCall.on(GroupCallEvent.ParticipantsChanged, onParticipantsChanged);
+
+    updateState({
+      error: null,
+      state: groupCall.state,
+      calls: [...groupCall.calls],
+      localCallFeed: groupCall.localCallFeed,
+      activeSpeaker: groupCall.activeSpeaker,
+      userMediaFeeds: [...groupCall.userMediaFeeds],
+      microphoneMuted: groupCall.isMicrophoneMuted(),
+      localVideoMuted: groupCall.isLocalVideoMuted(),
+      isScreensharing: groupCall.isScreensharing(),
+      localScreenshareFeed: groupCall.localScreenshareFeed,
+      localDesktopCapturerSourceId: groupCall.localDesktopCapturerSourceId,
+      screenshareFeeds: [...groupCall.screenshareFeeds],
+      participants: [...groupCall.participants],
+      hasLocalParticipant: groupCall.hasLocalParticipant(),
+    });
+
+    return () => {
+      groupCall.removeListener(
+        GroupCallEvent.GroupCallStateChanged,
+        onGroupCallStateChanged
+      );
+      groupCall.removeListener(
+        GroupCallEvent.UserMediaFeedsChanged,
+        onUserMediaFeedsChanged
+      );
+      groupCall.removeListener(
+        GroupCallEvent.ScreenshareFeedsChanged,
+        onScreenshareFeedsChanged
+      );
+      groupCall.removeListener(
+        GroupCallEvent.ActiveSpeakerChanged,
+        onActiveSpeakerChanged
+      );
+      groupCall.removeListener(
+        GroupCallEvent.LocalMuteStateChanged,
+        onLocalMuteStateChanged
+      );
+      groupCall.removeListener(
+        GroupCallEvent.LocalScreenshareStateChanged,
+        onLocalScreenshareStateChanged
+      );
+      groupCall.removeListener(GroupCallEvent.CallsChanged, onCallsChanged);
+      groupCall.removeListener(
+        GroupCallEvent.ParticipantsChanged,
+        onParticipantsChanged
+      );
+      groupCall.leave();
+    };
+  }, [groupCall]);
+
+  usePageUnload(() => {
+    groupCall.leave();
+  });
+
+  const initLocalCallFeed = useCallback(
+    () => groupCall.initLocalCallFeed(),
+    [groupCall]
+  );
+
+  const enter = useCallback(() => {
+    if (
+      groupCall.state !== GroupCallState.LocalCallFeedUninitialized &&
+      groupCall.state !== GroupCallState.LocalCallFeedInitialized
+    ) {
+      return;
+    }
+
+    groupCall.enter().catch((error) => {
+      console.error(error);
+      updateState({ error });
+    });
+  }, [groupCall]);
+
+  const leave = useCallback(() => groupCall.leave(), [groupCall]);
+
+  const toggleLocalVideoMuted = useCallback(() => {
+    groupCall.setLocalVideoMuted(!groupCall.isLocalVideoMuted());
+  }, [groupCall]);
+
+  const toggleMicrophoneMuted = useCallback(() => {
+    groupCall.setMicrophoneMuted(!groupCall.isMicrophoneMuted());
+  }, [groupCall]);
+
+  const toggleScreensharing = useCallback(() => {
+    updateState({ requestingScreenshare: true });
+
+    groupCall.setScreensharingEnabled(!groupCall.isScreensharing()).then(() => {
+      updateState({ requestingScreenshare: false });
+    });
+  }, [groupCall]);
+
+  useEffect(() => {
+    if (window.RTCPeerConnection === undefined) {
+      const error = new Error(
+        "WebRTC is not supported or is being blocked in this browser."
+      );
+      console.error(error);
+      updateState({ error });
+    }
+  }, []);
+
+  return {
+    state,
+    calls,
+    localCallFeed,
+    activeSpeaker,
+    userMediaFeeds,
+    microphoneMuted,
+    localVideoMuted,
+    error,
+    initLocalCallFeed,
+    enter,
+    leave,
+    toggleLocalVideoMuted,
+    toggleMicrophoneMuted,
+    toggleScreensharing,
+    requestingScreenshare,
+    isScreensharing,
+    screenshareFeeds,
+    localScreenshareFeed,
+    localDesktopCapturerSourceId,
+    participants,
+    hasLocalParticipant,
+  };
+}
--- a/src/room/usePTT.js
+++ b/src/room/usePTT.js
@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useState } from "react";
+
+export function usePTT(client, groupCall, userMediaFeeds) {
+  const [
+    { pttButtonHeld, isAdmin, talkOverEnabled, activeSpeakerUserId },
+    setState,
+  ] = useState(() => {
+    const roomMember = groupCall.room.getMember(client.getUserId());
+
+    const activeSpeakerFeed = userMediaFeeds.find((f) => !f.isAudioMuted());
+
+    return {
+      isAdmin: roomMember.powerLevel >= 100,
+      talkOverEnabled: false,
+      pttButtonHeld: false,
+      activeSpeakerUserId: activeSpeakerFeed ? activeSpeakerFeed.userId : null,
+    };
+  });
+
+  useEffect(() => {
+    function onMuteStateChanged(...args) {
+      const activeSpeakerFeed = userMediaFeeds.find((f) => !f.isAudioMuted());
+
+      setState((prevState) => ({
+        ...prevState,
+        activeSpeakerUserId: activeSpeakerFeed
+          ? activeSpeakerFeed.userId
+          : null,
+      }));
+    }
+
+    for (const callFeed of userMediaFeeds) {
+      callFeed.addListener("mute_state_changed", onMuteStateChanged);
+    }
+
+    const activeSpeakerFeed = userMediaFeeds.find((f) => !f.isAudioMuted());
+
+    setState((prevState) => ({
+      ...prevState,
+      activeSpeakerUserId: activeSpeakerFeed ? activeSpeakerFeed.userId : null,
+    }));
+
+    return () => {
+      for (const callFeed of userMediaFeeds) {
+        callFeed.removeListener("mute_state_changed", onMuteStateChanged);
+      }
+    };
+  }, [userMediaFeeds]);
+
+  const startTalking = useCallback(() => {
+    if (!activeSpeakerUserId || isAdmin || talkOverEnabled) {
+      if (groupCall.isMicrophoneMuted()) {
+        groupCall.setMicrophoneMuted(false);
+      }
+
+      setState((prevState) => ({ ...prevState, pttButtonHeld: true }));
+    }
+  }, []);
+
+  const stopTalking = useCallback(() => {
+    if (!groupCall.isMicrophoneMuted()) {
+      groupCall.setMicrophoneMuted(true);
+    }
+
+    setState((prevState) => ({ ...prevState, pttButtonHeld: false }));
+  }, []);
+
+  useEffect(() => {
+    function onKeyDown(event) {
+      if (event.code === "Space") {
+        event.preventDefault();
+
+        startTalking();
+      }
+    }
+
+    function onKeyUp(event) {
+      if (event.code === "Space") {
+        event.preventDefault();
+
+        stopTalking();
+      }
+    }
+
+    function onBlur() {
+      // TODO: We will need to disable this for a global PTT hotkey to work
+      if (!groupCall.isMicrophoneMuted()) {
+        groupCall.setMicrophoneMuted(true);
+      }
+
+      setState((prevState) => ({ ...prevState, pttButtonHeld: false }));
+    }
+
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    window.addEventListener("blur", onBlur);
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+      window.removeEventListener("blur", onBlur);
+    };
+  }, [activeSpeakerUserId, isAdmin, talkOverEnabled]);
+
+  const setTalkOverEnabled = useCallback((talkOverEnabled) => {
+    setState((prevState) => ({
+      ...prevState,
+      talkOverEnabled,
+    }));
+  }, []);
+
+  return {
+    pttButtonHeld,
+    isAdmin,
+    talkOverEnabled,
+    setTalkOverEnabled,
+    activeSpeakerUserId,
+    startTalking,
+    stopTalking,
+  };
+}
--- a/src/room/usePageUnload.js
+++ b/src/room/usePageUnload.js
@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+
+// https://stackoverflow.com/a/9039885
+function isIOS() {
+  return (
+    [
+      "iPad Simulator",
+      "iPhone Simulator",
+      "iPod Simulator",
+      "iPad",
+      "iPhone",
+      "iPod",
+    ].includes(navigator.platform) ||
+    // iPad on iOS 13 detection
+    (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+  );
+}
+
+export function usePageUnload(callback) {
+  useEffect(() => {
+    let pageVisibilityTimeout;
+
+    function onBeforeUnload(event) {
+      if (event.type === "visibilitychange") {
+        if (document.visibilityState === "visible") {
+          clearTimeout(pageVisibilityTimeout);
+        } else {
+          // Wait 5 seconds before closing the page to avoid accidentally leaving
+          // TODO: Make this configurable?
+          pageVisibilityTimeout = setTimeout(() => {
+            callback();
+          }, 5000);
+        }
+      } else {
+        callback();
+      }
+    }
+
+    // iOS doesn't fire beforeunload event, so leave the call when you hide the page.
+    if (isIOS()) {
+      window.addEventListener("pagehide", onBeforeUnload);
+      document.addEventListener("visibilitychange", onBeforeUnload);
+    }
+
+    window.addEventListener("beforeunload", onBeforeUnload);
+
+    return () => {
+      window.removeEventListener("pagehide", onBeforeUnload);
+      document.removeEventListener("visibilitychange", onBeforeUnload);
+      window.removeEventListener("beforeunload", onBeforeUnload);
+      clearTimeout(pageVisibilityTimeout);
+    };
+  }, [callback]);
+}
--- a/src/settings/SettingsModal.jsx
+++ b/src/settings/SettingsModal.jsx
@@ -10,7 +10,7 @@ import { Item } from "@react-stately/collections";
 import { useMediaHandler } from "./useMediaHandler";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
-import { useDownloadDebugLog } from "./rageshake";
+import { useDownloadDebugLog } from "./submit-rageshake";
 import { Body } from "../typography/Typography";

 export function SettingsModal({ setShowInspector, showInspector, ...rest }) {
--- a/src/settings/rageshake.js
+++ b/src/settings/rageshake.js
@@ -1,300 +1,535 @@
-import { useCallback, useContext, useEffect, useState } from "react";
-import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
-import pako from "pako";
-import { useClient } from "../ClientContext";
-import { InspectorContext } from "../room/GroupCallInspector";
-import { useModalTriggerState } from "../Modal";
+/*
+Copyright 2017 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.

-export function useSubmitRageshake() {
-  const { client } = useClient();
-  const [{ json }] = useContext(InspectorContext);
+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

-  const [{ sending, sent, error }, setState] = useState({
-    sending: false,
-    sent: false,
-    error: null,
-  });
+    http://www.apache.org/licenses/LICENSE-2.0

-  const submitRageshake = useCallback(
-    async (opts) => {
-      if (sending) {
+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.
+*/
+
+// This module contains all the code needed to log the console, persist it to
+// disk and submit bug reports. Rationale is as follows:
+//  - Monkey-patching the console is preferable to having a log library because
+//    we can catch logs by other libraries more easily, without having to all
+//    depend on the same log framework / pass the logger around.
+//  - We use IndexedDB to persists logs because it has generous disk space
+//    limits compared to local storage. IndexedDB does not work in incognito
+//    mode, in which case this module will not be able to write logs to disk.
+//    However, the logs will still be stored in-memory, so can still be
+//    submitted in a bug report should the user wish to: we can also store more
+//    logs in-memory than in local storage, which does work in incognito mode.
+//    We also need to handle the case where there are 2+ tabs. Each JS runtime
+//    generates a random string which serves as the "ID" for that tab/session.
+//    These IDs are stored along with the log lines.
+//  - Bug reports are sent as a POST over HTTPS: it purposefully does not use
+//    Matrix as bug reports may be made when Matrix is not responsive (which may
+//    be the cause of the bug). We send the most recent N MB of UTF-8 log data,
+//    starting with the most recent, which we know because the "ID"s are
+//    actually timestamps. We then purge the remaining logs. We also do this
+//    purge on startup to prevent logs from accumulating.
+
+// the frequency with which we flush to indexeddb
+import { logger } from "matrix-js-sdk/src/logger";
+
+const FLUSH_RATE_MS = 30 * 1000;
+
+// the length of log data we keep in indexeddb (and include in the reports)
+const MAX_LOG_SIZE = 1024 * 1024 * 5; // 5 MB
+
+// A class which monkey-patches the global console and stores log lines.
+export class ConsoleLogger {
+  logs = "";
+
+  monkeyPatch(consoleObj) {
+    // Monkey-patch console logging
+    const consoleFunctionsToLevels = {
+      log: "I",
+      info: "I",
+      warn: "W",
+      error: "E",
+    };
+    Object.keys(consoleFunctionsToLevels).forEach((fnName) => {
+      const level = consoleFunctionsToLevels[fnName];
+      const originalFn = consoleObj[fnName].bind(consoleObj);
+      consoleObj[fnName] = (...args) => {
+        this.log(level, ...args);
+        originalFn(...args);
+      };
+    });
+  }
+
+  log(level, ...args) {
+    // We don't know what locale the user may be running so use ISO strings
+    const ts = new Date().toISOString();
+
+    // Convert objects and errors to helpful things
+    args = args.map((arg) => {
+      if (arg instanceof DOMException) {
+        return arg.message + ` (${arg.name} | ${arg.code})`;
+      } else if (arg instanceof Error) {
+        return arg.message + (arg.stack ? `\n${arg.stack}` : "");
+      } else if (typeof arg === "object") {
+        try {
+          return JSON.stringify(arg);
+        } catch (e) {
+          // In development, it can be useful to log complex cyclic
+          // objects to the console for inspection. This is fine for
+          // the console, but default `stringify` can't handle that.
+          // We workaround this by using a special replacer function
+          // to only log values of the root object and avoid cycles.
+          return JSON.stringify(arg, (key, value) => {
+            if (key && typeof value === "object") {
+              return "<object>";
+            }
+            return value;
+          });
+        }
+      } else {
+        return arg;
+      }
+    });
+
+    // Some browsers support string formatting which we're not doing here
+    // so the lines are a little more ugly but easy to implement / quick to
+    // run.
+    // Example line:
+    // 2017-01-18T11:23:53.214Z W Failed to set badge count
+    let line = `${ts} ${level} ${args.join(" ")}\n`;
+    // Do some cleanup
+    line = line.replace(/token=[a-zA-Z0-9-]+/gm, "token=xxxxx");
+    // Using + really is the quickest way in JS
+    // http://jsperf.com/concat-vs-plus-vs-join
+    this.logs += line;
+  }
+
+  /**
+   * Retrieve log lines to flush to disk.
+   * @param {boolean} keepLogs True to not delete logs after flushing.
+   * @return {string} \n delimited log lines to flush.
+   */
+  flush(keepLogs) {
+    // The ConsoleLogger doesn't care how these end up on disk, it just
+    // flushes them to the caller.
+    if (keepLogs) {
+      return this.logs;
+    }
+    const logsToFlush = this.logs;
+    this.logs = "";
+    return logsToFlush;
+  }
+}
+
+// A class which stores log lines in an IndexedDB instance.
+export class IndexedDBLogStore {
+  index = 0;
+  db = null;
+  flushPromise = null;
+  flushAgainPromise = null;
+
+  constructor(indexedDB, logger) {
+    this.indexedDB = indexedDB;
+    this.logger = logger;
+    this.id = "instance-" + Math.random() + Date.now();
+  }
+
+  /**
+   * @return {Promise} Resolves when the store is ready.
+   */
+  connect() {
+    const req = this.indexedDB.open("logs");
+    return new Promise((resolve, reject) => {
+      req.onsuccess = (event) => {
+        // @ts-ignore
+        this.db = event.target.result;
+        // Periodically flush logs to local storage / indexeddb
+        setInterval(this.flush.bind(this), FLUSH_RATE_MS);
+        resolve();
+      };
+
+      req.onerror = (event) => {
+        const err =
+          // @ts-ignore
+          "Failed to open log database: " + event.target.error.name;
+        logger.error(err);
+        reject(new Error(err));
+      };
+
+      // First time: Setup the object store
+      req.onupgradeneeded = (event) => {
+        // @ts-ignore
+        const db = event.target.result;
+        const logObjStore = db.createObjectStore("logs", {
+          keyPath: ["id", "index"],
+        });
+        // Keys in the database look like: [ "instance-148938490", 0 ]
+        // Later on we need to query everything based on an instance id.
+        // In order to do this, we need to set up indexes "id".
+        logObjStore.createIndex("id", "id", { unique: false });
+
+        logObjStore.add(
+          this.generateLogEntry(new Date() + " ::: Log database was created.")
+        );
+
+        const lastModifiedStore = db.createObjectStore("logslastmod", {
+          keyPath: "id",
+        });
+        lastModifiedStore.add(this.generateLastModifiedTime());
+      };
+    });
+  }
+
+  /**
+   * Flush logs to disk.
+   *
+   * There are guards to protect against race conditions in order to ensure
+   * that all previous flushes have completed before the most recent flush.
+   * Consider without guards:
+   *  - A calls flush() periodically.
+   *  - B calls flush() and wants to send logs immediately afterwards.
+   *  - If B doesn't wait for A's flush to complete, B will be missing the
+   *    contents of A's flush.
+   * To protect against this, we set 'flushPromise' when a flush is ongoing.
+   * Subsequent calls to flush() during this period will chain another flush,
+   * then keep returning that same chained flush.
+   *
+   * This guarantees that we will always eventually do a flush when flush() is
+   * called.
+   *
+   * @return {Promise} Resolved when the logs have been flushed.
+   */
+  flush() {
+    // check if a flush() operation is ongoing
+    if (this.flushPromise) {
+      if (this.flushAgainPromise) {
+        // this is the 3rd+ time we've called flush() : return the same promise.
+        return this.flushAgainPromise;
+      }
+      // queue up a flush to occur immediately after the pending one completes.
+      this.flushAgainPromise = this.flushPromise
+        .then(() => {
+          return this.flush();
+        })
+        .then(() => {
+          this.flushAgainPromise = null;
+        });
+      return this.flushAgainPromise;
+    }
+    // there is no flush promise or there was but it has finished, so do
+    // a brand new one, destroying the chain which may have been built up.
+    this.flushPromise = new Promise((resolve, reject) => {
+      if (!this.db) {
+        // not connected yet or user rejected access for us to r/w to the db.
+        reject(new Error("No connected database"));
        return;
      }
-
-      try {
-        setState({ sending: true, sent: false, error: null });
-
-        let userAgent = "UNKNOWN";
-        if (window.navigator && window.navigator.userAgent) {
-          userAgent = window.navigator.userAgent;
-        }
-
-        let touchInput = "UNKNOWN";
-        try {
-          // MDN claims broad support across browsers
-          touchInput = String(window.matchMedia("(pointer: coarse)").matches);
-        } catch (e) {}
-
-        const body = new FormData();
-        body.append(
-          "text",
-          opts.description || "User did not supply any additional text."
-        );
-        body.append("app", "matrix-video-chat");
-        body.append("version", import.meta.env.VITE_APP_VERSION || "dev");
-        body.append("user_agent", userAgent);
-        body.append("installed_pwa", false);
-        body.append("touch_input", touchInput);
-
-        if (client) {
-          const userId = client.getUserId();
-          const user = client.getUser(userId);
-          body.append("display_name", user?.displayName);
-          body.append("user_id", client.credentials.userId);
-          body.append("device_id", client.deviceId);
-
-          if (opts.roomId) {
-            body.append("room_id", opts.roomId);
-          }
-
-          if (client.isCryptoEnabled()) {
-            const keys = [`ed25519:${client.getDeviceEd25519Key()}`];
-            if (client.getDeviceCurve25519Key) {
-              keys.push(`curve25519:${client.getDeviceCurve25519Key()}`);
-            }
-            body.append("device_keys", keys.join(", "));
-            body.append("cross_signing_key", client.getCrossSigningId());
-
-            // add cross-signing status information
-            const crossSigning = client.crypto.crossSigningInfo;
-            const secretStorage = client.crypto.secretStorage;
-
-            body.append(
-              "cross_signing_ready",
-              String(await client.isCrossSigningReady())
-            );
-            body.append(
-              "cross_signing_supported_by_hs",
-              String(
-                await client.doesServerSupportUnstableFeature(
-                  "org.matrix.e2e_cross_signing"
-                )
-              )
-            );
-            body.append("cross_signing_key", crossSigning.getId());
-            body.append(
-              "cross_signing_privkey_in_secret_storage",
-              String(
-                !!(await crossSigning.isStoredInSecretStorage(secretStorage))
-              )
-            );
-
-            const pkCache = client.getCrossSigningCacheCallbacks();
-            body.append(
-              "cross_signing_master_privkey_cached",
-              String(
-                !!(pkCache && (await pkCache.getCrossSigningKeyCache("master")))
-              )
-            );
-            body.append(
-              "cross_signing_self_signing_privkey_cached",
-              String(
-                !!(
-                  pkCache &&
-                  (await pkCache.getCrossSigningKeyCache("self_signing"))
-                )
-              )
-            );
-            body.append(
-              "cross_signing_user_signing_privkey_cached",
-              String(
-                !!(
-                  pkCache &&
-                  (await pkCache.getCrossSigningKeyCache("user_signing"))
-                )
-              )
-            );
-
-            body.append(
-              "secret_storage_ready",
-              String(await client.isSecretStorageReady())
-            );
-            body.append(
-              "secret_storage_key_in_account",
-              String(!!(await secretStorage.hasKey()))
-            );
-
-            body.append(
-              "session_backup_key_in_secret_storage",
-              String(!!(await client.isKeyBackupKeyStored()))
-            );
-            const sessionBackupKeyFromCache =
-              await client.crypto.getSessionBackupPrivateKey();
-            body.append(
-              "session_backup_key_cached",
-              String(!!sessionBackupKeyFromCache)
-            );
-            body.append(
-              "session_backup_key_well_formed",
-              String(sessionBackupKeyFromCache instanceof Uint8Array)
-            );
-          }
-        }
-
-        if (opts.label) {
-          body.append("label", opts.label);
-        }
-
-        // add storage persistence/quota information
-        if (navigator.storage && navigator.storage.persisted) {
-          try {
-            body.append(
-              "storageManager_persisted",
-              String(await navigator.storage.persisted())
-            );
-          } catch (e) {}
-        } else if (document.hasStorageAccess) {
-          // Safari
-          try {
-            body.append(
-              "storageManager_persisted",
-              String(await document.hasStorageAccess())
-            );
-          } catch (e) {}
-        }
-
-        if (navigator.storage && navigator.storage.estimate) {
-          try {
-            const estimate = await navigator.storage.estimate();
-            body.append("storageManager_quota", String(estimate.quota));
-            body.append("storageManager_usage", String(estimate.usage));
-            if (estimate.usageDetails) {
-              Object.keys(estimate.usageDetails).forEach((k) => {
-                body.append(
-                  `storageManager_usage_${k}`,
-                  String(estimate.usageDetails[k])
-                );
-              });
-            }
-          } catch (e) {}
-        }
-
-        if (opts.sendLogs) {
-          const logs = await rageshake.getLogsForReport();
-
-          for (const entry of logs) {
-            // encode as UTF-8
-            let buf = new TextEncoder().encode(entry.lines);
-
-            // compress
-            buf = pako.gzip(buf);
-
-            body.append("compressed-log", new Blob([buf]), entry.id);
-          }
-
-          if (json) {
-            body.append(
-              "file",
-              new Blob([JSON.stringify(json)], { type: "text/plain" }),
-              "groupcall.txt"
-            );
-          }
-        }
-
-        if (opts.rageshakeRequestId) {
-          body.append(
-            "group_call_rageshake_request_id",
-            opts.rageshakeRequestId
-          );
-        }
-
-        await fetch(
-          import.meta.env.VITE_RAGESHAKE_SUBMIT_URL ||
-            "https://element.io/bugreports/submit",
-          {
-            method: "POST",
-            body,
-          }
-        );
-
-        setState({ sending: false, sent: true, error: null });
-      } catch (error) {
-        setState({ sending: false, sent: false, error });
-        console.error(error);
+      const lines = this.logger.flush();
+      if (lines.length === 0) {
+        resolve();
+        return;
      }
-    },
-    [client]
-  );
+      const txn = this.db.transaction(["logs", "logslastmod"], "readwrite");
+      const objStore = txn.objectStore("logs");
+      txn.oncomplete = (event) => {
+        resolve();
+      };
+      txn.onerror = (event) => {
+        logger.error("Failed to flush logs : ", event);
+        reject(new Error("Failed to write logs: " + event.target.errorCode));
+      };
+      objStore.add(this.generateLogEntry(lines));
+      const lastModStore = txn.objectStore("logslastmod");
+      lastModStore.put(this.generateLastModifiedTime());
+    }).then(() => {
+      this.flushPromise = null;
+    });
+    return this.flushPromise;
+  }

-  return {
-    submitRageshake,
-    sending,
-    sent,
-    error,
-  };
-}
+  /**
+   * Consume the most recent logs and return them. Older logs which are not
+   * returned are deleted at the same time, so this can be called at startup
+   * to do house-keeping to keep the logs from growing too large.
+   *
+   * @return {Promise<Object[]>} Resolves to an array of objects. The array is
+   * sorted in time (oldest first) based on when the log file was created (the
+   * log ID). The objects have said log ID in an "id" field and "lines" which
+   * is a big string with all the new-line delimited logs.
+   */
+  async consume() {
+    const db = this.db;

-export function useDownloadDebugLog() {
-  const [{ json }] = useContext(InspectorContext);
+    // Returns: a string representing the concatenated logs for this ID.
+    // Stops adding log fragments when the size exceeds maxSize
+    function fetchLogs(id, maxSize) {
+      const objectStore = db
+        .transaction("logs", "readonly")
+        .objectStore("logs");

-  const downloadDebugLog = useCallback(() => {
-    const blob = new Blob([JSON.stringify(json)], { type: "application/json" });
-    const url = URL.createObjectURL(blob);
-    const el = document.createElement("a");
-    el.href = url;
-    el.download = "groupcall.json";
-    el.style.display = "none";
-    document.body.appendChild(el);
-    el.click();
-    setTimeout(() => {
-      URL.revokeObjectURL(url);
-      el.parentNode.removeChild(el);
-    }, 0);
-  }, [json]);
-
-  return downloadDebugLog;
-}
-
-export function useRageshakeRequest() {
-  const { client } = useClient();
-
-  const sendRageshakeRequest = useCallback(
-    (roomId, rageshakeRequestId) => {
-      client.sendEvent(roomId, "org.matrix.rageshake_request", {
-        request_id: rageshakeRequestId,
+      return new Promise((resolve, reject) => {
+        const query = objectStore
+          .index("id")
+          .openCursor(IDBKeyRange.only(id), "prev");
+        let lines = "";
+        query.onerror = (event) => {
+          reject(new Error("Query failed: " + event.target.errorCode));
+        };
+        query.onsuccess = (event) => {
+          const cursor = event.target.result;
+          if (!cursor) {
+            resolve(lines);
+            return; // end of results
+          }
+          lines = cursor.value.lines + lines;
+          if (lines.length >= maxSize) {
+            resolve(lines);
+          } else {
+            cursor.continue();
+          }
+        };
      });
-    },
-    [client]
-  );
+    }

-  return sendRageshakeRequest;
-}
+    // Returns: A sorted array of log IDs. (newest first)
+    function fetchLogIds() {
+      // To gather all the log IDs, query for all records in logslastmod.
+      const o = db
+        .transaction("logslastmod", "readonly")
+        .objectStore("logslastmod");
+      return selectQuery(o, undefined, (cursor) => {
+        return {
+          id: cursor.value.id,
+          ts: cursor.value.ts,
+        };
+      }).then((res) => {
+        // Sort IDs by timestamp (newest first)
+        return res
+          .sort((a, b) => {
+            return b.ts - a.ts;
+          })
+          .map((a) => a.id);
+      });
+    }

-export function useRageshakeRequestModal(roomId) {
-  const { modalState, modalProps } = useModalTriggerState();
-  const { client } = useClient();
-  const [rageshakeRequestId, setRageshakeRequestId] = useState();
+    function deleteLogs(id) {
+      return new Promise((resolve, reject) => {
+        const txn = db.transaction(["logs", "logslastmod"], "readwrite");
+        const o = txn.objectStore("logs");
+        // only load the key path, not the data which may be huge
+        const query = o.index("id").openKeyCursor(IDBKeyRange.only(id));
+        query.onsuccess = (event) => {
+          const cursor = event.target.result;
+          if (!cursor) {
+            return;
+          }
+          o.delete(cursor.primaryKey);
+          cursor.continue();
+        };
+        txn.oncomplete = () => {
+          resolve();
+        };
+        txn.onerror = (event) => {
+          reject(
+            new Error(
+              "Failed to delete logs for " +
+                `'${id}' : ${event.target.errorCode}`
+            )
+          );
+        };
+        // delete last modified entries
+        const lastModStore = txn.objectStore("logslastmod");
+        lastModStore.delete(id);
+      });
+    }

-  useEffect(() => {
-    const onEvent = (event) => {
-      const type = event.getType();
+    const allLogIds = await fetchLogIds();
+    let removeLogIds = [];
+    const logs = [];
+    let size = 0;
+    for (let i = 0; i < allLogIds.length; i++) {
+      const lines = await fetchLogs(allLogIds[i], MAX_LOG_SIZE - size);

-      if (
-        type === "org.matrix.rageshake_request" &&
-        roomId === event.getRoomId() &&
-        client.getUserId() !== event.getSender()
-      ) {
-        setRageshakeRequestId(event.getContent().request_id);
-        modalState.open();
+      // always add the log file: fetchLogs will truncate once the maxSize we give it is
+      // exceeded, so we'll go over the max but only by one fragment's worth.
+      logs.push({
+        lines: lines,
+        id: allLogIds[i],
+      });
+      size += lines.length;
+
+      // If fetchLogs truncated we'll now be at or over the size limit,
+      // in which case we should stop and remove the rest of the log files.
+      if (size >= MAX_LOG_SIZE) {
+        // the remaining log IDs should be removed. If we go out of
+        // bounds this is just []
+        removeLogIds = allLogIds.slice(i + 1);
+        break;
      }
+    }
+    if (removeLogIds.length > 0) {
+      logger.log("Removing logs: ", removeLogIds);
+      // Don't await this because it's non-fatal if we can't clean up
+      // logs.
+      Promise.all(removeLogIds.map((id) => deleteLogs(id))).then(
+        () => {
+          logger.log(`Removed ${removeLogIds.length} old logs.`);
+        },
+        (err) => {
+          logger.error(err);
+        }
+      );
+    }
+    return logs;
+  }
+
+  generateLogEntry(lines) {
+    return {
+      id: this.id,
+      lines: lines,
+      index: this.index++,
    };
+  }

-    client.on("event", onEvent);
-
-    return () => {
-      client.removeListener("event", onEvent);
+  generateLastModifiedTime() {
+    return {
+      id: this.id,
+      ts: Date.now(),
    };
-  }, [modalState.open, roomId]);
-
-  return { modalState, modalProps: { ...modalProps, rageshakeRequestId } };
+  }
+}
+
+/**
+ * Helper method to collect results from a Cursor and promiseify it.
+ * @param {ObjectStore|Index} store The store to perform openCursor on.
+ * @param {IDBKeyRange=} keyRange Optional key range to apply on the cursor.
+ * @param {Function} resultMapper A function which is repeatedly called with a
+ * Cursor.
+ * Return the data you want to keep.
+ * @return {Promise<T[]>} Resolves to an array of whatever you returned from
+ * resultMapper.
+ */
+function selectQuery(store, keyRange, resultMapper) {
+  const query = store.openCursor(keyRange);
+  return new Promise((resolve, reject) => {
+    const results = [];
+    query.onerror = (event) => {
+      // @ts-ignore
+      reject(new Error("Query failed: " + event.target.errorCode));
+    };
+    // collect results
+    query.onsuccess = (event) => {
+      // @ts-ignore
+      const cursor = event.target.result;
+      if (!cursor) {
+        resolve(results);
+        return; // end of results
+      }
+      results.push(resultMapper(cursor));
+      cursor.continue();
+    };
+  });
+}
+
+/**
+ * Configure rage shaking support for sending bug reports.
+ * Modifies globals.
+ * @param {boolean} setUpPersistence When true (default), the persistence will
+ * be set up immediately for the logs.
+ * @return {Promise} Resolves when set up.
+ */
+export function init(setUpPersistence = true) {
+  if (global.mx_rage_initPromise) {
+    return global.mx_rage_initPromise;
+  }
+  global.mx_rage_logger = new ConsoleLogger();
+  global.mx_rage_logger.monkeyPatch(window.console);
+
+  if (setUpPersistence) {
+    return tryInitStorage();
+  }
+
+  global.mx_rage_initPromise = Promise.resolve();
+  return global.mx_rage_initPromise;
+}
+
+/**
+ * Try to start up the rageshake storage for logs. If not possible (client unsupported)
+ * then this no-ops.
+ * @return {Promise} Resolves when complete.
+ */
+export function tryInitStorage() {
+  if (global.mx_rage_initStoragePromise) {
+    return global.mx_rage_initStoragePromise;
+  }
+
+  logger.log("Configuring rageshake persistence...");
+
+  // just *accessing* indexedDB throws an exception in firefox with
+  // indexeddb disabled.
+  let indexedDB;
+  try {
+    indexedDB = window.indexedDB;
+  } catch (e) {}
+
+  if (indexedDB) {
+    global.mx_rage_store = new IndexedDBLogStore(
+      indexedDB,
+      global.mx_rage_logger
+    );
+    global.mx_rage_initStoragePromise = global.mx_rage_store.connect();
+    return global.mx_rage_initStoragePromise;
+  }
+  global.mx_rage_initStoragePromise = Promise.resolve();
+  return global.mx_rage_initStoragePromise;
+}
+
+export function flush() {
+  if (!global.mx_rage_store) {
+    return;
+  }
+  global.mx_rage_store.flush();
+}
+
+/**
+ * Clean up old logs.
+ * @return {Promise} Resolves if cleaned logs.
+ */
+export async function cleanup() {
+  if (!global.mx_rage_store) {
+    return;
+  }
+  await global.mx_rage_store.consume();
+}
+
+/**
+ * Get a recent snapshot of the logs, ready for attaching to a bug report
+ *
+ * @return {Array<{lines: string, id, string}>}  list of log data
+ */
+export async function getLogsForReport() {
+  if (!global.mx_rage_logger) {
+    throw new Error("No console logger, did you forget to call init()?");
+  }
+  // If in incognito mode, store is null, but we still want bug report
+  // sending to work going off the in-memory console logs.
+  if (global.mx_rage_store) {
+    // flush most recent logs
+    await global.mx_rage_store.flush();
+    return await global.mx_rage_store.consume();
+  } else {
+    return [
+      {
+        lines: global.mx_rage_logger.flush(true),
+        id: "-",
+      },
+    ];
+  }
 }
--- a/src/settings/submit-rageshake.js
+++ b/src/settings/submit-rageshake.js
@@ -0,0 +1,300 @@
+import { useCallback, useContext, useEffect, useState } from "react";
+import { getLogsForReport } from "./rageshake";
+import pako from "pako";
+import { useClient } from "../ClientContext";
+import { InspectorContext } from "../room/GroupCallInspector";
+import { useModalTriggerState } from "../Modal";
+
+export function useSubmitRageshake() {
+  const { client } = useClient();
+  const [{ json }] = useContext(InspectorContext);
+
+  const [{ sending, sent, error }, setState] = useState({
+    sending: false,
+    sent: false,
+    error: null,
+  });
+
+  const submitRageshake = useCallback(
+    async (opts) => {
+      if (sending) {
+        return;
+      }
+
+      try {
+        setState({ sending: true, sent: false, error: null });
+
+        let userAgent = "UNKNOWN";
+        if (window.navigator && window.navigator.userAgent) {
+          userAgent = window.navigator.userAgent;
+        }
+
+        let touchInput = "UNKNOWN";
+        try {
+          // MDN claims broad support across browsers
+          touchInput = String(window.matchMedia("(pointer: coarse)").matches);
+        } catch (e) {}
+
+        const body = new FormData();
+        body.append(
+          "text",
+          opts.description || "User did not supply any additional text."
+        );
+        body.append("app", "matrix-video-chat");
+        body.append("version", import.meta.env.VITE_APP_VERSION || "dev");
+        body.append("user_agent", userAgent);
+        body.append("installed_pwa", false);
+        body.append("touch_input", touchInput);
+
+        if (client) {
+          const userId = client.getUserId();
+          const user = client.getUser(userId);
+          body.append("display_name", user?.displayName);
+          body.append("user_id", client.credentials.userId);
+          body.append("device_id", client.deviceId);
+
+          if (opts.roomId) {
+            body.append("room_id", opts.roomId);
+          }
+
+          if (client.isCryptoEnabled()) {
+            const keys = [`ed25519:${client.getDeviceEd25519Key()}`];
+            if (client.getDeviceCurve25519Key) {
+              keys.push(`curve25519:${client.getDeviceCurve25519Key()}`);
+            }
+            body.append("device_keys", keys.join(", "));
+            body.append("cross_signing_key", client.getCrossSigningId());
+
+            // add cross-signing status information
+            const crossSigning = client.crypto.crossSigningInfo;
+            const secretStorage = client.crypto.secretStorage;
+
+            body.append(
+              "cross_signing_ready",
+              String(await client.isCrossSigningReady())
+            );
+            body.append(
+              "cross_signing_supported_by_hs",
+              String(
+                await client.doesServerSupportUnstableFeature(
+                  "org.matrix.e2e_cross_signing"
+                )
+              )
+            );
+            body.append("cross_signing_key", crossSigning.getId());
+            body.append(
+              "cross_signing_privkey_in_secret_storage",
+              String(
+                !!(await crossSigning.isStoredInSecretStorage(secretStorage))
+              )
+            );
+
+            const pkCache = client.getCrossSigningCacheCallbacks();
+            body.append(
+              "cross_signing_master_privkey_cached",
+              String(
+                !!(pkCache && (await pkCache.getCrossSigningKeyCache("master")))
+              )
+            );
+            body.append(
+              "cross_signing_self_signing_privkey_cached",
+              String(
+                !!(
+                  pkCache &&
+                  (await pkCache.getCrossSigningKeyCache("self_signing"))
+                )
+              )
+            );
+            body.append(
+              "cross_signing_user_signing_privkey_cached",
+              String(
+                !!(
+                  pkCache &&
+                  (await pkCache.getCrossSigningKeyCache("user_signing"))
+                )
+              )
+            );
+
+            body.append(
+              "secret_storage_ready",
+              String(await client.isSecretStorageReady())
+            );
+            body.append(
+              "secret_storage_key_in_account",
+              String(!!(await secretStorage.hasKey()))
+            );
+
+            body.append(
+              "session_backup_key_in_secret_storage",
+              String(!!(await client.isKeyBackupKeyStored()))
+            );
+            const sessionBackupKeyFromCache =
+              await client.crypto.getSessionBackupPrivateKey();
+            body.append(
+              "session_backup_key_cached",
+              String(!!sessionBackupKeyFromCache)
+            );
+            body.append(
+              "session_backup_key_well_formed",
+              String(sessionBackupKeyFromCache instanceof Uint8Array)
+            );
+          }
+        }
+
+        if (opts.label) {
+          body.append("label", opts.label);
+        }
+
+        // add storage persistence/quota information
+        if (navigator.storage && navigator.storage.persisted) {
+          try {
+            body.append(
+              "storageManager_persisted",
+              String(await navigator.storage.persisted())
+            );
+          } catch (e) {}
+        } else if (document.hasStorageAccess) {
+          // Safari
+          try {
+            body.append(
+              "storageManager_persisted",
+              String(await document.hasStorageAccess())
+            );
+          } catch (e) {}
+        }
+
+        if (navigator.storage && navigator.storage.estimate) {
+          try {
+            const estimate = await navigator.storage.estimate();
+            body.append("storageManager_quota", String(estimate.quota));
+            body.append("storageManager_usage", String(estimate.usage));
+            if (estimate.usageDetails) {
+              Object.keys(estimate.usageDetails).forEach((k) => {
+                body.append(
+                  `storageManager_usage_${k}`,
+                  String(estimate.usageDetails[k])
+                );
+              });
+            }
+          } catch (e) {}
+        }
+
+        if (opts.sendLogs) {
+          const logs = await getLogsForReport();
+
+          for (const entry of logs) {
+            // encode as UTF-8
+            let buf = new TextEncoder().encode(entry.lines);
+
+            // compress
+            buf = pako.gzip(buf);
+
+            body.append("compressed-log", new Blob([buf]), entry.id);
+          }
+
+          if (json) {
+            body.append(
+              "file",
+              new Blob([JSON.stringify(json)], { type: "text/plain" }),
+              "groupcall.txt"
+            );
+          }
+        }
+
+        if (opts.rageshakeRequestId) {
+          body.append(
+            "group_call_rageshake_request_id",
+            opts.rageshakeRequestId
+          );
+        }
+
+        await fetch(
+          import.meta.env.VITE_RAGESHAKE_SUBMIT_URL ||
+            "https://element.io/bugreports/submit",
+          {
+            method: "POST",
+            body,
+          }
+        );
+
+        setState({ sending: false, sent: true, error: null });
+      } catch (error) {
+        setState({ sending: false, sent: false, error });
+        console.error(error);
+      }
+    },
+    [client]
+  );
+
+  return {
+    submitRageshake,
+    sending,
+    sent,
+    error,
+  };
+}
+
+export function useDownloadDebugLog() {
+  const [{ json }] = useContext(InspectorContext);
+
+  const downloadDebugLog = useCallback(() => {
+    const blob = new Blob([JSON.stringify(json)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const el = document.createElement("a");
+    el.href = url;
+    el.download = "groupcall.json";
+    el.style.display = "none";
+    document.body.appendChild(el);
+    el.click();
+    setTimeout(() => {
+      URL.revokeObjectURL(url);
+      el.parentNode.removeChild(el);
+    }, 0);
+  }, [json]);
+
+  return downloadDebugLog;
+}
+
+export function useRageshakeRequest() {
+  const { client } = useClient();
+
+  const sendRageshakeRequest = useCallback(
+    (roomId, rageshakeRequestId) => {
+      client.sendEvent(roomId, "org.matrix.rageshake_request", {
+        request_id: rageshakeRequestId,
+      });
+    },
+    [client]
+  );
+
+  return sendRageshakeRequest;
+}
+
+export function useRageshakeRequestModal(roomId) {
+  const { modalState, modalProps } = useModalTriggerState();
+  const { client } = useClient();
+  const [rageshakeRequestId, setRageshakeRequestId] = useState();
+
+  useEffect(() => {
+    const onEvent = (event) => {
+      const type = event.getType();
+
+      if (
+        type === "org.matrix.rageshake_request" &&
+        roomId === event.getRoomId() &&
+        client.getUserId() !== event.getSender()
+      ) {
+        setRageshakeRequestId(event.getContent().request_id);
+        modalState.open();
+      }
+    };
+
+    client.on("event", onEvent);
+
+    return () => {
+      client.removeListener("event", onEvent);
+    };
+  }, [modalState.open, roomId]);
+
+  return { modalState, modalProps: { ...modalProps, rageshakeRequestId } };
+}
--- a/src/useShouldShowPtt.js
+++ b/src/useShouldShowPtt.js
@@ -0,0 +1,6 @@
+import { useLocation } from "react-router-dom";
+
+export function useShouldShowPtt() {
+  const { hash } = useLocation();
+  return hash.startsWith("#ptt");
+}
--- a/src/video-grid/VideoGrid.jsx
+++ b/src/video-grid/VideoGrid.jsx
--- a/src/video-grid/VideoGrid.module.css
+++ b/src/video-grid/VideoGrid.module.css
@@ -0,0 +1,6 @@
+.videoGrid {
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+  touch-action: none;
+}
--- a/src/video-grid/VideoGrid.stories.jsx
+++ b/src/video-grid/VideoGrid.stories.jsx
@@ -1,9 +1,6 @@
 import React, { useState } from "react";
-import VideoGrid, {
-  useVideoGridLayout,
-} from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid";
-import VideoTile from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoTile";
-import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss";
+import { VideoGrid, useVideoGridLayout } from "./VideoGrid";
+import { VideoTile } from "./VideoTile";
 import { useMemo } from "react";
 import { Button } from "../button";

--- a/src/video-grid/VideoTile.jsx
+++ b/src/video-grid/VideoTile.jsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { animated } from "@react-spring/web";
+import classNames from "classnames";
+import styles from "./VideoTile.module.css";
+import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
+import { ReactComponent as VideoMutedIcon } from "../icons/VideoMuted.svg";
+
+export function VideoTile({
+  className,
+  isLocal,
+  speaking,
+  audioMuted,
+  noVideo,
+  videoMuted,
+  screenshare,
+  avatar,
+  name,
+  showName,
+  mediaRef,
+  ...rest
+}) {
+  return (
+    <animated.div
+      className={classNames(styles.videoTile, className, {
+        [styles.isLocal]: isLocal,
+        [styles.speaking]: speaking,
+        [styles.muted]: audioMuted,
+        [styles.screenshare]: screenshare,
+      })}
+      {...rest}
+    >
+      {(videoMuted || noVideo) && (
+        <>
+          <div className={styles.videoMutedOverlay} />
+          {avatar}
+        </>
+      )}
+      {screenshare ? (
+        <div className={styles.presenterLabel}>
+          <span>{`${name} is presenting`}</span>
+        </div>
+      ) : (
+        (showName || audioMuted || (videoMuted && !noVideo)) && (
+          <div className={styles.memberName}>
+            {audioMuted && !(videoMuted && !noVideo) && <MicMutedIcon />}
+            {videoMuted && !noVideo && <VideoMutedIcon />}
+            {showName && <span title={name}>{name}</span>}
+          </div>
+        )
+      )}
+      <video ref={mediaRef} playsInline disablePictureInPicture />
+    </animated.div>
+  );
+}
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -0,0 +1,113 @@
+.videoTile {
+  position: absolute;
+  will-change: transform, width, height, opacity, box-shadow;
+  border-radius: 20px;
+  overflow: hidden;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.videoTile * {
+  touch-action: none;
+  -moz-user-select: none;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
+.videoTile video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background-color: #444;
+}
+
+.videoTile.isLocal:not(.screenshare) video {
+  transform: scaleX(-1);
+}
+
+.videoTile.speaking::after {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  content: "";
+  border-radius: 20px;
+  box-shadow: inset 0 0 0 4px #0dbd8b !important;
+}
+
+.videoTile.screenshare > video {
+  object-fit: contain;
+}
+
+.memberName {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  height: 24px;
+  padding: 0 8px;
+  color: white;
+  background-color: rgba(23, 25, 28, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  user-select: none;
+  max-width: calc(100% - 48px);
+  overflow: hidden;
+  z-index: 1;
+}
+
+.memberName > * {
+  margin-right: 6px;
+}
+
+.memberName > :last-child {
+  margin-right: 0px;
+}
+
+.memberName span {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.videoMutedAvatar {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.videoMutedOverlay {
+  width: 100%;
+  height: 100%;
+  background-color: #21262c;
+}
+
+.presenterLabel {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #17191c;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 4px 8px;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 15px;
+}
+
+.screensharePIP {
+  bottom: 8px;
+  right: 8px;
+  width: 25%;
+  max-width: 360px;
+  border-radius: 20px;
+}
--- a/src/video-grid/VideoTileContainer.jsx
+++ b/src/video-grid/VideoTileContainer.jsx
@@ -0,0 +1,49 @@
+import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
+import React from "react";
+import { useCallFeed } from "./useCallFeed";
+import { useMediaStream } from "./useMediaStream";
+import { useRoomMemberName } from "./useRoomMemberName";
+import { VideoTile } from "./VideoTile";
+
+export function VideoTileContainer({
+  item,
+  width,
+  height,
+  getAvatar,
+  showName,
+  audioOutputDevice,
+  disableSpeakingIndicator,
+  ...rest
+}) {
+  const {
+    isLocal,
+    audioMuted,
+    videoMuted,
+    noVideo,
+    speaking,
+    stream,
+    purpose,
+    member,
+  } = useCallFeed(item.callFeed);
+  const { rawDisplayName } = useRoomMemberName(member);
+  const mediaRef = useMediaStream(stream, audioOutputDevice, isLocal);
+
+  // Firefox doesn't respect the disablePictureInPicture attribute
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1611831
+
+  return (
+    <VideoTile
+      isLocal={isLocal}
+      speaking={speaking && !disableSpeakingIndicator}
+      audioMuted={audioMuted}
+      noVideo={noVideo}
+      videoMuted={videoMuted}
+      screenshare={purpose === SDPStreamMetadataPurpose.Screenshare}
+      name={rawDisplayName}
+      showName={showName}
+      mediaRef={mediaRef}
+      avatar={getAvatar && getAvatar(member, width, height)}
+      {...rest}
+    />
+  );
+}
--- a/src/video-grid/useCallFeed.js
+++ b/src/video-grid/useCallFeed.js
@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+import { CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed";
+
+function getCallFeedState(callFeed) {
+  return {
+    member: callFeed ? callFeed.getMember() : null,
+    isLocal: callFeed ? callFeed.isLocal() : false,
+    speaking: callFeed ? callFeed.isSpeaking() : false,
+    noVideo: callFeed
+      ? !callFeed.stream || callFeed.stream.getVideoTracks().length === 0
+      : true,
+    videoMuted: callFeed ? callFeed.isVideoMuted() : true,
+    audioMuted: callFeed ? callFeed.isAudioMuted() : true,
+    stream: callFeed ? callFeed.stream : undefined,
+    purpose: callFeed ? callFeed.purpose : undefined,
+  };
+}
+
+export function useCallFeed(callFeed) {
+  const [state, setState] = useState(() => getCallFeedState(callFeed));
+
+  useEffect(() => {
+    function onSpeaking(speaking) {
+      setState((prevState) => ({ ...prevState, speaking }));
+    }
+
+    function onMuteStateChanged(audioMuted, videoMuted) {
+      setState((prevState) => ({ ...prevState, audioMuted, videoMuted }));
+    }
+
+    function onUpdateCallFeed() {
+      setState(getCallFeedState(callFeed));
+    }
+
+    if (callFeed) {
+      callFeed.on(CallFeedEvent.Speaking, onSpeaking);
+      callFeed.on(CallFeedEvent.MuteStateChanged, onMuteStateChanged);
+      callFeed.on(CallFeedEvent.NewStream, onUpdateCallFeed);
+    }
+
+    onUpdateCallFeed();
+
+    return () => {
+      if (callFeed) {
+        callFeed.removeListener(CallFeedEvent.Speaking, onSpeaking);
+        callFeed.removeListener(
+          CallFeedEvent.MuteStateChanged,
+          onMuteStateChanged
+        );
+        callFeed.removeListener(CallFeedEvent.NewStream, onUpdateCallFeed);
+      }
+    };
+  }, [callFeed]);
+
+  return state;
+}
--- a/src/video-grid/useMediaStream.js
+++ b/src/video-grid/useMediaStream.js
@@ -0,0 +1,48 @@
+import { useRef, useEffect } from "react";
+
+export function useMediaStream(stream, audioOutputDevice, mute = false) {
+  const mediaRef = useRef();
+
+  useEffect(() => {
+    console.log(
+      `useMediaStream update stream mediaRef.current ${!!mediaRef.current} stream ${
+        stream && stream.id
+      }`
+    );
+
+    if (mediaRef.current) {
+      if (stream) {
+        mediaRef.current.muted = mute;
+        mediaRef.current.srcObject = stream;
+        mediaRef.current.play();
+      } else {
+        mediaRef.current.srcObject = null;
+      }
+    }
+  }, [stream, mute]);
+
+  useEffect(() => {
+    if (
+      mediaRef.current &&
+      audioOutputDevice &&
+      mediaRef.current !== undefined
+    ) {
+      console.log(`useMediaStream setSinkId ${audioOutputDevice}`);
+      mediaRef.current.setSinkId(audioOutputDevice);
+    }
+  }, [audioOutputDevice]);
+
+  useEffect(() => {
+    const mediaEl = mediaRef.current;
+
+    return () => {
+      if (mediaEl) {
+        // Ensure we set srcObject to null before unmounting to prevent memory leak
+        // https://webrtchacks.com/srcobject-intervention/
+        mediaEl.srcObject = null;
+      }
+    };
+  }, []);
+
+  return mediaRef;
+}
--- a/src/video-grid/useRoomMemberName.js
+++ b/src/video-grid/useRoomMemberName.js
@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+
+export function useRoomMemberName(member) {
+  const [state, setState] = useState({
+    name: member.name,
+    rawDisplayName: member.rawDisplayName,
+  });
+
+  useEffect(() => {
+    function updateName() {
+      setState({ name: member.name, rawDisplayName: member.rawDisplayName });
+    }
+
+    updateName();
+
+    member.on("RoomMember.name", updateName);
+
+    return () => {
+      member.removeListener("RoomMember.name", updateName);
+    };
+  }, [member]);
+
+  return state;
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -24,6 +24,9 @@ export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());

  return {
+    build: {
+      sourcemap: true,
+    },
    plugins: [
      svgrPlugin(),
      htmlTemplate({
@@ -36,16 +39,8 @@ export default defineConfig(({ mode }) => {
      proxy: {
        "/_matrix": env.VITE_DEFAULT_HOMESERVER || "http://localhost:8008",
      },
-      fs: {
-        // Current we're bundling files linked in from matrix-react-sdk
-        // We should re-enable this if we plan to run Vite outside the dev server mode
-        strict: false,
-      },
    },
    resolve: {
-      alias: {
-        "$(res)": path.resolve(__dirname, "node_modules/matrix-react-sdk/res"),
-      },
      dedupe: [
        "react",
        "react-dom",
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
David Baker	dbef06269b	Merge pull request #310 from vector-im/ptt Add feature-flagged support for Radio/PTT Mode	2022-05-04 11:40:26 +01:00
David Baker	894815268a	Merge remote-tracking branch 'origin/main' into ptt	2022-05-04 11:37:52 +01:00
David Baker	8ecec0bc7e	3 more warnings in the PTT stuff	2022-05-04 11:35:33 +01:00
David Baker	66839e02f6	Add ESLint support too	2022-05-04 11:35:15 +01:00
David Baker	bad8f36bf5	Add prettier support + CI to check formatting, and fix the couple of instances that were not in prettier format (case in HTML clour codes).	2022-05-04 11:35:15 +01:00
Robert Long	f5c50230a9	Enable source-maps	2022-05-04 11:34:28 +01:00
David Baker	0136fd3cab	Run prettier	2022-05-04 11:24:25 +01:00
Robert Long	2d18953344	Merge pull request #309 from vector-im/dbkr/prettier Add prettier & ESLint support	2022-05-03 10:36:08 -07:00
Robert Long	d930ab869a	Merge pull request #308 from vector-im/dbkr/ptt_enable_flag Put PTT behind 'feature flag'	2022-05-03 10:34:01 -07:00
Robert Long	dbdb82bd74	Switch to useShouldShowPtt hook	2022-05-03 10:32:06 -07:00
David Baker	61309bacd9	Add ESLint support too	2022-05-03 15:32:16 +01:00
David Baker	b3e88d33a7	Add prettier support + CI to check formatting, and fix the couple of instances that were not in prettier format (case in HTML clour codes).	2022-05-03 14:24:04 +01:00
David Baker	73fda641c8	Switch js-sdk depdendency back to group-call branch	2022-05-03 13:19:57 +01:00
David Baker	be01a4bd81	Commit missed file	2022-05-03 12:05:40 +01:00
David Baker	0814e3c905	Revert unintentional commit	2022-05-03 12:05:22 +01:00
Robert Long	c7dd2e2093	Merge pull request #307 from vector-im/dbkr/fix_toggle Fix toggle button toggling	2022-05-02 11:30:05 -07:00
Robert Long	cfa525f957	Merge pull request #306 from vector-im/dbkr/button_for_ptt Wire up pressing the PTT button to unmute as well as spacebar	2022-05-02 11:28:00 -07:00
David Baker	43d579744f	Put PTT behind 'feature flag' AKA does the URL hash start with '#ptt' This will let us merge PTT back to the main branch	2022-04-29 19:25:00 +01:00
David Baker	48a008093b	Fix toggle button toggling Just use isSelected directly rather than makking the button have its own state. Also, the isPressed from useToggleButton looks like its whether the user has the mouse button down on it or not rather than whether the toggle switch is on, which was making the state wrong.	2022-04-29 19:08:32 +01:00
David Baker	70c099c4b5	Wire up pressing the PTT button to unmute as well as spacebar	2022-04-29 18:56:17 +01:00
Robert Long	363f2340a0	Finish basic ptt implemenation	2022-04-28 17:44:50 -07:00
Robert Long	3a6346aa63	Create a voice group call when using ptt	2022-04-28 11:13:20 -07:00
Robert Long	9ef9680e07	Fix PTT button alignment	2022-04-28 11:13:01 -07:00
Robert Long	e3cec93669	Add basic mobile styling	2022-04-27 17:19:58 -07:00
Robert Long	b6c926d2c8	Additional in-room PTT styling	2022-04-27 16:47:23 -07:00
Robert Long	c430ebb3a3	Finish first pass at PTT lobby UI	2022-04-27 15:18:55 -07:00
Robert Long	ae13814449	Merge pull request #305 from vector-im/enable-source-maps Enable source-maps	2022-04-27 13:51:40 -07:00
Robert Long	dc75c1cfb4	Enable source-maps	2022-04-27 12:11:59 -07:00
Robert Long	38f9a79bd3	Initial PTT designs	2022-04-22 18:05:48 -07:00
Robert Long	fc1aaf02bf	Use dbkr/ptt matrix-js-sdk package	2022-04-22 11:15:39 -07:00
Robert Long	c05b6c5118	Merge pull request #291 from vector-im/remove-matrix-react-sdk-dep Remove dependency on matrix-react-sdk	2022-04-07 15:43:55 -07:00
Robert Long	72197c1a0a	Remove dependency on matrix-react-sdk	2022-04-07 14:22:36 -07:00
Robert Long	46bcb8ac75	Merge pull request #285 from vector-im/fix-title Fix Title	2022-03-29 11:15:42 -07:00
Robert Long	2ba1bab82d	Fix title	2022-03-29 11:14:31 -07:00
Matthew Hodgson	3c56f7f481	Merge pull request #274 from vector-im/travis/idea-gitignore Add .idea to gitignore	2022-03-20 11:03:15 +00:00
Travis Ralston	fcd8a41fc9	Add .idea to gitignore For those of us using WebStorm	2022-03-16 13:44:38 -06:00
Matthew Hodgson	35f8b1ed85	link to #webrtc:matrix.org	2022-03-04 14:55:24 +00:00
Matthew Hodgson	7969e13fc1	copyright	2022-03-04 14:50:36 +00:00
Matthew Hodgson	4d433ab22d	more renaming	2022-03-04 14:48:57 +00:00
Matthew Hodgson	d7f46607ad	link 3401	2022-03-04 14:48:21 +00:00
Matthew Hodgson	1e59390599	s/matrix-video-chat/element-call/	2022-03-04 14:47:44 +00:00