Merge pull request #1611 from vector-im/dbkr/depthlimit

Re-enable livekit rageshake logging & with depth limit

.eslintrc.cjs

@@ -33,6 +33,8 @@ module.exports = {
       rules: {
         // We're aiming to convert this code to strict mode
         "@typescript-eslint/no-non-null-assertion": "off",
+        // We should use the js-sdk logger, never console directly.
+        "no-console": ["error"],
       },
     },
   ],

.github/workflows/netlify-fullmesh.yaml

@@ -60,7 +60,7 @@ jobs:
 
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v1.2.4
+        uses: nwtgck/actions-netlify@v2.1.0
         with:
           publish-dir: dist
           deploy-message: "Deploy from GitHub Actions"

.github/workflows/netlify-livekit.yaml

@@ -60,7 +60,7 @@ jobs:
 
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v1.2.4
+        uses: nwtgck/actions-netlify@v2.1.0
         with:
           publish-dir: dist
           deploy-message: "Deploy from GitHub Actions"

.github/workflows/netlify-pr.yaml

@@ -53,7 +53,7 @@ jobs:
 
       - name: ☁️ Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v1.2
+        uses: nwtgck/actions-netlify@v2.1
         with:
           publish-dir: webapp
           deploy-message: "Deploy from GitHub Actions"

.github/workflows/triage-incoming.yaml

@@ -1,27 +0,0 @@
-name: Move new issues into triage board
-
-on:
-  issues:
-    types: [opened]
-
-jobs:
-  add-to-project:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: octokit/graphql-action@v2.x
-        id: add_to_project
-        with:
-          headers: '{"GraphQL-Features": "projects_next_graphql"}'
-          query: |
-            mutation add_to_project($projectid:ID!,$contentid:ID!) {
-              addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
-                item {
-                  id
-                }
-              }
-            }
-          projectid: ${{ env.PROJECT_ID }}
-          contentid: ${{ github.event.issue.node_id }}
-        env:
-          PROJECT_ID: "PVT_kwDOAM0swc4AH1sa"
-          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

package.json

@@ -47,28 +47,28 @@
     "@sentry/react": "^6.13.3",
     "@sentry/tracing": "^6.13.3",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^0.0.5",
+    "@vector-im/compound-design-tokens": "^0.0.6",
     "@vector-im/compound-web": "^0.4.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "classnames": "^2.3.1",
     "events": "^3.3.0",
-    "i18next": "^21.10.0",
-    "i18next-browser-languagedetector": "^6.1.8",
-    "i18next-http-backend": "^1.4.4",
+    "i18next": "^23.0.0",
+    "i18next-browser-languagedetector": "^7.0.0",
+    "i18next-http-backend": "^2.0.0",
     "livekit-client": "^1.12.3",
     "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#6836720e1e1c2cb01d49d6e5fcfc01afc14834ca",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#6385c9c0dab8fe67bd3a8992a4777f243fdd1b68",
     "matrix-widget-api": "^1.3.1",
     "mermaid": "^9.0.0",
     "normalize.css": "^8.0.1",
     "pako": "^2.0.4",
-    "postcss-preset-env": "^7",
+    "postcss-preset-env": "^9.0.0",
     "posthog-js": "^1.29.0",
     "re-resizable": "^6.9.0",
     "react": "18",
     "react-dom": "18",
-    "react-i18next": "^11.18.6",
+    "react-i18next": "^13.0.0",
     "react-json-view": "^1.21.3",
     "react-router-dom": "^5.2.0",
     "react-use-clipboard": "^1.0.7",
@@ -85,13 +85,14 @@
     "@react-types/dialog": "^3.5.5",
     "@sentry/vite-plugin": "^2.0.0",
     "@storybook/react": "^6.5.0-alpha.5",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@types/content-type": "^1.1.5",
     "@types/d3": "^7.4.0",
     "@types/dom-screen-wake-lock": "^1.0.1",
     "@types/dompurify": "^3.0.2",
     "@types/grecaptcha": "^3.0.4",
+    "@types/jest": "^29.5.5",
     "@types/node": "^18.13.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/request": "^2.48.8",
@@ -109,7 +110,7 @@
     "eslint-plugin-matrix-org": "^0.4.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "i18next-parser": "^6.6.0",
+    "i18next-parser": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.2.2",
     "jest-environment-jsdom": "^29.3.1",

public/locales/de/app.json

@@ -121,5 +121,6 @@
   "Mute microphone": "Mikrofon deaktivieren",
   "Start new call": "Neuen Anruf beginnen",
   "Call not found": "Anruf nicht gefunden",
-  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Anrufe sind nun Ende-zu-Ende-verschlüsselt und müssen auf der Startseite erstellt werden. Damit stellen wir sicher, dass alle denselben Schlüssel verwenden."
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Anrufe sind nun Ende-zu-Ende-verschlüsselt und müssen auf der Startseite erstellt werden. Damit stellen wir sicher, dass alle denselben Schlüssel verwenden.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Dein Webbrowser unterstützt keine Medien-Ende-zu-Ende-Verschlüsselung. Unterstützte Browser sind Chrome, Safari, Firefox >=117"
 }

public/locales/et/app.json

@@ -77,7 +77,7 @@
   "Submit": "Saada",
   "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Kui selle rakenduse kasutamisel tekib sul probleeme või lihtsalt soovid oma arvamust avaldada, siis palun täida alljärgnev lühike kirjeldus.",
   "Feedback": "Tagasiside",
-  "{{count}} stars|one": "{{count}} tärn",
+  "{{count}} stars|one": "{{count}} tärni",
   "{{count}} stars|other": "{{count}} tärni",
   "How did it go?": "Kuidas sujus?",
   "{{displayName}}, your call has ended.": "{{displayName}}, sinu kõne on lõppenud.",
@@ -107,5 +107,20 @@
   "Sharing screen": "Ekraanivaade on jagamisel",
   "{{count, number}}|one": "{{count, number}}",
   "{{count, number}}|other": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}"
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
+  "You": "Sina",
+  "Continue in browser": "Jätka veebibrauseris",
+  "Mute microphone": "Summuta mikrofon",
+  "Name of call": "Kõne nimi",
+  "Open in the app": "Ava rakenduses",
+  "Ready to join?": "Oled valmis liituma?",
+  "Select app": "Vali rakendus",
+  "Start new call": "Algata uus kõne",
+  "Back to recents": "Tagasi hiljutiste kõnede juurde",
+  "Stop video": "Peata videovoog",
+  "Start video": "Lülita videovoog sisse",
+  "Unmute microphone": "Lülita mikrofon sisse",
+  "Call not found": "Kõnet ei leidu",
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Kõned on nüüd läbivalt krüptitud ning need pead looma kodulehelt. Sellega tagad, et kõik kasutavad samu krüptovõtmeid.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Sinu veebibrauser ei toeta meedia läbivat krüptimist. Toetatud brauserid on Chrome, Chromium, Safari ja Firefox >=117"
 }

public/locales/fr/app.json

@@ -52,7 +52,7 @@
   "Sign in": "Connexion",
   "Sign out": "Déconnexion",
   "Spotlight": "Premier plan",
-  "Submit feedback": "Envoyer des retours",
+  "Submit feedback": "Envoyer un commentaire",
   "This call already exists, would you like to join?": "Cet appel existe déjà, voulez-vous le rejoindre ?",
   "Yes, join call": "Oui, rejoindre l’appel",
   "Waiting for other participants…": "En attente d’autres participants…",
@@ -75,7 +75,7 @@
   "Thanks, we received your feedback!": "Merci, nous avons reçu vos commentaires !",
   "Submitting…": "Envoi…",
   "Submit": "Envoyer",
-  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Si vous rencontrez des problèmes, ou vous voulez simplement faire un commentaire, veuillez nous envoyer une courte description ci-dessous.",
+  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Si vous rencontrez des problèmes, ou vous voulez simplement faire un commentaire, faites-en une courte description ci-dessous.",
   "Feedback": "Commentaires",
   "{{count}} stars|other": "{{count}} favoris",
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Nous aimerions avoir vos commentaires afin que nous puissions améliorer votre expérience.</0>",
@@ -116,10 +116,11 @@
   "Ready to join?": "Prêt à rejoindre ?",
   "Select app": "Choisissez l’application",
   "Start new call": "Démarrer un nouvel appel",
-  "Back to recents": "Revenir aux récents",
+  "Back to recents": "Revenir à l’historique des appels",
   "Start video": "Démarrer la vidéo",
   "Stop video": "Arrêter la vidéo",
   "Unmute microphone": "Allumer le microphone",
   "Call not found": "Appel non trouvé",
-  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Les appels sont maintenant chiffrés de bout-en-bout et doivent être créés depuis la page d’accueil. Cela permet d’être sûr que tout le monde utilise la même clé de chiffrement."
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Les appels sont maintenant chiffrés de bout-en-bout et doivent être créés depuis la page d’accueil. Cela permet d’être sûr que tout le monde utilise la même clé de chiffrement.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Votre navigateur web ne prend pas en charge le chiffrement de bout-en-bout des médias. Les navigateurs pris en charge sont Chrome, Safari, Firefox >= 117"
 }

public/locales/id/app.json

@@ -121,5 +121,6 @@
   "Unmute microphone": "Nyalakan mikrofon",
   "Back to recents": "Kembali ke terkini",
   "Call not found": "Panggilan tidak ditemukan",
-  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Panggilan sekarang terenkripsi secara ujung ke ujung dan harus dibuat dari laman beranda. Ini memastikan bahwa semuanya menggunakan kunci enkripsi yang sama."
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Panggilan sekarang terenkripsi secara ujung ke ujung dan harus dibuat dari laman beranda. Ini memastikan bahwa semuanya menggunakan kunci enkripsi yang sama.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Peramban web Anda tidak mendukung enkripsi media ujung ke ujung. Peramban yang didukung adalah Chrome, Safari, dan Firefox >=117"
 }

public/locales/sk/app.json

@@ -121,5 +121,6 @@
   "Back to recents": "Späť k nedávnym",
   "Unmute microphone": "Zrušiť stlmenie mikrofónu",
   "Call not found": "Hovor nebol nájdený",
-  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Hovory sú teraz end-to-end šifrované a je potrebné ich vytvoriť z domovskej stránky. To pomáha zabezpečiť, aby všetci používali rovnaký šifrovací kľúč."
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Hovory sú teraz end-to-end šifrované a je potrebné ich vytvoriť z domovskej stránky. To pomáha zabezpečiť, aby všetci používali rovnaký šifrovací kľúč.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Váš webový prehliadač nepodporuje end-to-end šifrovanie médií. Podporované prehliadače sú Chrome, Safari, Firefox >=117"
 }

public/locales/uk/app.json

@@ -121,5 +121,6 @@
   "Start new call": "Розпочати новий виклик",
   "Back to recents": "Повернутися до недавніх",
   "Call not found": "Виклик не знайдено",
-  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Відтепер виклики захищено наскрізним шифруванням, і їх потрібно створювати з домашньої сторінки. Це допомагає переконатися, що всі користувачі використовують один і той самий ключ шифрування."
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Відтепер виклики захищено наскрізним шифруванням, і їх потрібно створювати з домашньої сторінки. Це допомагає переконатися, що всі користувачі використовують один і той самий ключ шифрування.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Ваш браузер не підтримує наскрізне шифрування мультимедійних даних. Підтримувані браузери: Chrome, Safari, Firefox >=117"
 }

public/locales/zh-Hant/app.json

@@ -121,5 +121,6 @@
   "Stop video": "停止影片",
   "Unmute microphone": "將麥克風取消靜音",
   "Call not found": "找不到通話",
-  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "通話現在是端對端加密的，必須從首頁建立。這有助於確保每個人都使用相同的加密金鑰。"
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "通話現在是端對端加密的，必須從首頁建立。這有助於確保每個人都使用相同的加密金鑰。",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "您的網路瀏覽器不支援媒體端到端加密。支援的瀏覽器包含了 Chrome、Safari、Firefox >=117"
 }

src/FullScreenView.tsx

@@ -19,6 +19,7 @@ import { useLocation } from "react-router-dom";
 import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";
 import * as Sentry from "@sentry/react";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 import { LinkButton, Button } from "./button";
@@ -57,7 +58,7 @@ export function ErrorView({ error }: ErrorViewProps) {
   const { t } = useTranslation();
 
   useEffect(() => {
-    console.error(error);
+    logger.error(error);
     Sentry.captureException(error);
   }, [error]);
 

src/auth/RegisterPage.tsx

@@ -27,6 +27,7 @@ import { useHistory, useLocation } from "react-router-dom";
 import { captureException } from "@sentry/react";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { Trans, useTranslation } from "react-i18next";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
@@ -97,7 +98,7 @@ export const RegisterPage: FC = () => {
                 await newClient.joinRoom(roomId);
               } else {
                 captureException(error);
-                console.error(`Couldn't join room ${roomId}`, error);
+                logger.error(`Couldn't join room ${roomId}`, error);
               }
             }
           }

src/auth/useRecaptcha.ts

@@ -17,6 +17,7 @@ limitations under the License.
 import { useEffect, useCallback, useRef, useState } from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useTranslation } from "react-i18next";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { translatedError } from "../TranslatedError";
 
@@ -74,7 +75,7 @@ export const useRecaptcha = (sitekey?: string) => {
     }
 
     if (!window.grecaptcha) {
-      console.log("Recaptcha not loaded");
+      logger.log("Recaptcha not loaded");
       return Promise.reject(translatedError("Recaptcha not loaded", t));
     }
 

src/home/RegisteredView.tsx

@@ -20,6 +20,7 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useTranslation } from "react-i18next";
 import { Heading } from "@vector-im/compound-web";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import {
   createRoom,
@@ -97,7 +98,7 @@ export function RegisteredView({ client }: Props) {
           setError(undefined);
           setJoinExistingCallModalOpen(true);
         } else {
-          console.error(error);
+          logger.error(error);
           setLoading(false);
           setError(error);
         }

src/home/UnauthenticatedView.tsx

@@ -19,6 +19,7 @@ import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Trans, useTranslation } from "react-i18next";
 import { Heading } from "@vector-im/compound-web";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { useClient } from "../ClientContext";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
@@ -130,7 +131,7 @@ export const UnauthenticatedView: FC = () => {
       }
 
       submit().catch((error) => {
-        console.error(error);
+        logger.error(error);
         setLoading(false);
         setError(error);
         reset();

src/livekit/useLiveKit.ts

@@ -20,7 +20,6 @@ import {
   ExternalE2EEKeyProvider,
   Room,
   RoomOptions,
-  setLogLevel,
 } from "livekit-client";
 import { useLiveKitRoom } from "@livekit/components-react";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -44,8 +43,6 @@ export type E2EEConfig = {
   sharedKey: string;
 };
 
-setLogLevel("debug");
-
 interface UseLivekitResult {
   livekitRoom?: Room;
   connState: ECConnectionState;

src/main.tsx

@@ -23,15 +23,22 @@ import "matrix-js-sdk/src/browser-index";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserHistory } from "history";
-
 import "./index.css";
+import { logger } from "matrix-js-sdk/src/logger";
+import {
+  setLogExtension as setLKLogExtension,
+  setLogLevel,
+} from "livekit-client";
+
 import App from "./App";
 import { init as initRageshake } from "./settings/rageshake";
 import { Initializer } from "./initializer";
 
 initRageshake();
+setLogLevel("debug");
+setLKLogExtension(global.mx_rage_logger.log);
 
-console.info(`Element Call ${import.meta.env.VITE_APP_VERSION || "dev"}`);
+logger.info(`Element Call ${import.meta.env.VITE_APP_VERSION || "dev"}`);
 
 const root = createRoot(document.getElementById("root")!);
 

src/matrix-utils.ts

@@ -177,7 +177,7 @@ export async function initClient(
   try {
     await client.store.startup();
   } catch (error) {
-    console.error(
+    logger.error(
       "Error starting matrix client store. Falling back to memory store.",
       error
     );

src/profile/useProfile.ts

@@ -19,6 +19,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { User, UserEvent } from "matrix-js-sdk/src/models/user";
 import { FileType } from "matrix-js-sdk/src/http-api";
 import { useState, useCallback, useEffect } from "react";
+import { logger } from "matrix-js-sdk/src/logger";
 
 interface ProfileLoadState {
   success: boolean;
@@ -127,7 +128,7 @@ export function useProfile(client: MatrixClient | undefined) {
           }));
         }
       } else {
-        console.error("Client not initialized before calling saveProfile");
+        logger.error("Client not initialized before calling saveProfile");
       }
     },
     [client]

src/room/InCallView.module.css

@@ -17,18 +17,18 @@ limitations under the License.
 .inRoom {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  min-height: 100%;
   height: 100%;
   width: 100%;
-  --footerPadding: var(--cpd-space-4x);
-  --footerHeight: calc(50px + 2 * var(--footerPadding));
 }
 
 .controlsOverlay {
   position: relative;
   flex: 1;
   display: flex;
+  flex-direction: column;
+  overflow: auto;
+  overflow-inline: hidden;
+  contain: strict;
 }
 
 .centerMessage {
@@ -45,17 +45,15 @@ limitations under the License.
 }
 
 .footer {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  box-sizing: border-box;
+  position: sticky;
+  inset-block-end: 0;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   grid-template-areas: "logo buttons layout";
   align-items: center;
   gap: var(--cpd-space-3x);
-  padding: var(--footerPadding) var(--inline-content-inset);
+  padding-block: var(--cpd-space-4x);
+  padding-inline: var(--inline-content-inset);
   background: linear-gradient(
     180deg,
     rgba(0, 0, 0, 0) 0%,
@@ -84,14 +82,14 @@ limitations under the License.
 }
 
 @media (min-height: 400px) {
-  .inRoom {
-    --footerPadding: var(--cpd-space-10x);
+  .footer {
+    padding-block: var(--cpd-space-10x);
   }
 }
 
 @media (min-height: 800px) {
-  .inRoom {
-    --footerPadding: var(--cpd-space-15x);
+  .footer {
+    padding-block: var(--cpd-space-15x);
   }
 }
 

src/room/InCallView.tsx

@@ -344,19 +344,19 @@ export function InCallView({
     const buttons: JSX.Element[] = [];
 
     buttons.push(
-      <VideoButton
-        key="2"
-        muted={!muteStates.video.enabled}
-        onPress={toggleCamera}
-        disabled={muteStates.video.setEnabled === null}
-        data-testid="incall_videomute"
-      />,
       <MicButton
         key="1"
         muted={!muteStates.audio.enabled}
         onPress={toggleMicrophone}
         disabled={muteStates.audio.setEnabled === null}
         data-testid="incall_mute"
+      />,
+      <VideoButton
+        key="2"
+        muted={!muteStates.video.enabled}
+        onPress={toggleCamera}
+        disabled={muteStates.video.setEnabled === null}
+        data-testid="incall_videomute"
       />
     );
 

src/room/LayoutToggle.module.css

@@ -18,6 +18,7 @@ limitations under the License.
   padding: 2px;
   border: 1px solid var(--cpd-color-border-interactive-secondary);
   border-radius: var(--cpd-radius-pill-effect);
+  background: var(--cpd-color-bg-canvas-default);
   box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.5);
   display: flex;
 }

src/room/LobbyView.module.css

@@ -23,7 +23,6 @@ limitations under the License.
   flex: 1;
   overflow: hidden;
   height: 100%;
-  padding-block-end: var(--footerHeight);
 }
 
 @media (max-width: 500px) {

src/room/LobbyView.tsx

@@ -129,16 +129,16 @@ export const LobbyView: FC<Props> = ({
         <div className={inCallStyles.footer}>
           {recentsButtonInFooter && recentsButton}
           <div className={inCallStyles.buttons}>
-            <VideoButton
-              muted={!muteStates.video.enabled}
-              onPress={onVideoPress}
-              disabled={muteStates.video.setEnabled === null}
-            />
             <MicButton
               muted={!muteStates.audio.enabled}
               onPress={onAudioPress}
               disabled={muteStates.audio.setEnabled === null}
             />
+            <VideoButton
+              muted={!muteStates.video.enabled}
+              onPress={onVideoPress}
+              disabled={muteStates.video.setEnabled === null}
+            />
             <SettingsButton onPress={openSettings} />
             {!confineToRoom && <HangupButton onPress={onLeaveClick} />}
           </div>

src/room/RoomAuthView.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import { useCallback, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import styles from "./RoomAuthView.module.css";
 import { Button } from "../button";
@@ -46,7 +47,7 @@ export function RoomAuthView() {
         typeof dataForDisplayName === "string" ? dataForDisplayName : "";
 
       registerPasswordlessUser(displayName).catch((error) => {
-        console.error("Failed to register passwordless user", e);
+        logger.error("Failed to register passwordless user", e);
         setLoading(false);
         setError(error);
       });

src/room/RoomPage.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import { FC, useEffect, useState, useCallback, ReactNode } from "react";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { useClientLegacy } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
@@ -37,7 +38,7 @@ export const RoomPage: FC = () => {
 
   const roomIdOrAlias = roomId ?? roomAlias;
   if (!roomIdOrAlias) {
-    console.error("No room specified");
+    logger.error("No room specified");
   }
 
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();

src/room/VideoPreview.tsx

@@ -24,6 +24,7 @@ import {
   Track,
 } from "livekit-client";
 import classNames from "classnames";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { Avatar } from "../Avatar";
 import styles from "./VideoPreview.module.css";
@@ -80,7 +81,7 @@ export const VideoPreview: FC<Props> = ({
       },
     },
     (error) => {
-      console.error("Error while creating preview Tracks:", error);
+      logger.error("Error while creating preview Tracks:", error);
     }
   );
   const videoTrack = useMemo(

src/room/useLoadGroupCall.ts

@@ -61,20 +61,41 @@ export const useLoadGroupCall = (
 
   useEffect(() => {
     const fetchOrCreateRoom = async (): Promise<Room> => {
-      // We lowercase the localpart when we create the room, so we must lowercase
-      // it here too (we just do the whole alias). We can't do the same to room IDs
-      // though.
-      const sanitisedIdOrAlias =
-        roomIdOrAlias[0] === "#" ? roomIdOrAlias.toLowerCase() : roomIdOrAlias;
+      let room: Room | null = null;
+      if (roomIdOrAlias[0] === "#") {
+        // We lowercase the localpart when we create the room, so we must lowercase
+        // it here too (we just do the whole alias). We can't do the same to room IDs
+        // though.
+        // Also, we explicitly look up the room alias here. We previously just tried to
+        // join anyway but the js-sdk recreates the room if you pass the alias for a
+        // room you're already joined to (which it probably ought not to).
+        const lookupResult = await client.getRoomIdForAlias(
+          roomIdOrAlias.toLowerCase()
+        );
+        logger.info(`${roomIdOrAlias} resolved to ${lookupResult.room_id}`);
+        room = client.getRoom(lookupResult.room_id);
+        if (!room) {
+          logger.info(`Room ${lookupResult.room_id} not found, joining.`);
+          room = await client.joinRoom(lookupResult.room_id, {
+            viaServers: lookupResult.servers,
+          });
+        } else {
+          logger.info(
+            `Already in room ${lookupResult.room_id}, not rejoining.`
+          );
+        }
+      } else {
+        // room IDs we just try to join by their ID, which will not work in the
+        // general case without providing some servers to join via. We could provide
+        // our own server, but in practice that is implicit.
+        room = await client.joinRoom(roomIdOrAlias);
+      }
 
-      const room = await client.joinRoom(sanitisedIdOrAlias, {
-        viaServers,
-      });
       logger.info(
-        `Joined ${sanitisedIdOrAlias}, waiting room to be ready for group calls`
+        `Joined ${roomIdOrAlias}, waiting room to be ready for group calls`
       );
       await client.waitUntilRoomReadyForGroupCalls(room.roomId);
-      logger.info(`${sanitisedIdOrAlias}, is ready for group calls`);
+      logger.info(`${roomIdOrAlias}, is ready for group calls`);
       return room;
     };
 

src/settings/rageshake.ts

@@ -50,15 +50,13 @@ const MAX_LOG_SIZE = 1024 * 1024 * 5; // 5 MB
 // we can batch the writes a little.
 const MAX_FLUSH_INTERVAL_MS = 2 * 1000;
 
+// only descend this far into nested object trees
+const DEPTH_LIMIT = 3;
+
 enum ConsoleLoggerEvent {
   Log = "log",
 }
 
-type LogFunction = (
-  ...args: (Error | DOMException | object | string)[]
-) => void;
-type LogFunctionName = "log" | "info" | "warn" | "error";
-
 // A class which monkey-patches the global console and stores log lines.
 
 interface LogEntry {
@@ -69,37 +67,11 @@ interface LogEntry {
 
 class ConsoleLogger extends EventEmitter {
   private logs = "";
-  private originalFunctions: { [key in LogFunctionName]?: LogFunction } = {};
 
-  public monkeyPatch(consoleObj: Console): void {
-    // Monkey-patch console logging
-    const consoleFunctionsToLevels = {
-      log: "I",
-      info: "I",
-      warn: "W",
-      error: "E",
-    };
-
-    Object.entries(consoleFunctionsToLevels).forEach(([name, level]) => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      const originalFn = consoleObj[name].bind(consoleObj);
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      this.originalFunctions[name] = originalFn;
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      consoleObj[name] = (...args) => {
-        this.log(level, ...args);
-        originalFn(...args);
-      };
-    });
-  }
-
-  public log(
-    level: string,
-    ...args: (Error | DOMException | object | string)[]
-  ): void {
+  public log = (
+    level: LogLevel,
+    ...args: (Error | DOMException | object | string | undefined)[]
+  ): void => {
     // We don't know what locale the user may be running so use ISO strings
     const ts = new Date().toISOString();
 
@@ -129,7 +101,7 @@ class ConsoleLogger extends EventEmitter {
     this.logs += line;
 
     this.emit(ConsoleLoggerEvent.Log);
-  }
+  };
 
   /**
    * Returns the log lines to flush to disk and empties the internal log buffer
@@ -510,7 +482,7 @@ declare global {
  */
 export function init(): Promise<void> {
   global.mx_rage_logger = new ConsoleLogger();
-  global.mx_rage_logger.monkeyPatch(window.console);
+  setLogExtension(global.mx_rage_logger.log);
 
   return tryInitStorage();
 }
@@ -581,13 +553,61 @@ type StringifyReplacer = (
 // Injects `<$ cycle-trimmed $>` wherever it cuts a cyclical object relationship
 const getCircularReplacer = (): StringifyReplacer => {
   const seen = new WeakSet();
-  return (key: string, value: unknown): unknown => {
+  const depthMap = new WeakMap<object, number>();
+  return function (this: unknown, key: string, value: unknown): unknown {
     if (typeof value === "object" && value !== null) {
       if (seen.has(value)) {
         return "<$ cycle-trimmed $>";
       }
       seen.add(value);
+
+      let depth = 0;
+      if (this) {
+        depth = depthMap.get(this) ?? 0;
+      }
+      depthMap.set(value, depth + 1);
+
+      if (depth > DEPTH_LIMIT) return "<$ object-pruned $>";
     }
     return value;
   };
 };
+
+enum LogLevel {
+  trace = 0,
+  debug = 1,
+  info = 2,
+  warn = 3,
+  error = 4,
+  silent = 5,
+}
+
+type LogExtensionFunc = (
+  level: LogLevel,
+  ...rest: (Error | DOMException | object | string)[]
+) => void;
+type LogLevelString = keyof typeof LogLevel;
+
+/**
+ * This method borrowed from livekit (who also use loglevel and in turn essentially
+ * took loglevel's example honouring log levels). Adds a loglevel logging extension
+ * in the recommended way.
+ */
+export function setLogExtension(extension: LogExtensionFunc) {
+  const originalFactory = logger.methodFactory;
+
+  logger.methodFactory = function (methodName, configLevel, loggerName) {
+    const rawMethod = originalFactory(methodName, configLevel, loggerName);
+
+    const logLevel = LogLevel[methodName as LogLevelString];
+    const needLog = logLevel >= configLevel && logLevel < LogLevel.silent;
+
+    return (...args) => {
+      rawMethod.apply(this, args);
+      if (needLog) {
+        extension(logLevel, ...args);
+      }
+    };
+  };
+  logger.setLevel(logger.getLevel()); // Be sure to call setLevel method in order to apply plugin
+}

src/settings/submit-rageshake.ts

@@ -26,6 +26,7 @@ import {
 import pako from "pako";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { ClientEvent } from "matrix-js-sdk/src/client";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { getLogsForReport } from "./rageshake";
 import { useClient } from "../ClientContext";
@@ -296,7 +297,7 @@ export function useSubmitRageshake(): {
         setState({ sending: false, sent: true, error: undefined });
       } catch (error) {
         setState({ sending: false, sent: false, error: error as Error });
-        console.error(error);
+        logger.error(error);
       }
     },
     [client, inspectorState, sending]

src/video-grid/NewVideoGrid.module.css

@@ -15,14 +15,11 @@ limitations under the License.
 */
 
 .grid {
-  contain: strict;
+  contain: layout style;
   position: relative;
   flex-grow: 1;
   margin-inline: var(--inline-content-inset);
-  padding-block-end: var(--footerHeight);
-  margin-block-start: var(--cpd-space-4x);
-  overflow-y: auto;
-  overflow-x: hidden;
+  margin-block: var(--cpd-space-4x);
 }
 
 .slots {

src/video-grid/VideoGrid.module.css

@@ -19,5 +19,4 @@ limitations under the License.
   overflow: hidden;
   flex: 1;
   touch-action: none;
-  margin-bottom: var(--footerHeight);
 }

src/video-grid/VideoGrid.tsx

@@ -38,6 +38,7 @@ import {
 } from "@react-spring/web";
 import useMeasure from "react-use-measure";
 import { ResizeObserver as JuggleResizeObserver } from "@juggle/resize-observer";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import styles from "./VideoGrid.module.css";
 import { Layout } from "../room/LayoutToggle";
@@ -298,7 +299,7 @@ function getFreedomLayoutTilePositions(
   }
 
   if (tileCount > 12) {
-    console.warn("Over 12 tiles is not currently supported");
+    logger.warn("Over 12 tiles is not currently supported");
   }
 
   const { layoutDirection, itemGridRatio } = getGridLayout(

src/video-grid/VideoTile.module.css

@@ -43,7 +43,8 @@ limitations under the License.
 }
 
 .videoTile.speaking {
-  outline: 4px solid var(--cpd-color-border-accent);
+  /* !important because speaking border should take priority over hover */
+  outline: 4px solid var(--cpd-color-border-accent) !important;
 }
 
 @media (hover: hover) {