Merge branch 'livekit' into eslint-upgrade

.eslintrc.cjs

@@ -37,6 +37,8 @@ module.exports = {
     "matrix-org/require-copyright-header": ["error", COPYRIGHT_HEADER],
     "jsx-a11y/media-has-caption": "off",
     "deprecate/import": "off", // Disabled because it crashes the linter
+    // We should use the js-sdk logger, never console directly.
+    "no-console": ["error"],
   },
   settings: {
     react: {

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

@@ -75,7 +75,7 @@ jobs:
         uses: docker/setup-buildx-action@dedd61cf5d839122591f5027c89bf3ad27691d18
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@4c1b68d83ad20cc1a09620ca477d5bbbb5fa14d0
+        uses: docker/build-push-action@0f847266c302569530c95bfa228489494c43b002
         with:
           context: .
           platforms: linux/amd64,linux/arm64

i18next-parser.config.js

@@ -18,5 +18,6 @@ export default {
   output: "public/locales/$LOCALE/$NAMESPACE.json",
   input: ["src/**/*.{ts,tsx}"],
   sort: true,
-  useKeysAsDefaultValue: true,
+  // The key becomes the English version of the string
+  defaultValue: (_l, _ns, key) => key,
 };

package.json

@@ -5,8 +5,6 @@
     "dev": "vite",
     "build": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
     "serve": "vite preview",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
     "prettier:check": "prettier -c .",
     "prettier:format": "prettier -w .",
     "lint": "yarn lint:types && yarn lint:eslint",
@@ -44,32 +42,31 @@
     "@react-stately/select": "^3.1.3",
     "@react-stately/tooltip": "^3.0.5",
     "@react-stately/tree": "^3.2.0",
-    "@sentry/react": "^6.13.3",
+    "@sentry/react": "^7.0.0",
-    "@sentry/tracing": "^6.13.3",
+    "@sentry/tracing": "^7.0.0",
+    "@types/lodash": "^4.14.199",
     "@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",
+    "@vector-im/compound-web": "^0.5.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
+    "buffer": "^6.0.3",
     "classnames": "^2.3.1",
     "events": "^3.3.0",
-    "i18next": "^21.10.0",
+    "i18next": "^23.0.0",
-    "i18next-browser-languagedetector": "^6.1.8",
+    "i18next-browser-languagedetector": "^7.0.0",
-    "i18next-http-backend": "^1.4.4",
+    "i18next-http-backend": "^2.0.0",
     "livekit-client": "^1.12.3",
     "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#6385c9c0dab8fe67bd3a8992a4777f243fdd1b68",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#c8f8fb587d29dce22d314bfc16bf25a76b04e8bb",
     "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",
     "react-use-measure": "^2.1.1",
@@ -77,21 +74,25 @@
     "tinyqueue": "^2.0.3",
     "unique-names-generator": "^4.6.0",
     "uuid": "9",
-    "vaul": "^0.6.1"
+    "vaul": "^0.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.0",
     "@react-spring/rafz": "^9.7.3",
     "@react-types/dialog": "^3.5.5",
     "@sentry/vite-plugin": "^2.0.0",
-    "@storybook/react": "^6.5.0-alpha.5",
+    "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@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",
@@ -111,19 +112,18 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-unicorn": "^48.0.1",
-    "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",
     "jest-mock": "^29.5.0",
     "prettier": "^2.6.2",
     "sass": "^1.42.1",
-    "storybook-builder-vite": "^0.1.12",
     "typescript": "^5.1.6",
     "typescript-eslint-language-service": "^5.0.5",
     "vite": "^4.2.0",
     "vite-plugin-html-template": "^1.1.0",
-    "vite-plugin-svgr": "^3.2.0"
+    "vite-plugin-svgr": "^4.0.0"
   },
   "jest": {
     "testEnvironment": "./test/environment.ts",
@@ -136,7 +136,7 @@
     ],
     "moduleNameMapper": {
       "\\.css$": "identity-obj-proxy",
-      "\\.svg$": "<rootDir>/test/mocks/svgr.ts",
+      "\\.svg\\?react$": "<rootDir>/test/mocks/svgr.ts",
       "^\\./IndexedDBWorker\\?worker$": "<rootDir>/test/mocks/workerMock.ts",
       "^\\./olm$": "<rootDir>/test/mocks/olmMock.ts"
     },

public/.well-known/apple-app-site-association

@@ -0,0 +1,26 @@
+{
+  "applinks": {
+    "details": [
+      {
+        "appIDs": [
+          "7J4U792NQT.io.element.elementx",
+          "7J4U792NQT.io.element.elementx.nightly",
+          "7J4U792NQT.io.element.elementx.pr"
+        ],
+        "components": [
+          {
+            "?": {
+              "no_universal_links": "?*"
+            },
+            "exclude": true,
+            "comment": "Opt out of universal links"
+          },
+          {
+            "/": "/*",
+            "comment": "Matches any URL"
+          }
+        ]
+      }
+    ]
+  }
+}

public/apple-app-site-association

@@ -1,15 +0,0 @@
-{
-  "applinks": {
-    "apps": [],
-    "details": [
-      {
-        "appIDs": [
-          "7J4U792NQT.io.element.elementx",
-          "7J4U792NQT.io.element.elementx.nightly",
-          "7J4U792NQT.io.element.elementx.pr"
-        ],
-        "paths": ["*"]
-      }
-    ]
-  }
-}

public/locales/bg/app.json

@@ -9,19 +9,15 @@
   "Close": "Затвори",
   "Confirm password": "Потвърди паролата",
   "Copied!": "Копирано!",
-  "Copy and share this call link": "Копирай и сподели връзка към разговора",
   "Create account": "Създай акаунт",
-  "Debug log": "Debug логове",
   "Debug log request": "Заявка за debug логове",
   "Developer": "Разработчик",
   "Display name": "Име/псевдоним",
-  "Download debug logs": "Изтеглете debug логове",
   "Exit full screen": "Излез от цял екран",
   "Full screen": "Цял екран",
   "Go": "Напред",
   "Home": "Начало",
   "Include debug logs": "Включи debug логове",
-  "Inspector": "Инспектор",
   "Join call": "Влез в разговора",
   "Join call now": "Влез в разговора сега",
   "Join existing call?": "Присъединяване към съществуващ разговор?",
@@ -49,7 +45,6 @@
   "Sending…": "Изпращане…",
   "Settings": "Настройки",
   "Share screen": "Сподели екрана",
-  "Show call inspector": "Покажи инспектора на разговора",
   "Sign in": "Влез",
   "Sign out": "Излез",
   "Speaker": "Говорител",

public/locales/cs/app.json

@@ -1,5 +1,4 @@
 {
-  "Copy and share this call link": "Zkopírujte a sdílejte odkaz na hovor",
   "Copied!": "Zkopírováno!",
   "Confirm password": "Potvrdit heslo",
   "Close": "Zavřít",
@@ -18,7 +17,6 @@
   "Speaker": "Reproduktor",
   "Sign out": "Odhlásit se",
   "Sign in": "Přihlásit se",
-  "Show call inspector": "Zobrazit inspektor hovoru",
   "Share screen": "Sdílet obrazovku",
   "Settings": "Nastavení",
   "Sending…": "Posílání…",
@@ -43,7 +41,6 @@
   "Loading…": "Načítání…",
   "Join call now": "Připojit se k hovoru",
   "Join call": "Připojit se k hovoru",
-  "Inspector": "Insepktor",
   "Spotlight": "Soustředěný mód",
   "Recaptcha not loaded": "Recaptcha se nenačetla",
   "Recaptcha dismissed": "Recaptcha byla zamítnuta",
@@ -55,11 +52,9 @@
   "Full screen": "Zvětšit na celou obrazovku",
   "Exit full screen": "Ukončit režim celé obrazovky",
   "Element Call Home": "Domov Element Call",
-  "Download debug logs": "Stáhnout ladící záznamy",
   "Display name": "Zobrazované jméno",
   "Developer": "Vývojář",
   "Debug log request": "Žádost o protokoly ladění",
-  "Debug log": "Protokoly ladění",
   "Create account": "Vytvořit účet",
   "Copy": "Kopírovat",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Jiný uživatel v tomto hovoru má problémy. Abychom mohli diagnostikovat problém, rádi bychom shromáždili protokoly ladění.",

public/locales/de/app.json

@@ -9,19 +9,15 @@
   "Close": "Schließen",
   "Confirm password": "Passwort bestätigen",
   "Copied!": "Kopiert!",
-  "Copy and share this call link": "Kopiere und teile diesen Anruflink",
   "Create account": "Konto erstellen",
-  "Debug log": "Debug-Protokoll",
   "Debug log request": "Debug-Log Anfrage",
   "Developer": "Entwickler",
   "Display name": "Anzeigename",
-  "Download debug logs": "Debug-Protokolle herunterladen",
   "Exit full screen": "Vollbildmodus verlassen",
   "Full screen": "Vollbild",
   "Go": "Los geht’s",
   "Home": "Startseite",
   "Include debug logs": "Debug-Protokolle einschließen",
-  "Inspector": "Inspektor",
   "Join call": "Anruf beitreten",
   "Join call now": "Anruf beitreten",
   "Join existing call?": "An bestehendem Anruf teilnehmen?",
@@ -49,7 +45,6 @@
   "Sending…": "Senden …",
   "Settings": "Einstellungen",
   "Share screen": "Bildschirm teilen",
-  "Show call inspector": "Anrufinspektor anzeigen",
   "Sign in": "Anmelden",
   "Sign out": "Abmelden",
   "Speaker": "Wiedergabegerät",
@@ -104,9 +99,6 @@
   "Microphone on": "Mikrofon an",
   "{{count, number}}|one": "{{count, number}}",
   "{{count, number}}|other": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
-  "Share": "Teilen",
-  "Share this call": "Diesen Anruf teilen",
   "Sharing screen": "Bildschirm wird geteilt",
   "You": "Du",
   "Continue in browser": "Weiter im Browser",
@@ -122,5 +114,10 @@
   "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.",
-  "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"
+  "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",
+  "Copy link": "Link kopieren",
+  "Invite": "Einladen",
+  "Invite to this call": "Zu diesem Anruf einladen",
+  "Link copied to clipboard": "Link in Zwischenablage kopiert",
+  "Participants": "Teilnehmende"
 }

public/locales/el/app.json

@@ -3,7 +3,6 @@
   "User menu": "Μενού χρήστη",
   "Submit feedback": "Υποβάλετε σχόλια",
   "Sign in": "Σύνδεση",
-  "Show call inspector": "Εμφάνιση του επιθεωρητή κλήσης",
   "Share screen": "Κοινή χρήση οθόνης",
   "Sending…": "Αποστολή…",
   "Select an option": "Επιλέξτε μια επιλογή",
@@ -12,7 +11,6 @@
   "Not registered yet? <2>Create an account</2>": "Δεν έχετε εγγραφεί ακόμα; <2>Δημιουργήστε λογαριασμό</2>",
   "Login to your account": "Συνδεθείτε στον λογαριασμό σας",
   "Logging in…": "Σύνδεση…",
-  "Inspector": "Επιθεωρητής",
   "Display name": "Εμφανιζόμενο όνομα",
   "Developer Settings": "Ρυθμίσεις προγραμματιστή",
   "Debug log request": "Αίτημα αρχείου καταγραφής",
@@ -46,7 +44,6 @@
   "Full screen": "Πλήρη οθόνη",
   "Exit full screen": "Έξοδος από πλήρη οθόνη",
   "Create account": "Δημιουργία λογαριασμού",
-  "Copy and share this call link": "Αντιγράψτε και μοιραστείτε αυτόν τον σύνδεσμο κλήσης",
   "Copy": "Αντιγραφή",
   "Copied!": "Αντιγράφηκε!",
   "Confirm password": "Επιβεβαίωση κωδικού",
@@ -77,9 +74,7 @@
   "How did it go?": "Πώς σας φάνηκε;",
   "Include debug logs": "Να συμπεριληφθούν αρχεία καταγραφής",
   "Recaptcha not loaded": "Το Recaptcha δεν φορτώθηκε",
-  "Debug log": "Αρχείο καταγραφής",
   "Developer": "Προγραμματιστής",
-  "Download debug logs": "Λήψη αρχείων καταγραφής",
   "Sending debug logs…": "Αποστολή αρχείων καταγραφής…",
   "Submit": "Υποβολή",
   "Your feedback": "Τα σχόλιά σας",

public/locales/en-GB/app.json

@@ -5,7 +5,6 @@
   "{{count}} stars|other": "{{count}} stars",
   "{{displayName}} is presenting": "{{displayName}} is presenting",
   "{{displayName}}, your call has ended.": "{{displayName}}, your call has ended.",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
   "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Create an account</0> Or <2>Access as a guest</2>",
@@ -30,14 +29,12 @@
   "Continue in browser": "Continue in browser",
   "Copied!": "Copied!",
   "Copy": "Copy",
-  "Copy and share this call link": "Copy and share this call link",
+  "Copy link": "Copy link",
   "Create account": "Create account",
-  "Debug log": "Debug log",
   "Debug log request": "Debug log request",
   "Developer": "Developer",
   "Developer Settings": "Developer Settings",
   "Display name": "Display name",
-  "Download debug logs": "Download debug logs",
   "Element Call Home": "Element Call Home",
   "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call is temporarily not end-to-end encrypted while we test scalability.",
   "Enable end-to-end encryption (password protected calls)": "Enable end-to-end encryption (password protected calls)",
@@ -54,10 +51,12 @@
   "How did it go?": "How did it go?",
   "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.",
   "Include debug logs": "Include debug logs",
-  "Inspector": "Inspector",
+  "Invite": "Invite",
+  "Invite to this call": "Invite to this call",
   "Join call": "Join call",
   "Join call now": "Join call now",
   "Join existing call?": "Join existing call?",
+  "Link copied to clipboard": "Link copied to clipboard",
   "Loading…": "Loading…",
   "Local volume": "Local volume",
   "Logging in…": "Logging in…",
@@ -74,6 +73,7 @@
   "Not now, return to home screen": "Not now, return to home screen",
   "Not registered yet? <2>Create an account</2>": "Not registered yet? <2>Create an account</2>",
   "Open in the app": "Open in the app",
+  "Participants": "Participants",
   "Password": "Password",
   "Passwords must match": "Passwords must match",
   "Profile": "Profile",
@@ -92,11 +92,8 @@
   "Sending debug logs…": "Sending debug logs…",
   "Sending…": "Sending…",
   "Settings": "Settings",
-  "Share": "Share",
   "Share screen": "Share screen",
-  "Share this call": "Share this call",
   "Sharing screen": "Sharing screen",
-  "Show call inspector": "Show call inspector",
   "Show connection stats": "Show connection stats",
   "Sign in": "Sign in",
   "Sign out": "Sign out",

public/locales/es/app.json

@@ -15,7 +15,6 @@
   "Speaker": "Altavoz",
   "Sign out": "Cerrar sesión",
   "Sign in": "Iniciar sesión",
-  "Show call inspector": "Mostrar inspector de llamada",
   "Share screen": "Compartir pantalla",
   "Settings": "Ajustes",
   "Sending…": "Enviando…",
@@ -41,19 +40,15 @@
   "Join existing call?": "¿Unirse a llamada existente?",
   "Join call now": "Unirse a la llamada ahora",
   "Join call": "Unirse a la llamada",
-  "Inspector": "Inspector",
   "Include debug logs": "Incluir registros de depuración",
   "Home": "Inicio",
   "Go": "Comenzar",
   "Full screen": "Pantalla completa",
   "Exit full screen": "Salir de pantalla completa",
-  "Download debug logs": "Descargar registros de depuración",
   "Display name": "Nombre a mostrar",
   "Developer": "Desarrollador",
   "Debug log request": "Petición de registros de depuración",
-  "Debug log": "Registro de depuración",
   "Create account": "Crear cuenta",
-  "Copy and share this call link": "Copiar y compartir el enlace de la llamada",
   "Copied!": "¡Copiado!",
   "Confirm password": "Confirmar contraseña",
   "Close": "Cerrar",

public/locales/et/app.json

@@ -2,19 +2,15 @@
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Kas soovid salasõna seadistada ja sellega oma kasutajakonto alles jätta?</0><1>Nii saad säilitada oma nime ja määrata profiilipildi, mida saad kasutada tulevastes kõnedes</1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Loo konto</0> Või <2>Sisene külalisena</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>On sul juba konto?</0><1><0>Logi sisse</0> Või <2>Logi sisse külalisena</2></1>",
-  "Inspector": "Inspektor",
   "Include debug logs": "Lisa veatuvastuslogid",
   "Home": "Avavaatesse",
   "Go": "Jätka",
   "Full screen": "Täisekraan",
   "Exit full screen": "Välju täisekraanivaatest",
-  "Download debug logs": "Lae alla veatuvastuslogid",
   "Display name": "Kuvatav nimi",
   "Developer": "Arendaja",
   "Debug log request": "Veaotsingulogi päring",
-  "Debug log": "Veaotsingulogi",
   "Create account": "Loo konto",
-  "Copy and share this call link": "Kopeeri ja jaga selle kõne linki",
   "Copied!": "Kopeeritud!",
   "Confirm password": "Kinnita salasõna",
   "Close": "Sulge",
@@ -42,7 +38,6 @@
   "Speaker": "Kõlar",
   "Sign out": "Logi välja",
   "Sign in": "Logi sisse",
-  "Show call inspector": "Näita kõneteavet",
   "Share screen": "Jaga ekraani",
   "Settings": "Seadistused",
   "Sending…": "Saatmine…",
@@ -102,12 +97,9 @@
   "Microphone off": "Mikrofon ei tööta",
   "Microphone on": "Mikrofon töötab",
   "Not encrypted": "Krüptimata",
-  "Share": "Jaga",
-  "Share this call": "Jaga seda kõnet",
   "Sharing screen": "Ekraanivaade on jagamisel",
   "{{count, number}}|one": "{{count, number}}",
   "{{count, number}}|other": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
   "You": "Sina",
   "Continue in browser": "Jätka veebibrauseris",
   "Mute microphone": "Summuta mikrofon",
@@ -122,5 +114,10 @@
   "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"
+  "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",
+  "Invite": "Kutsu",
+  "Link copied to clipboard": "Link on kopeeritud lõikelauale",
+  "Participants": "Osalejad",
+  "Copy link": "Kopeeri link",
+  "Invite to this call": "Kutsu liituma selle kõnaga"
 }

public/locales/fa/app.json

@@ -20,13 +20,10 @@
   "Go": "رفتن",
   "Full screen": "تمام صحفه",
   "Exit full screen": "خروج از حالت تمام صفحه",
-  "Download debug logs": "دانلود لاگ عیب‌یابی",
   "Display name": "نام نمایشی",
   "Developer": "توسعه دهنده",
   "Debug log request": "درخواست لاگ عیب‌یابی",
-  "Debug log": "لاگ عیب‌یابی",
   "Create account": "ساخت حساب کاربری",
-  "Copy and share this call link": "لینک تماس را کپی کنید و به اشتراک بگذارید",
   "Copied!": "کپی شد!",
   "Confirm password": "تایید رمزعبور",
   "Close": "بستن",
@@ -38,9 +35,7 @@
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>ساخت حساب کاربری</0> Or <2>دسترسی به عنوان میهمان</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>از قبل حساب کاربری دارید؟</0><1><0>ورود</0> Or <2>به عنوان یک میهمان وارد شوید</2></1>",
   "Local volume": "حجم داخلی",
-  "Inspector": "بازرس",
   "Spotlight": "نور افکن",
-  "Show call inspector": "نمایش بازرس تماس",
   "Share screen": "اشتراک گذاری صفحه نمایش",
   "Sending…": "در حال ارسال…",
   "Sending debug logs…": "در حال ارسال باگ‌های عیب‌یابی…",

public/locales/fr/app.json

@@ -8,19 +8,15 @@
   "Close": "Fermer",
   "Confirm password": "Confirmer le mot de passe",
   "Copied!": "Copié !",
-  "Copy and share this call link": "Copier et partager le lien de cet appel",
   "Create account": "Créer un compte",
-  "Debug log": "Journal de débogage",
   "Debug log request": "Demande d’un journal de débogage",
   "Developer": "Développeur",
   "Display name": "Nom d’affichage",
-  "Download debug logs": "Télécharger les journaux de débogage",
   "Exit full screen": "Quitter le plein écran",
   "Full screen": "Plein écran",
   "Go": "Commencer",
   "Home": "Accueil",
   "Include debug logs": "Inclure les journaux de débogage",
-  "Inspector": "Inspecteur",
   "Join call": "Rejoindre l’appel",
   "Join call now": "Rejoindre l’appel maintenant",
   "Join existing call?": "Rejoindre un appel existant ?",
@@ -48,7 +44,6 @@
   "Sending…": "Envoi…",
   "Settings": "Paramètres",
   "Share screen": "Partage d’écran",
-  "Show call inspector": "Afficher l’inspecteur d’appel",
   "Sign in": "Connexion",
   "Sign out": "Déconnexion",
   "Spotlight": "Premier plan",
@@ -97,14 +92,11 @@
   "End-to-end encryption isn't supported on your browser.": "Le chiffrement de bout-en-bout n’est pas pris en charge par votre navigateur.",
   "Enable end-to-end encryption (password protected calls)": "Activer le chiffrement de bout-en-bout (appels protégés par mot de passe)",
   "{{count, number}}|other": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
   "Encrypted": "Chiffré",
   "End call": "Terminer l’appel",
   "Grid": "Grille",
   "Microphone off": "Microphone éteint",
   "Microphone on": "Microphone allumé",
-  "Share": "Partager",
-  "Share this call": "Partager cet appel",
   "Sharing screen": "L’écran est partagé",
   "{{count, number}}|one": "{{count, number}}",
   "Not encrypted": "Non chiffré",
@@ -122,5 +114,10 @@
   "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.",
-  "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"
+  "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",
+  "Copy link": "Copier le lien",
+  "Invite": "Inviter",
+  "Invite to this call": "Inviter dans cet appel",
+  "Link copied to clipboard": "Lien copié dans le presse-papier",
+  "Participants": "Participants"
 }

public/locales/id/app.json

@@ -9,19 +9,15 @@
   "Close": "Tutup",
   "Confirm password": "Konfirmasi kata sandi",
   "Copied!": "Disalin!",
-  "Copy and share this call link": "Salin dan bagikan tautan panggilan ini",
   "Create account": "Buat akun",
-  "Debug log": "Catatan pengawakutuan",
   "Debug log request": "Permintaan catatan pengawakutuan",
   "Developer": "Pengembang",
   "Display name": "Nama tampilan",
-  "Download debug logs": "Unduh catatan pengawakutuan",
   "Exit full screen": "Keluar dari layar penuh",
   "Full screen": "Layar penuh",
   "Go": "Bergabung",
   "Home": "Beranda",
   "Include debug logs": "Termasuk catatan pengawakutuan",
-  "Inspector": "Inspektur",
   "Join call": "Bergabung ke panggilan",
   "Join call now": "Bergabung ke panggilan sekarang",
   "Join existing call?": "Bergabung ke panggilan yang sudah ada?",
@@ -49,7 +45,6 @@
   "Sending…": "Mengirimkan…",
   "Settings": "Pengaturan",
   "Share screen": "Bagikan layar",
-  "Show call inspector": "Tampilkan inspektur panggilan",
   "Sign in": "Masuk",
   "Sign out": "Keluar",
   "Speaker": "Pembicara",
@@ -103,11 +98,8 @@
   "Microphone off": "Mikrofon dimatikan",
   "Microphone on": "Mikrofon dinyalakan",
   "Not encrypted": "Tidak terenkripsi",
-  "Share": "Bagikan",
-  "Share this call": "Bagikan panggilan ini",
   "Sharing screen": "Berbagi layar",
   "{{count, number}}|one": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
   "You": "Anda",
   "Continue in browser": "Lanjutkan dalam peramban",
   "Mute microphone": "Matikan mikrofon",
@@ -122,5 +114,10 @@
   "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.",
-  "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"
+  "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",
+  "Invite": "Undang",
+  "Invite to this call": "Undang ke panggilan ini",
+  "Participants": "Peserta",
+  "Copy link": "Salin tautan",
+  "Link copied to clipboard": "Tautan disalin ke papan klip"
 }

public/locales/it/app.json

@@ -4,7 +4,6 @@
   "{{count}} stars|one": "{{count}} stelle",
   "{{count}} stars|other": "{{count}} stelle",
   "{{displayName}} is presenting": "{{displayName}} sta presentando",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Hai già un profilo?</0><1><0>Accedi</0> o <2>Accedi come ospite</2></1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Crea un profilo</0> o <2>Accedi come ospite</2>",
   "<0>Oops, something's gone wrong.</0>": "<0>Ops, qualcosa è andato storto.</0>",
@@ -20,14 +19,11 @@
   "Connectivity to the server has been lost.": "La connessione al server è stata persa.",
   "Copied!": "Copiato!",
   "Copy": "Copia",
-  "Copy and share this call link": "Copia e condividi questo collegamento alla chiamata",
   "Create account": "Crea profilo",
-  "Debug log": "Registro di debug",
   "Debug log request": "Richiesta registro di debug",
   "Developer": "Sviluppatore",
   "Developer Settings": "Impostazioni per sviluppatori",
-  "Display name": "Nome da mostrare",
+  "Display name": "Il tuo nome",
-  "Download debug logs": "Scarica registri di debug",
   "Element Call Home": "Inizio di Element Call",
   "Enable end-to-end encryption (password protected calls)": "Attiva crittografia end-to-end (chiamate protette da password)",
   "Encrypted": "Cifrata",
@@ -54,7 +50,6 @@
   "More": "Altro",
   "No": "No",
   "Not encrypted": "Non cifrata",
-  "Inspector": "Ispettore",
   "Join existing call?": "Entrare in una chiamata esistente?",
   "Not registered yet? <2>Create an account</2>": "Non hai ancora un profilo? <2>Creane uno</2>",
   "Password": "Password",
@@ -73,9 +68,7 @@
   "Sending debug logs…": "Invio dei registri di debug…",
   "Sending…": "Invio…",
   "Settings": "Impostazioni",
-  "Share": "Condividi",
   "Share screen": "Condividi schermo",
-  "Share this call": "Condividi questa chiamata",
   "Sharing screen": "Condivisione schermo",
   "Show connection stats": "Mostra statistiche connessione",
   "Sign in": "Accedi",
@@ -83,7 +76,6 @@
   "Speaker": "Altoparlante",
   "Submit": "Invia",
   "Submit feedback": "Invia commento",
-  "Show call inspector": "Mostra ispettore della chiamata",
   "Spotlight": "In primo piano",
   "Thanks, we received your feedback!": "Grazie, abbiamo ricevuto il tuo commento!",
   "Thanks!": "Grazie!",
@@ -119,7 +111,13 @@
   "Stop video": "Ferma video",
   "Unmute microphone": "Riaccendi il microfono",
   "Back to recents": "Torna ai recenti",
-  "Start new call": "Inizia nuova chiamata",
+  "Start new call": "Inizia una nuova chiamata",
   "Call not found": "Chiamata non trovata",
-  "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.": "Le chiamate ora sono cifrate end-to-end e devono essere create dalla pagina principale. Ciò assicura che chiunque usi la stessa chiave di crittografia."
+  "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.": "Le chiamate ora sono cifrate end-to-end e devono essere create dalla pagina principale. Ciò assicura che chiunque usi la stessa chiave di crittografia.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Il tuo browser non supporta la crittografia end-to-end dei media. I browser supportati sono Chrome, Safari, Firefox >=117",
+  "Copy link": "Copia collegamento",
+  "Invite": "Invita",
+  "Invite to this call": "Invita a questa chiamata",
+  "Participants": "Partecipanti",
+  "Link copied to clipboard": "Collegamento copiato negli appunti"
 }

public/locales/ja/app.json

@@ -8,13 +8,10 @@
   "Confirm password": "パスワードを確認",
   "Close": "閉じる",
   "Copied!": "コピーしました！",
-  "Copy and share this call link": "通話リンクをコピーし共有",
   "Copy": "コピー",
-  "Debug log": "デバッグログ",
   "Create account": "アカウントを作成",
   "Go": "続行",
   "Element Call Home": "Element Call ホーム",
-  "Download debug logs": "デバッグログをダウンロード",
   "Display name": "表示名",
   "Developer": "開発者",
   "Full screen": "全画面表示",

public/locales/lv/app.json

@@ -16,14 +16,11 @@
   "Connectivity to the server has been lost.": "Ir zaudēts savienojums ar serveri.",
   "Copied!": "Ievietots starpliktuvē.",
   "Copy": "Ievietot starpliktuvē",
-  "Copy and share this call link": "Ievietot starpliktuvē un kopīgot šo zvana saiti",
   "Create account": "Izveidot kontu",
-  "Debug log": "Atkļūdošanas žurnāls",
   "Debug log request": "Atkļūdošanas žurnāla pieprasījums",
   "Developer": "Izstrādātājs",
   "Developer Settings": "Izstrādātāja iestatījumi",
   "Display name": "Attēlojamais vārds",
-  "Download debug logs": "Lejupielādēt atkļūdošanas žurnāla ierakstus",
   "Element Call Home": "Element Call sākums",
   "Exit full screen": "Iziet no pilnekrāna",
   "Expose developer settings in the settings window.": "Izstādīt izstrādātāja iestatījumus iestatījumu logā.",
@@ -46,7 +43,6 @@
   "Your feedback": "Tava atsauksme",
   "How did it go?": "Kā Tev veicās?",
   "Include debug logs": "Iekļaut atkļūdošanas žurnāla ierakstus",
-  "Inspector": "Inspektors",
   "Join call": "Pievienoties zvanam",
   "Join call now": "Pievienoties zvanam tagad",
   "Join existing call?": "Pievienoties esošam zvanam?",
@@ -76,7 +72,6 @@
   "Sending…": "Nosūta…",
   "Settings": "Iestatījumi",
   "Share screen": "Kopīgot ekrānu",
-  "Show call inspector": "Rādīt zvanu inspektoru",
   "Show connection stats": "Rādīt savienojuma apkopojumu",
   "Sign in": "Pieteikties",
   "Sign out": "Atteikties",

public/locales/pl/app.json

@@ -13,7 +13,6 @@
   "Speaker": "Głośnik",
   "Sign out": "Wyloguj się",
   "Sign in": "Zaloguj się",
-  "Show call inspector": "Pokaż inspektora połączenia",
   "Share screen": "Udostępnij ekran",
   "Settings": "Ustawienia",
   "Sending…": "Wysyłanie…",
@@ -41,18 +40,14 @@
   "Join existing call?": "Dołączyć do istniejącego połączenia?",
   "Join call now": "Dołącz do połączenia teraz",
   "Join call": "Dołącz do połączenia",
-  "Inspector": "Inspektor",
   "Include debug logs": "Dołącz dzienniki debugowania",
   "Home": "Strona domowa",
   "Full screen": "Pełny ekran",
   "Exit full screen": "Opuść pełny ekran",
-  "Download debug logs": "Pobierz dzienniki debugowania",
   "Display name": "Nazwa wyświetlana",
   "Developer": "Programista",
   "Debug log request": "Prośba o dzienniki debugowania",
-  "Debug log": "Dzienniki debugowania",
   "Create account": "Utwórz konto",
-  "Copy and share this call link": "Skopiuj i udostępnij link do rozmowy",
   "Copied!": "Skopiowano!",
   "Confirm password": "Potwierdź hasło",
   "Close": "Zamknij",
@@ -103,9 +98,21 @@
   "Microphone off": "Mikrofon wyłączony",
   "Microphone on": "Mikrofon włączony",
   "Not encrypted": "Nie szyfrowane",
-  "Share": "Udostępnij",
-  "Share this call": "Udostępnij to połączenie",
   "Sharing screen": "Udostępnianie ekranu",
   "{{count, number}}|one": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}"
+  "Continue in browser": "Kontynuuj w przeglądarce",
+  "Mute microphone": "Wycisz mikrofon",
+  "Name of call": "Nazwa połączenia",
+  "Open in the app": "Otwórz w aplikacji",
+  "Ready to join?": "Gotowy, by dołączyć?",
+  "Select app": "Wybierz aplikację",
+  "Start new call": "Rozpocznij nowe połączenie",
+  "Start video": "Rozpocznij wideo",
+  "Back to recents": "Wróć do ostatnie",
+  "Stop video": "Zakończ wideo",
+  "Unmute microphone": "Odcisz mikrofon",
+  "Call not found": "Nie znaleziono połączenia",
+  "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.": "Połączenia są teraz szyfrowane end-to-end i muszą zostać utworzone ze strony głównej. Pomaga to upewnić się, że każdy korzysta z tego samego klucza szyfrującego.",
+  "You": "Ty",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Twoja przeglądarka nie wspiera szyfrowania end-to-end. Wspierane przeglądarki to Chrome, Safari, Firefox >=117"
 }

public/locales/ru/app.json

@@ -19,15 +19,12 @@
   "Speaker": "Динамик",
   "Sign out": "Выйти",
   "Sign in": "Войти",
-  "Show call inspector": "Показать инспектор",
   "Share screen": "Поделиться экраном",
   "Settings": "Настройки",
   "Sending…": "Отправка…",
   "Local volume": "Местная громкость",
   "Include debug logs": "Приложить журнал отладки",
-  "Download debug logs": "Скачать журнал отладки",
   "Debug log request": "Запрос журнала отладки",
-  "Debug log": "Журнал отладки",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "У одного из участников звонка есть неполадки. Чтобы лучше диагностировать похожие проблемы, нам нужен журнал отладки.",
   "Send debug logs": "Отправить журнал отладки",
   "Return to home screen": "Вернуться в Начало",
@@ -48,7 +45,6 @@
   "Join existing call?": "Присоединиться к существующему звонку?",
   "Join call now": "Присоединиться сейчас",
   "Join call": "Присоединиться",
-  "Inspector": "Инспектор",
   "Home": "Начало",
   "Go": "Далее",
   "Full screen": "Полноэкранный режим",
@@ -56,7 +52,6 @@
   "Display name": "Видимое имя",
   "Developer": "Разработчику",
   "Create account": "Создать аккаунт",
-  "Copy and share this call link": "Скопируйте и поделитесь этой ссылкой на звонок",
   "Copied!": "Скопировано!",
   "Confirm password": "Подтвердите пароль",
   "Close": "Закрыть",

public/locales/sk/app.json

@@ -5,7 +5,6 @@
   "Element Call Home": "Domov Element Call",
   "Waiting for other participants…": "Čaká sa na ďalších účastníkov…",
   "Submit feedback": "Odoslať spätnú väzbu",
-  "Show call inspector": "Zobraziť inšpektora hovorov",
   "Share screen": "Zdieľať obrazovku",
   "Sending…": "Odosielanie…",
   "Sending debug logs…": "Odosielanie záznamov o ladení…",
@@ -32,12 +31,10 @@
   "Join existing call?": "Pripojiť sa k existujúcemu hovoru?",
   "Join call now": "Pripojiť sa k hovoru teraz",
   "Join call": "Pripojiť sa k hovoru",
-  "Inspector": "Inšpektor",
   "Home": "Domov",
   "Go": "Prejsť",
   "Full screen": "Zobrazenie na celú obrazovku",
   "Exit full screen": "Ukončiť zobrazenie na celú obrazovku",
-  "Download debug logs": "Stiahnuť záznamy ladenia",
   "Yes, join call": "Áno, pripojiť sa k hovoru",
   "Video": "Video",
   "Version: {{version}}": "Verzia: {{version}}",
@@ -51,9 +48,7 @@
   "Display name": "Zobrazované meno",
   "Developer": "Vývojár",
   "Debug log request": "Žiadosť o záznam ladenia",
-  "Debug log": "Záznam o ladení",
   "Create account": "Vytvoriť účet",
-  "Copy and share this call link": "Skopírovať a zdieľať tento odkaz na hovor",
   "Copy": "Kopírovať",
   "Copied!": "Skopírované!",
   "Confirm password": "Potvrdiť heslo",
@@ -103,11 +98,8 @@
   "Microphone on": "Mikrofón zapnutý",
   "Grid": "Sieť",
   "Not encrypted": "Nie je zašifrované",
-  "Share": "Zdieľať",
   "Sharing screen": "Zdieľanie obrazovky",
   "{{count, number}}|one": "{{count, number}}",
-  "Share this call": "Zdieľať tento hovor",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
   "You": "Vy",
   "Continue in browser": "Pokračovať v prehliadači",
   "Mute microphone": "Stlmiť mikrofón",
@@ -122,5 +114,10 @@
   "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ľúč.",
-  "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"
+  "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",
+  "Invite": "Pozvať",
+  "Link copied to clipboard": "Odkaz skopírovaný do schránky",
+  "Participants": "Účastníci",
+  "Copy link": "Kopírovať odkaz",
+  "Invite to this call": "Pozvať na tento hovor"
 }

public/locales/tr/app.json

@@ -7,19 +7,15 @@
   "Close": "Kapat",
   "Confirm password": "Parolayı tekrar edin",
   "Copied!": "Kopyalandı",
-  "Copy and share this call link": "Arama bağlantısını kopyala ve paylaş",
   "Create account": "Hesap aç",
-  "Debug log": "Hata ayıklama kütüğü",
   "Debug log request": "Hata ayıklama kütük istemi",
   "Developer": "Geliştirici",
   "Display name": "Ekran adı",
-  "Download debug logs": "Hata ayıklama kütüğünü indir",
   "Exit full screen": "Tam ekranı terk et",
   "Full screen": "Tam ekran",
   "Go": "Git",
   "Home": "Ev",
   "Include debug logs": "Hata ayıklama kütüğünü dahil et",
-  "Inspector": "Denetçi",
   "Join call": "Aramaya katıl",
   "Join call now": "Aramaya katıl",
   "Join existing call?": "Mevcut aramaya katıl?",
@@ -46,7 +42,6 @@
   "Sending…": "Gönderiliyor…",
   "Settings": "Ayarlar",
   "Share screen": "Ekran paylaş",
-  "Show call inspector": "Arama denetçisini göster",
   "Sign in": "Gir",
   "Sign out": "Çık",
   "Submit feedback": "Geri bildirim ver",

public/locales/uk/app.json

@@ -12,7 +12,6 @@
   "Speaker": "Динамік",
   "Sign out": "Вийти",
   "Sign in": "Увійти",
-  "Show call inspector": "Показати інспектора виклику",
   "Share screen": "Поділитися екраном",
   "Settings": "Налаштування",
   "Sending…": "Надсилання…",
@@ -40,19 +39,15 @@
   "Join existing call?": "Приєднатися до наявного виклику?",
   "Join call now": "Приєднатися до виклику зараз",
   "Join call": "Приєднатися до виклику",
-  "Inspector": "Інспектор",
   "Include debug logs": "Долучити журнали налагодження",
   "Home": "Домівка",
   "Go": "Далі",
   "Full screen": "Повноекранний режим",
   "Exit full screen": "Вийти з повноекранного режиму",
-  "Download debug logs": "Завантажити журнали налагодження",
   "Display name": "Псевдонім",
   "Developer": "Розробнику",
   "Debug log request": "Запит журналу налагодження",
-  "Debug log": "Журнал налагодження",
   "Create account": "Створити обліковий запис",
-  "Copy and share this call link": "Скопіювати та поділитися цим посиланням на виклик",
   "Copied!": "Скопійовано!",
   "Confirm password": "Підтвердити пароль",
   "Close": "Закрити",
@@ -97,17 +92,14 @@
   "Enable end-to-end encryption (password protected calls)": "Увімкнути наскрізне шифрування (захищені паролем виклики)",
   "End-to-end encryption isn't supported on your browser.": "Наскрізне шифрування не підтримується вашим переглядачем.",
   "{{count, number}}|other": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
   "Encrypted": "Зашифровано",
   "Microphone on": "Мікрофон увімкнено",
   "Not encrypted": "Не зашифровано",
-  "Share": "Поділитися",
   "Sharing screen": "Презентація екрана",
   "{{count, number}}|one": "{{count, number}}",
   "End call": "Завершити виклик",
   "Grid": "Сітка",
   "Microphone off": "Мікрофон вимкнено",
-  "Share this call": "Поділитися цим викликом",
   "You": "Ви",
   "Mute microphone": "Вимкнути мікрофон",
   "Open in the app": "Відкрити у застосунку",
@@ -122,5 +114,10 @@
   "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.": "Відтепер виклики захищено наскрізним шифруванням, і їх потрібно створювати з домашньої сторінки. Це допомагає переконатися, що всі користувачі використовують один і той самий ключ шифрування.",
-  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Ваш браузер не підтримує наскрізне шифрування мультимедійних даних. Підтримувані браузери: Chrome, Safari, Firefox >=117"
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Ваш браузер не підтримує наскрізне шифрування мультимедійних даних. Підтримувані браузери: Chrome, Safari, Firefox >=117",
+  "Invite": "Запросити",
+  "Link copied to clipboard": "Посилання скопійовано до буфера обміну",
+  "Participants": "Учасники",
+  "Copy link": "Скопіювати посилання",
+  "Invite to this call": "Запросити до цього виклику"
 }

public/locales/vi/app.json

@@ -27,13 +27,10 @@
   "Copied!": "Đã sao chép!",
   "Confirm password": "Xác nhận mật khẩu",
   "Close": "Đóng",
-  "Debug log": "Nhật ký gỡ lỗi",
   "Copy": "Sao chép",
-  "Copy and share this call link": "Sao chép và chia sẻ liên kết cuộc gọi này",
   "Display name": "Tên hiển thị",
   "Developer Settings": "Cài đặt phát triển",
   "Developer": "Nhà phát triển",
-  "Download debug logs": "Tải xuống nhật ký gỡ lỗi",
   "Feedback": "Phản hồi",
   "Full screen": "Toàn màn hình",
   "Include debug logs": "Kèm theo nhật ký gỡ lỗi",

public/locales/zh-Hans/app.json

@@ -9,15 +9,13 @@
   "Submit feedback": "提交反馈",
   "Spotlight": "聚焦模式",
   "Speaker": "发言人",
-  "Sign out": "注销登录",
+  "Sign out": "登出",
   "Sign in": "登录",
   "Audio": "音频",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "这个通话中的另一个用户出现了问题。为了更好地诊断这些问题，我们想收集调试日志。",
-  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>为什么不设置一个密码来保留你的账户？</0><1>你将可以保留你的名字并设置一个头像，以便在未来的通话中使用。</1>",
+  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>为何不设置密码来保留你的账户？</0><1>保留昵称并设置头像，以便在未来的通话中使用。</1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>创建账户</0> Or <2>以访客身份继续</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>已有账户？</0><1><0>登录</0> Or <2>以访客身份继续</2></1>",
-  "Inspector": "检查器",
-  "Show call inspector": "显示通话检查器",
   "Share screen": "屏幕共享",
   "Settings": "设置",
   "Sending…": "正在发送……",
@@ -28,13 +26,13 @@
   "Remove": "移除",
   "Registering…": "正在注册……",
   "Register": "注册",
-  "Recaptcha not loaded": "reCaptcha未加载",
+  "Recaptcha not loaded": "验证器未载入",
-  "Recaptcha dismissed": "reCaptcha验证失败",
+  "Recaptcha dismissed": "人机验证失败",
   "Profile": "个人信息",
   "Passwords must match": "密码必须匹配",
   "Password": "密码",
   "Not registered yet? <2>Create an account</2>": "还没有注册？ <2>创建账户<2>",
-  "Not now, return to home screen": "暂不，先返回主页",
+  "Not now, return to home screen": "暂不，返回主页",
   "No": "否",
   "More": "更多",
   "Microphone": "麦克风",
@@ -43,7 +41,7 @@
   "Logging in…": "登录中……",
   "Local volume": "本地音量",
   "Loading…": "加载中……",
-  "Join existing call?": "加入现有的通话？",
+  "Join existing call?": "是否加入现有的通话？",
   "Join call now": "现在加入通话",
   "Join call": "加入通话",
   "Include debug logs": "包含调试日志",
@@ -51,14 +49,11 @@
   "Go": "开始",
   "Full screen": "全屏",
   "Exit full screen": "退出全屏",
-  "Element Call Home": "Element Call 主页",
+  "Element Call Home": "Element 呼叫 主页",
-  "Download debug logs": "下载调试日志",
   "Display name": "显示名称",
   "Developer": "开发者",
-  "Debug log request": "调试日志请求",
+  "Debug log request": "请求调试日志",
-  "Debug log": "调试日志",
   "Create account": "创建账户",
-  "Copy and share this call link": "复制并分享该链接",
   "Copy": "复制",
   "Copied!": "已复制！",
   "Confirm password": "确认密码",
@@ -66,5 +61,58 @@
   "Camera": "摄像头",
   "Avatar": "头像",
   "<0>Oops, something's gone wrong.</0>": "<0>哎哟，出问题了。</0>",
-  "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": ""
+  "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": "<0></0><1></1>您可以取消选中复选框来撤回同意。如果正在通话中，此设置将在通话结束时生效。",
+  "Encrypted": "已加密",
+  "End call": "通话结束",
+  "Grid": "网格",
+  "Microphone off": "关闭麦克风",
+  "Microphone on": "开启麦克风",
+  "Not encrypted": "未加密",
+  "{{count, number}}|one": "{{count, number}}",
+  "{{count, number}}|other": "{{count, number}}",
+  "Sharing screen": "屏幕共享",
+  "You": "你",
+  "Continue in browser": "在浏览器中继续",
+  "Mute microphone": "麦克风静音",
+  "Name of call": "通话名称",
+  "Open in the app": "在应用中打开",
+  "Ready to join?": "准备好加入了吗？",
+  "Back to recents": "返回最近通话",
+  "Select app": "选择应用程序",
+  "Start new call": "开始新通话",
+  "Start video": "开始视频",
+  "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.": "现在，通话是端对端加密的，需要从主页创建。这有助于确保每个人都使用相同的加密密钥。",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "您的浏览器不支持媒体端对端加密。支持的浏览器有 Chrome、Safari、Firefox >=117",
+  "{{count}} stars|other": "{{count}} 个星",
+  "{{displayName}} is presenting": "{{displayName}} 正在显示",
+  "{{displayName}}, your call has ended.": "{{displayName}}，通话已结束。",
+  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>提交日志以帮助我们修复问题。</0>",
+  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>我们需要您的反馈以提升用户体验。</0>",
+  "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "参与测试即表示您同意我们收集匿名数据，用于改进产品。您可以在我们的<2>隐私政策</2>和<5>Cookie政策</5>中找到有关我们跟踪哪些数据以及更多信息。",
+  "Expose developer settings in the settings window.": "在设置中显示开发者设置。",
+  "Show connection stats": "显示连接统计信息",
+  "Thanks, we received your feedback!": "谢谢，我们收到了反馈！",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "在我们测试扩展性时，Element 通话 暂时不进行端对端加密。",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "点击 \"开始\"，即表示您同意我们的<2>最终用户许可协议 (EULA)</2>",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "点击 \"加入通话\"，即表示您同意我们的<2>最终用户许可协议 (EULA)</2>",
+  "{{count}} stars|one": "{{count}} 个星",
+  "<0>Thanks for your feedback!</0>": "<0>感谢反馈！</0>",
+  "Your feedback": "您的反馈",
+  "Connectivity to the server has been lost.": "与服务器的连接中断。",
+  "Developer Settings": "开发者设置",
+  "Feedback": "反馈",
+  "Submit": "提交",
+  "Reconnect": "断线重连",
+  "Enable end-to-end encryption (password protected calls)": "启用端对端加密（有密码保护的通话）",
+  "End-to-end encryption isn't supported on your browser.": "您的浏览器不支持端对端加密。",
+  "How did it go?": "进展如何？",
+  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "如果遇到问题或想提供一些反馈意见，请在下面向我们发送简短描述。",
+  "Retry sending logs": "重传日志",
+  "Submitting…": "提交中…",
+  "Thanks!": "谢谢！",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "该站点受 ReCAPTCHA 保护，适用于Google的 <2>隐私政策</2>和 <6>服务条款</6>。 <9></9>点击 \"注册\"，即表示您同意我们的 <12>最终用户许可协议 (EULA)</12>",
+  "You were disconnected from the call": "通话已中断"
 }

public/locales/zh-Hant/app.json

@@ -17,7 +17,6 @@
   "Speaker": "發言者",
   "Sign out": "登出",
   "Sign in": "登入",
-  "Show call inspector": "顯示通話稽查員",
   "Share screen": "分享畫面",
   "Settings": "設定",
   "Sending…": "傳送中…",
@@ -46,20 +45,16 @@
   "Join existing call?": "加入已開始的通話嗎？",
   "Join call now": "現在加入通話",
   "Join call": "加入通話",
-  "Inspector": "稽查員",
   "Include debug logs": "包含除錯紀錄",
   "Home": "首頁",
   "Go": "前往",
   "Full screen": "全螢幕",
   "Exit full screen": "退出全螢幕",
   "Element Call Home": "Element Call 首頁",
-  "Download debug logs": "下載偵錯報告",
   "Display name": "顯示名稱",
   "Developer": "開發者",
   "Debug log request": "請求偵錯報告",
-  "Debug log": "除錯紀錄",
   "Create account": "建立帳號",
-  "Copy and share this call link": "複製並分享通話連結",
   "Copy": "複製",
   "Copied!": "已複製！",
   "Confirm password": "確認密碼",
@@ -98,15 +93,12 @@
   "End-to-end encryption isn't supported on your browser.": "您的瀏覽器不支援端到端加密。",
   "{{count, number}}|one": "{{count, number}}",
   "{{count, number}}|other": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
   "Encrypted": "已加密",
   "End call": "結束通話",
   "Grid": "網格",
   "Microphone off": "麥克風關閉",
   "Microphone on": "麥克風開啟",
   "Not encrypted": "未加密",
-  "Share": "分享",
-  "Share this call": "分享此通話",
   "Sharing screen": "分享畫面",
   "You": "您",
   "Continue in browser": "在瀏覽器中繼續",
@@ -122,5 +114,10 @@
   "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.": "通話現在是端對端加密的，必須從首頁建立。這有助於確保每個人都使用相同的加密金鑰。",
-  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "您的網路瀏覽器不支援媒體端到端加密。支援的瀏覽器包含了 Chrome、Safari、Firefox >=117"
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "您的網路瀏覽器不支援媒體端到端加密。支援的瀏覽器包含了 Chrome、Safari、Firefox >=117",
+  "Copy link": "複製連結",
+  "Invite": "邀請",
+  "Invite to this call": "邀請到此通話",
+  "Link copied to clipboard": "連結已複製到剪貼簿",
+  "Participants": "參與者"
 }

src/App.tsx

@@ -30,8 +30,6 @@ import { LoginPage } from "./auth/LoginPage";
 import { RegisterPage } from "./auth/RegisterPage";
 import { RoomPage } from "./room/RoomPage";
 import { ClientProvider } from "./ClientContext";
-import { SequenceDiagramViewerPage } from "./SequenceDiagramViewerPage";
-import { InspectorContextProvider } from "./room/GroupCallInspector";
 import { CrashView, LoadingView } from "./FullScreenView";
 import { DisconnectedBanner } from "./DisconnectedBanner";
 import { Initializer } from "./initializer";
@@ -83,30 +81,25 @@ export const App: FC<AppProps> = ({ history }) => {
           <Suspense fallback={null}>
             <ClientProvider>
               <MediaDevicesProvider>
-                <InspectorContextProvider>
+                <Sentry.ErrorBoundary fallback={errorPage}>
-                  <Sentry.ErrorBoundary fallback={errorPage}>
+                  <OverlayProvider>
-                    <OverlayProvider>
+                    <DisconnectedBanner />
-                      <DisconnectedBanner />
+                    <Switch>
-                      <Switch>
+                      <SentryRoute exact path="/">
-                        <SentryRoute exact path="/">
+                        <HomePage />
-                          <HomePage />
+                      </SentryRoute>
-                        </SentryRoute>
+                      <SentryRoute exact path="/login">
-                        <SentryRoute exact path="/login">
+                        <LoginPage />
-                          <LoginPage />
+                      </SentryRoute>
-                        </SentryRoute>
+                      <SentryRoute exact path="/register">
-                        <SentryRoute exact path="/register">
+                        <RegisterPage />
-                          <RegisterPage />
+                      </SentryRoute>
-                        </SentryRoute>
+                      <SentryRoute path="*">
-                        <SentryRoute path="/inspector">
+                        <RoomPage />
-                          <SequenceDiagramViewerPage />
+                      </SentryRoute>
-                        </SentryRoute>
+                    </Switch>
-                        <SentryRoute path="*">
+                  </OverlayProvider>
-                          <RoomPage />
+                </Sentry.ErrorBoundary>
-                        </SentryRoute>
-                      </Switch>
-                    </OverlayProvider>
-                  </Sentry.ErrorBoundary>
-                </InspectorContextProvider>
               </MediaDevicesProvider>
             </ClientProvider>
           </Suspense>

src/E2EEBanner.tsx

@@ -19,7 +19,7 @@ import { FC } from "react";
 
 import { Banner } from "./Banner";
 import styles from "./E2EEBanner.module.css";
-import { ReactComponent as LockOffIcon } from "./icons/LockOff.svg";
+import LockOffIcon from "./icons/LockOff.svg?react";
 import { useEnableE2EE } from "./settings/useSetting";
 
 export const E2EEBanner: FC = () => {

src/Facepile.tsx

@@ -1,66 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FC, HTMLAttributes } from "react";
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { useTranslation } from "react-i18next";
-import { AvatarStack } from "@vector-im/compound-web";
-
-import { Avatar, Size } from "./Avatar";
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  className?: string;
-  client: MatrixClient;
-  members: RoomMember[];
-  max?: number;
-  size?: Size | number;
-}
-
-export const Facepile: FC<Props> = ({
-  className,
-  client,
-  members,
-  max = 3,
-  size = Size.XS,
-  ...rest
-}) => {
-  const { t } = useTranslation();
-
-  const displayedMembers = members.slice(0, max);
-
-  return (
-    <AvatarStack
-      title={t("{{names, list(style: short;)}}", {
-        list: displayedMembers.map((m) => m.name),
-      })}
-      {...rest}
-    >
-      {displayedMembers.map((member, i) => {
-        const avatarUrl = member.getMxcAvatarUrl();
-        return (
-          <Avatar
-            key={i}
-            id={member.userId}
-            name={member.name}
-            size={size}
-            src={avatarUrl ?? undefined}
-          />
-        );
-      })}
-    </AvatarStack>
-  );
-};

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";
@@ -60,7 +61,7 @@ export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
   const { t } = useTranslation();
 
   useEffect(() => {
-    console.error(error);
+    logger.error(error);
     Sentry.captureException(error);
   }, [error]);
 

src/Header.module.css

@@ -111,7 +111,6 @@ limitations under the License.
   display: flex;
   align-items: center;
   gap: var(--cpd-space-1-5x);
-  font: var(--cpd-font-body-sm-medium);
 }
 
 @media (min-width: 800px) {

src/Header.tsx

@@ -18,13 +18,12 @@ import classNames from "classnames";
 import { FC, HTMLAttributes, ReactNode } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
+import { Heading, Text } from "@vector-im/compound-web";
-import { Heading } from "@vector-im/compound-web";
+import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg?react";
 
 import styles from "./Header.module.css";
-import { ReactComponent as Logo } from "./icons/Logo.svg";
+import Logo from "./icons/Logo.svg?react";
 import { Avatar, Size } from "./Avatar";
-import { Facepile } from "./Facepile";
 import { EncryptionLock } from "./room/EncryptionLock";
 import { useMediaQuery } from "./useMediaQuery";
 
@@ -118,8 +117,7 @@ interface RoomHeaderInfoProps {
   name: string;
   avatarUrl: string | null;
   encrypted: boolean;
-  participants: RoomMember[];
+  participantCount: number;
-  client: MatrixClient;
 }
 
 export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
@@ -127,8 +125,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
   name,
   avatarUrl,
   encrypted,
-  participants,
+  participantCount,
-  client,
 }) => {
   const { t } = useTranslation();
   const size = useMediaQuery("(max-width: 550px)") ? "sm" : "lg";
@@ -153,10 +150,16 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
         </Heading>
         <EncryptionLock encrypted={encrypted} />
       </div>
-      {participants.length > 0 && (
+      {participantCount > 0 && (
         <div className={styles.participantsLine}>
-          <Facepile client={client} members={participants} size={20} />
+          <UserProfileIcon
-          {t("{{count, number}}", { count: participants.length })}
+            width={20}
+            height={20}
+            aria-label={t("Participants")}
+          />
+          <Text as="span" size="sm" weight="medium">
+            {t("{{count, number}}", { count: participantCount })}
+          </Text>
         </div>
       )}
     </div>

src/Modal.module.css

@@ -14,96 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.overlay {
-  position: fixed;
-  z-index: 100;
-  inset: 0;
-  background: rgba(3, 12, 27, 0.528);
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.dialogOverlay[data-state="open"] {
-  animation: fade-in 200ms;
-}
-
-@keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-.dialogOverlay[data-state="closed"] {
-  animation: fade-out 130ms;
-}
-
 .modal {
-  position: fixed;
-  z-index: 101;
   display: flex;
   flex-direction: column;
 }
 
 .dialog {
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
   box-sizing: border-box;
   inline-size: 520px;
   max-inline-size: 90%;
   max-block-size: 600px;
 }
 
-@keyframes zoom-in {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(80%);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(100%);
-  }
-}
-
-@keyframes zoom-out {
-  from {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(100%);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(80%);
-  }
-}
-
-.dialog[data-state="open"] {
-  animation: zoom-in 200ms;
-}
-
-.dialog[data-state="closed"] {
-  animation: zoom-out 130ms;
-}
-
-@media (prefers-reduced-motion) {
-  .dialog[data-state="open"] {
-    animation-name: fade-in;
-  }
-
-  .dialog[data-state="closed"] {
-    animation-name: fade-out;
-  }
-}
-
 .content {
   display: flex;
   flex-direction: column;

src/Modal.tsx

@@ -27,11 +27,12 @@ import {
 } from "@radix-ui/react-dialog";
 import { Drawer } from "vaul";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { ReactComponent as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
+import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg?react";
 import classNames from "classnames";
 import { Heading } from "@vector-im/compound-web";
 
 import styles from "./Modal.module.css";
+import overlayStyles from "./Overlay.module.css";
 import { useMediaQuery } from "./useMediaQuery";
 import { Glass } from "./Glass";
 
@@ -85,9 +86,14 @@ export const Modal: FC<Props> = ({
         dismissible={onDismiss !== undefined}
       >
         <Drawer.Portal>
-          <Drawer.Overlay className={styles.overlay} />
+          <Drawer.Overlay className={classNames(overlayStyles.bg)} />
           <Drawer.Content
-            className={classNames(className, styles.modal, styles.drawer)}
+            className={classNames(
+              className,
+              overlayStyles.overlay,
+              styles.modal,
+              styles.drawer
+            )}
             {...rest}
           >
             <div className={styles.content}>
@@ -108,12 +114,18 @@ export const Modal: FC<Props> = ({
       <DialogRoot open={open} onOpenChange={onOpenChange}>
         <DialogPortal>
           <DialogOverlay
-            className={classNames(styles.overlay, styles.dialogOverlay)}
+            className={classNames(overlayStyles.bg, overlayStyles.animate)}
           />
           <DialogContent asChild {...rest}>
             <Glass
               frosted
-              className={classNames(className, styles.modal, styles.dialog)}
+              className={classNames(
+                className,
+                overlayStyles.overlay,
+                overlayStyles.animate,
+                styles.modal,
+                styles.dialog
+              )}
             >
               <div className={styles.content}>
                 <div className={styles.header}>

src/Overlay.module.css

@@ -0,0 +1,99 @@
+/*
+Copyright 2023 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.
+*/
+
+.bg {
+  position: fixed;
+  z-index: 100;
+  inset: 0;
+  background: rgba(3, 12, 27, 0.528);
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.bg.animate[data-state="open"] {
+  animation: fade-in 200ms;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.bg.animate[data-state="closed"] {
+  animation: fade-out 130ms;
+}
+
+.overlay {
+  position: fixed;
+  z-index: 101;
+}
+
+.overlay.animate {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes zoom-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(80%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(100%);
+  }
+}
+
+@keyframes zoom-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(100%);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(80%);
+  }
+}
+
+.overlay.animate[data-state="open"] {
+  animation: zoom-in 200ms;
+}
+
+.overlay.animate[data-state="closed"] {
+  animation: zoom-out 130ms;
+}
+
+@media (prefers-reduced-motion) {
+  .overlay.animate[data-state="open"] {
+    animation-name: fade-in;
+  }
+
+  .overlay.animate[data-state="closed"] {
+    animation-name: fade-out;
+  }
+}

src/SequenceDiagramViewerPage.tsx

@@ -1,72 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FC, useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import {
-  SequenceDiagramViewer,
-  SequenceDiagramMatrixEvent,
-} from "./room/GroupCallInspector";
-import { FieldRow, InputField } from "./input/Input";
-import { usePageTitle } from "./usePageTitle";
-
-interface DebugLog {
-  localUserId: string;
-  eventsByUserId: { [userId: string]: SequenceDiagramMatrixEvent[] };
-  remoteUserIds: string[];
-}
-
-export const SequenceDiagramViewerPage: FC = () => {
-  const { t } = useTranslation();
-  usePageTitle(t("Inspector"));
-
-  const [debugLog, setDebugLog] = useState<DebugLog>();
-  const [selectedUserId, setSelectedUserId] = useState<string>();
-
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const onChangeDebugLog = useCallback((e) => {
-    if (e.target.files && e.target.files.length > 0) {
-      e.target.files[0].text().then((text: string) => {
-        setDebugLog(JSON.parse(text));
-      });
-    }
-  }, []);
-
-  return (
-    <div style={{ marginTop: 20 }}>
-      <FieldRow>
-        <InputField
-          type="file"
-          id="debugLog"
-          name="debugLog"
-          label={t("Debug log")}
-          onChange={onChangeDebugLog}
-        />
-      </FieldRow>
-      {debugLog && selectedUserId && (
-        <SequenceDiagramViewer
-          localUserId={debugLog.localUserId}
-          selectedUserId={selectedUserId}
-          onSelectUserId={setSelectedUserId}
-          remoteUserIds={debugLog.remoteUserIds}
-          events={debugLog.eventsByUserId[selectedUserId]}
-        />
-      )}
-    </div>
-  );
-};

src/Toast.module.css

@@ -0,0 +1,38 @@
+/*
+Copyright 2023 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.
+*/
+
+.toast {
+  color: var(--cpd-color-text-on-solid-primary);
+  background: var(--cpd-color-alpha-gray-1200);
+  padding-inline: var(--cpd-space-3x);
+  padding-block: var(--cpd-space-1x);
+  border: none;
+  border-radius: var(--cpd-radius-pill-effect);
+  box-shadow: var(--small-drop-shadow);
+  display: flex;
+  align-items: center;
+  gap: var(--cpd-space-1x);
+}
+
+.toast > h3 {
+  margin: 0;
+}
+
+.toast > svg {
+  color: var(--cpd-color-icon-on-solid-primary);
+  flex-shrink: 0;
+  margin-inline-end: calc(-1 * var(--cpd-space-1x));
+}

src/Toast.tsx

@@ -0,0 +1,108 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  ComponentType,
+  FC,
+  SVGAttributes,
+  useCallback,
+  useEffect,
+} from "react";
+import {
+  Root as DialogRoot,
+  Portal as DialogPortal,
+  Overlay as DialogOverlay,
+  Content as DialogContent,
+  Close as DialogClose,
+  Title as DialogTitle,
+} from "@radix-ui/react-dialog";
+import classNames from "classnames";
+import { Text } from "@vector-im/compound-web";
+
+import styles from "./Toast.module.css";
+import overlayStyles from "./Overlay.module.css";
+
+interface Props {
+  /**
+   * The controlled open state of the toast.
+   */
+  open: boolean;
+  /**
+   * Callback for when the user dismisses the toast.
+   */
+  onDismiss: () => void;
+  /**
+   * A number of milliseconds after which the toast should be automatically
+   * dismissed.
+   */
+  autoDismiss?: number;
+  children: string;
+  /**
+   * A supporting icon to display within the toast.
+   */
+  Icon?: ComponentType<SVGAttributes<SVGElement>>;
+}
+
+/**
+ * A temporary message shown in an overlay in the center of the screen.
+ */
+export const Toast: FC<Props> = ({
+  open,
+  onDismiss,
+  autoDismiss,
+  children,
+  Icon,
+}) => {
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) onDismiss();
+    },
+    [onDismiss]
+  );
+
+  useEffect(() => {
+    if (open && autoDismiss !== undefined) {
+      const timeout = setTimeout(onDismiss, autoDismiss);
+      return () => clearTimeout(timeout);
+    }
+  }, [open, autoDismiss, onDismiss]);
+
+  return (
+    <DialogRoot open={open} onOpenChange={onOpenChange}>
+      <DialogPortal>
+        <DialogOverlay
+          className={classNames(overlayStyles.bg, overlayStyles.animate)}
+        />
+        <DialogContent asChild>
+          <DialogClose
+            className={classNames(
+              overlayStyles.overlay,
+              overlayStyles.animate,
+              styles.toast
+            )}
+          >
+            <DialogTitle asChild>
+              <Text as="h3" size="sm" weight="semibold">
+                {children}
+              </Text>
+            </DialogTitle>
+            {Icon && <Icon width={20} height={20} aria-hidden />}
+          </DialogClose>
+        </DialogContent>
+      </DialogPortal>
+    </DialogRoot>
+  );
+};

src/UrlParams.ts

@@ -33,6 +33,9 @@ interface RoomIdentifier {
 // clearer what each flag means, and helps us avoid coupling Element Call's
 // behavior to the needs of specific consumers.
 interface UrlParams {
+  // Widget api related params
+  widgetId: string | null;
+  parentUrl: string | null;
   /**
    * Anything about what room we're pointed to should be from useRoomIdentifier which
    * parses the path and resolves alias with respect to the default server name, however
@@ -178,6 +181,9 @@ export const getUrlParams = (
   const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
 
   return {
+    widgetId: parser.getParam("widgetId"),
+    parentUrl: parser.getParam("parentUrl"),
+
     // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
     // what would we do if it were invalid? If the widget API says that's what
     // the room ID is, then that's what it is.
@@ -218,33 +224,39 @@ export function getRoomIdentifierFromUrl(
   hash: string
 ): RoomIdentifier {
   let roomAlias: string | null = null;
+  pathname = pathname.substring(1); // Strip the "/"
+  const pathComponents = pathname.split("/");
+  const pathHasRoom = pathComponents[0] == "room";
+  const hasRoomAlias = pathComponents.length > 1;
 
-  // Here we handle the beginning of the alias and make sure it starts with a "#"
+  // What type is our url: roomAlias in hash, room alias as the search path, roomAlias after /room/
   if (hash === "" || hash.startsWith("#?")) {
-    roomAlias = pathname.substring(1); // Strip the "/"
+    if (hasRoomAlias && pathHasRoom) {
-
+      roomAlias = pathComponents[1];
-    // Delete "/room/", if present
-    if (roomAlias.startsWith("room/")) {
-      roomAlias = roomAlias.substring("room/".length);
     }
-    // Add "#", if not present
+    if (!pathHasRoom) {
-    if (!roomAlias.startsWith("#")) {
+      roomAlias = pathComponents[0];
-      roomAlias = `#${roomAlias}`;
     }
   } else {
     roomAlias = hash;
   }
 
   // Delete "?" and what comes afterwards
-  roomAlias = roomAlias.split("?")[0];
+  roomAlias = roomAlias?.split("?")[0] ?? null;
 
-  if (roomAlias.length <= 1) {
+  if (roomAlias) {
     // Make roomAlias is null, if it only is a "#"
-    roomAlias = null;
+    if (roomAlias.length <= 1) {
-  } else {
+      roomAlias = null;
-    // Add server part, if not present
+    } else {
-    if (!roomAlias.includes(":")) {
+      // Add "#", if not present
-      roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
+      if (!roomAlias.startsWith("#")) {
+        roomAlias = `#${roomAlias}`;
+      }
+      // Add server part, if not present
+      if (!roomAlias.includes(":")) {
+        roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
+      }
     }
   }
 

src/UserMenu.tsx

@@ -24,10 +24,10 @@ import { PopoverMenuTrigger } from "./popover/PopoverMenu";
 import { Menu } from "./Menu";
 import { TooltipTrigger } from "./Tooltip";
 import { Avatar, Size } from "./Avatar";
-import { ReactComponent as UserIcon } from "./icons/User.svg";
+import UserIcon from "./icons/User.svg?react";
-import { ReactComponent as SettingsIcon } from "./icons/Settings.svg";
+import SettingsIcon from "./icons/Settings.svg?react";
-import { ReactComponent as LoginIcon } from "./icons/Login.svg";
+import LoginIcon from "./icons/Login.svg?react";
-import { ReactComponent as LogoutIcon } from "./icons/Logout.svg";
+import LogoutIcon from "./icons/Logout.svg?react";
 import { Body } from "./typography/Typography";
 import styles from "./UserMenu.module.css";
 

src/auth/LoginPage.tsx

@@ -18,7 +18,7 @@ import { FC, FormEvent, useCallback, useRef, useState } from "react";
 import { useHistory, useLocation, Link } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 
-import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
+import Logo from "../icons/LogoLarge.svg?react";
 import { useClient } from "../ClientContext";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";

src/auth/RegisterPage.tsx

@@ -27,13 +27,14 @@ 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";
 import { useClientLegacy } from "../ClientContext";
 import { useInteractiveRegistration } from "./useInteractiveRegistration";
 import styles from "./LoginPage.module.css";
-import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
+import Logo from "../icons/LogoLarge.svg?react";
 import { LoadingView } from "../FullScreenView";
 import { useRecaptcha } from "./useRecaptcha";
 import { Caption, Link } from "../typography/Typography";
@@ -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";
 
@@ -78,7 +79,7 @@ export function 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/button/Button.tsx

@@ -20,18 +20,18 @@ import { useButton } from "@react-aria/button";
 import { mergeProps, useObjectRef } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "@vector-im/compound-web";
-import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
+import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react";
-import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg";
+import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react";
-import { ReactComponent as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call.svg";
+import VideoCallIcon from "@vector-im/compound-design-tokens/icons/video-call.svg?react";
-import { ReactComponent as VideoCallOffIcon } from "@vector-im/compound-design-tokens/icons/video-call-off.svg";
+import VideoCallOffIcon from "@vector-im/compound-design-tokens/icons/video-call-off.svg?react";
-import { ReactComponent as EndCallIcon } from "@vector-im/compound-design-tokens/icons/end-call.svg";
+import EndCallIcon from "@vector-im/compound-design-tokens/icons/end-call.svg?react";
-import { ReactComponent as ShareScreenSolidIcon } from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg";
+import ShareScreenSolidIcon from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg?react";
-import { ReactComponent as SettingsSolidIcon } from "@vector-im/compound-design-tokens/icons/settings-solid.svg";
+import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-solid.svg?react";
-import { ReactComponent as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";
+import ChevronDownIcon from "@vector-im/compound-design-tokens/icons/chevron-down.svg?react";
 
 import styles from "./Button.module.css";
-import { ReactComponent as Fullscreen } from "../icons/Fullscreen.svg";
+import Fullscreen from "../icons/Fullscreen.svg?react";
-import { ReactComponent as FullscreenExit } from "../icons/FullscreenExit.svg";
+import FullscreenExit from "../icons/FullscreenExit.svg?react";
 import { VolumeIcon } from "./VolumeIcon";
 
 export type ButtonVariant =

src/button/CopyButton.tsx

@@ -18,8 +18,8 @@ import { useTranslation } from "react-i18next";
 import useClipboard from "react-use-clipboard";
 import { FC } from "react";
 
-import { ReactComponent as CheckIcon } from "../icons/Check.svg";
+import CheckIcon from "../icons/Check.svg?react";
-import { ReactComponent as CopyIcon } from "../icons/Copy.svg";
+import CopyIcon from "../icons/Copy.svg?react";
 import { Button, ButtonVariant } from "./Button";
 
 interface Props {

src/button/InviteButton.tsx

@@ -17,15 +17,15 @@ limitations under the License.
 import { ComponentPropsWithoutRef, FC } from "react";
 import { Button } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
-import { ReactComponent as UserAddSolidIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg";
+import UserAddSolidIcon from "@vector-im/compound-design-tokens/icons/user-add-solid.svg?react";
 
-export const ShareButton: FC<
+export const InviteButton: FC<
   Omit<ComponentPropsWithoutRef<"button">, "children">
 > = (props) => {
   const { t } = useTranslation();
   return (
     <Button kind="secondary" size="sm" Icon={UserAddSolidIcon} {...props}>
-      {t("Share")}
+      {t("Invite")}
     </Button>
   );
 };

src/button/VolumeIcon.tsx

@@ -17,9 +17,9 @@ limitations under the License.
 
 import { ComponentPropsWithoutRef, FC } from "react";
 
-import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg";
+import AudioMuted from "../icons/AudioMuted.svg?react";
-import { ReactComponent as AudioLow } from "../icons/AudioLow.svg";
+import AudioLow from "../icons/AudioLow.svg?react";
-import { ReactComponent as Audio } from "../icons/Audio.svg";
+import Audio from "../icons/Audio.svg?react";
 
 interface Props extends ComponentPropsWithoutRef<"svg"> {
   /**

src/e2ee/sharedKeyManagement.ts

@@ -19,7 +19,7 @@ import { useEffect, useMemo } from "react";
 import { useEnableE2EE } from "../settings/useSetting";
 import { useLocalStorage } from "../useLocalStorage";
 import { useClient } from "../ClientContext";
-import { PASSWORD_STRING, useUrlParams } from "../UrlParams";
+import { useUrlParams } from "../UrlParams";
 import { widget } from "../widget";
 
 export const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
@@ -60,29 +60,6 @@ export const useRoomSharedKey = (roomId: string): string | null => {
   return useInternalRoomSharedKey(roomId)[0] ?? passwordFormUrl;
 };
 
-export const useManageRoomSharedKey = (roomId: string): string | null => {
-  const urlParams = useUrlParams();
-
-  const urlPassword = useKeyFromUrl(roomId);
-
-  const [e2eeSharedKey] = useInternalRoomSharedKey(roomId);
-
-  useEffect(() => {
-    const hash = location.hash;
-
-    if (!hash.includes("?")) return;
-    if (!hash.includes(PASSWORD_STRING)) return;
-    if (urlParams.password !== e2eeSharedKey) return;
-
-    const [hashStart, passwordStart] = hash.split(PASSWORD_STRING);
-    const hashEnd = passwordStart.split("&").slice(1).join("&");
-
-    location.replace((hashStart ?? "") + (hashEnd ?? ""));
-  }, [urlParams, e2eeSharedKey]);
-
-  return e2eeSharedKey ?? urlPassword;
-};
-
 export const useIsRoomE2EE = (roomId: string): boolean | null => {
   const { client } = useClient();
   const room = useMemo(() => client?.getRoom(roomId) ?? null, [roomId, client]);

src/home/CallList.tsx

@@ -71,9 +71,11 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
   return (
     <div className={styles.callTile}>
       <Link
-        // note we explicitly omit the password here as we don't want it on this link because
+        to={getRelativeRoomUrl(
-        // it's just for the user to navigate around and not for sharing
+          room.roomId,
-        to={getRelativeRoomUrl(room.roomId, room.name)}
+          room.name,
+          roomSharedKey ?? undefined
+        )}
         className={styles.callTileLink}
       >
         <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />

src/home/RegisteredView.tsx

@@ -17,9 +17,9 @@ limitations under the License.
 import { useState, useCallback, FormEvent, FormEventHandler, FC } from "react";
 import { useHistory } from "react-router-dom";
 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,
@@ -41,8 +41,6 @@ import { Form } from "../form/Form";
 import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { E2EEBanner } from "../E2EEBanner";
-import { setLocalStorageItem } from "../useLocalStorage";
-import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
 
 interface Props {
   client: MatrixClient;
@@ -76,18 +74,19 @@ export const RegisteredView: FC<Props> = ({ client }) => {
         setError(undefined);
         setLoading(true);
 
-        const roomId = (
+        const createRoomResult = await createRoom(
-          await createRoom(client, roomName, e2eeEnabled ?? false)
+          client,
-        )[1];
+          roomName,
+          e2eeEnabled ?? false
+        );
 
-        if (e2eeEnabled) {
+        history.push(
-          setLocalStorageItem(
+          getRelativeRoomUrl(
-            getRoomSharedKeyLocalStorageKey(roomId),
+            createRoomResult.roomId,
-            randomString(32)
+            roomName,
-          );
+            createRoomResult.password
-        }
+          )
-
+        );
-        history.push(getRelativeRoomUrl(roomId, roomName));
       }
 
       submit().catch((error) => {
@@ -97,7 +96,7 @@ export const RegisteredView: FC<Props> = ({ client }) => {
           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";
@@ -43,8 +44,6 @@ import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
 import { Config } from "../config/Config";
 import { E2EEBanner } from "../E2EEBanner";
-import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
-import { setLocalStorageItem } from "../useLocalStorage";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
@@ -86,18 +85,13 @@ export const UnauthenticatedView: FC = () => {
           true
         );
 
-        let roomId: string;
+        let createRoomResult;
         try {
-          roomId = (
+          createRoomResult = await createRoom(
-            await createRoom(client, roomName, e2eeEnabled ?? false)
+            client,
-          )[1];
+            roomName,
-
+            e2eeEnabled ?? false
-          if (e2eeEnabled) {
+          );
-            setLocalStorageItem(
-              getRoomSharedKeyLocalStorageKey(roomId),
-              randomString(32)
-            );
-          }
         } catch (error) {
           if (!setClient) {
             throw error;
@@ -126,11 +120,17 @@ export const UnauthenticatedView: FC = () => {
         }
 
         setClient({ client, session });
-        history.push(getRelativeRoomUrl(roomId, roomName));
+        history.push(
+          getRelativeRoomUrl(
+            createRoomResult.roomId,
+            roomName,
+            createRoomResult.password
+          )
+        );
       }
 
       submit().catch((error) => {
-        console.error(error);
+        logger.error(error);
         setLoading(false);
         setError(error);
         reset();

src/index.css

@@ -41,8 +41,12 @@ limitations under the License.
 
   --cpd-color-border-accent: var(--cpd-color-green-800);
   /* The distance to inset non-full-width content from the edge of the window
-  along the inline axis */
+  along the inline axis. This ramps up from 16px for typical mobile windows, to
-  --inline-content-inset: max(var(--cpd-space-4x), calc((100vw - 1180px) / 2));
+  96px for typical desktop windows. */
+  --inline-content-inset: min(
+    var(--cpd-space-24x),
+    max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
+  );
   --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
   --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   --background-gradient: url("graphics/backgroundGradient.svg");

src/input/AvatarInputField.tsx

@@ -28,7 +28,7 @@ import { useTranslation } from "react-i18next";
 
 import { Avatar, Size } from "../Avatar";
 import { Button } from "../button";
-import { ReactComponent as EditIcon } from "../icons/Edit.svg";
+import EditIcon from "../icons/Edit.svg?react";
 import styles from "./AvatarInputField.module.css";
 
 interface Props extends AllHTMLAttributes<HTMLInputElement> {

src/input/Input.tsx

@@ -25,7 +25,7 @@ import {
 import classNames from "classnames";
 
 import styles from "./Input.module.css";
-import { ReactComponent as CheckIcon } from "../icons/Check.svg";
+import CheckIcon from "../icons/Check.svg?react";
 import { TranslatedError } from "../TranslatedError";
 
 interface FieldRowProps {

src/input/SelectInput.tsx

@@ -24,7 +24,7 @@ import { useTranslation } from "react-i18next";
 import { Popover } from "../popover/Popover";
 import { ListBox } from "../ListBox";
 import styles from "./SelectInput.module.css";
-import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
+import ArrowDownIcon from "../icons/ArrowDown.svg?react";
 
 interface Props extends AriaSelectOptions<object> {
   className?: string;

src/input/StarRatingInput.tsx

@@ -17,8 +17,8 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import styles from "./StarRatingInput.module.css";
-import { ReactComponent as StarSelected } from "../icons/StarSelected.svg";
+import StarSelected from "../icons/StarSelected.svg?react";
-import { ReactComponent as StarUnselected } from "../icons/StarUnselected.svg";
+import StarUnselected from "../icons/StarUnselected.svg?react";
 
 interface Props {
   starCount: number;

src/livekit/useLiveKit.ts

@@ -20,6 +20,7 @@ import {
   ExternalE2EEKeyProvider,
   Room,
   RoomOptions,
+  Track,
 } from "livekit-client";
 import { useLiveKitRoom } from "@livekit/components-react";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -100,6 +101,17 @@ export function useLiveKit(
   // block audio from being enabled until the connection is finished.
   const [blockAudio, setBlockAudio] = useState(true);
 
+  // Store if audio/video are currently updating. If to prohibit unnecessary calls
+  // to setMicrophoneEnabled/setCameraEnabled
+  const audioMuteUpdating = useRef(false);
+  const videoMuteUpdating = useRef(false);
+  // Store the current button mute state that gets passed to this hook via props.
+  // We need to store it for awaited code that relies on the current value.
+  const buttonEnabled = useRef({
+    audio: initialMuteStates.current.audio.enabled,
+    video: initialMuteStates.current.video.enabled,
+  });
+
   // We have to create the room manually here due to a bug inside
   // @livekit/components-react. JSON.stringify() is used in deps of a
   // useEffect() with an argument that references itself, if E2EE is enabled
@@ -136,20 +148,50 @@ export function useLiveKit(
     // and setting tracks to be enabled during this time causes errors.
     if (room !== undefined && connectionState === ConnectionState.Connected) {
       const participant = room.localParticipant;
-      if (participant.isMicrophoneEnabled !== muteStates.audio.enabled) {
+      // Always update the muteButtonState Ref so that we can read the current
-        participant
+      // state in awaited blocks.
-          .setMicrophoneEnabled(muteStates.audio.enabled)
+      buttonEnabled.current = {
-          .catch((e) =>
+        audio: muteStates.audio.enabled,
-            logger.error("Failed to sync audio mute state with LiveKit", e)
+        video: muteStates.video.enabled,
-          );
+      };
-      }
+      const syncMuteStateAudio = async (): Promise<void> => {
-      if (participant.isCameraEnabled !== muteStates.video.enabled) {
+        if (
-        participant
+          participant.isMicrophoneEnabled !== buttonEnabled.current.audio &&
-          .setCameraEnabled(muteStates.video.enabled)
+          !audioMuteUpdating.current
-          .catch((e) =>
+        ) {
-            logger.error("Failed to sync video mute state with LiveKit", e)
+          audioMuteUpdating.current = true;
-          );
+          try {
-      }
+            await participant.setMicrophoneEnabled(buttonEnabled.current.audio);
+          } catch (e) {
+            logger.error("Failed to sync audio mute state with LiveKit", e);
+          }
+          audioMuteUpdating.current = false;
+          // Run the check again after the change is done. Because the user
+          // can update the state (presses mute button) while the device is enabling
+          // itself we need might need to update the mute state right away.
+          // This async recursion makes sure that setCamera/MicrophoneEnabled is
+          // called as little times as possible.
+          syncMuteStateAudio();
+        }
+      };
+      const syncMuteStateVideo = async (): Promise<void> => {
+        if (
+          participant.isCameraEnabled !== buttonEnabled.current.video &&
+          !videoMuteUpdating.current
+        ) {
+          videoMuteUpdating.current = true;
+          try {
+            await participant.setCameraEnabled(buttonEnabled.current.video);
+          } catch (e) {
+            logger.error("Failed to sync audio mute state with LiveKit", e);
+          }
+          videoMuteUpdating.current = false;
+          // see above
+          syncMuteStateVideo();
+        }
+      };
+      syncMuteStateAudio();
+      syncMuteStateVideo();
     }
   }, [room, muteStates, connectionState]);
 
@@ -158,12 +200,54 @@ export function useLiveKit(
     if (room !== undefined && connectionState === ConnectionState.Connected) {
       const syncDevice = (kind: MediaDeviceKind, device: MediaDevice): void => {
         const id = device.selectedId;
-        if (id !== undefined && room.getActiveDevice(kind) !== id) {
+
-          room
+        // Detect if we're trying to use chrome's default device, in which case
-            .switchActiveDevice(kind, id)
+        // we need to to see if the default device has changed to a different device
-            .catch((e) =>
+        // by comparing the group ID of the device we're using against the group ID
-              logger.error(`Failed to sync ${kind} device with LiveKit`, e)
+        // of what the default device is *now*.
-            );
+        // This is special-cased for only audio inputs because we need to dig around
+        // in the LocalParticipant object for the track object and there's not a nice
+        // way to do that generically. There is usually no OS-level default video capture
+        // device anyway, and audio outputs work differently.
+        if (
+          id === "default" &&
+          kind === "audioinput" &&
+          room.options.audioCaptureDefaults?.deviceId === "default"
+        ) {
+          const activeMicTrack = Array.from(
+            room.localParticipant.audioTracks.values()
+          ).find((d) => d.source === Track.Source.Microphone)?.track;
+
+          const defaultDevice = device.available.find(
+            (d) => d.deviceId === "default"
+          );
+          if (
+            defaultDevice &&
+            activeMicTrack &&
+            // only restart if the stream is still running: LiveKit will detect
+            // when a track stops & restart appropriately, so this is not our job.
+            // Plus, we need to avoid restarting again if the track is already in
+            // the process of being restarted.
+            activeMicTrack.mediaStreamTrack.readyState !== "ended" &&
+            defaultDevice.groupId !==
+              activeMicTrack.mediaStreamTrack.getSettings().groupId
+          ) {
+            // It's different, so restart the track, ie. cause Livekit to do another
+            // getUserMedia() call with deviceId: default to get the *new* default device.
+            // Note that room.switchActiveDevice() won't work: Livekit will ignore it because
+            // the deviceId hasn't changed (was & still is default).
+            room.localParticipant
+              .getTrack(Track.Source.Microphone)
+              ?.audioTrack?.restartTrack();
+          }
+        } else {
+          if (id !== undefined && room.getActiveDevice(kind) !== id) {
+            room
+              .switchActiveDevice(kind, id)
+              .catch((e) =>
+                logger.error(`Failed to sync ${kind} device with LiveKit`, e)
+              );
+          }
         }
       };
 

src/main.tsx

@@ -24,20 +24,21 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserHistory } from "history";
 import "./index.css";
-import { setLogLevel as setLKLogLevel } from "livekit-client";
+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();
-// set livekit's log level: we do this after initialising rageshakes because
+setLogLevel("debug");
-// we need rageshake to do its monkey patching first, so the livekit
+setLKLogExtension(global.mx_rage_logger.log);
-// logger gets the patched log funxction, so it picks up livekit's
-// logs.
-setLKLogLevel("debug");
 
-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

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-2023 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.
@@ -35,6 +35,8 @@ import IndexedDBWorker from "./IndexedDBWorker?worker";
 import { getUrlParams, PASSWORD_STRING } from "./UrlParams";
 import { loadOlm } from "./olm";
 import { Config } from "./config/Config";
+import { setLocalStorageItem } from "./useLocalStorage";
+import { getRoomSharedKeyLocalStorageKey } from "./e2ee/sharedKeyManagement";
 
 export const fallbackICEServerAllowed =
   import.meta.env.VITE_FALLBACK_STUN_ALLOWED === "true";
@@ -71,6 +73,23 @@ function waitForSync(client: MatrixClient): Promise<void> {
   });
 }
 
+function secureRandomString(entropyBytes: number): string {
+  const key = new Uint8Array(entropyBytes);
+  crypto.getRandomValues(key);
+  // encode to base64url as this value goes into URLs
+  // base64url is just base64 with thw two non-alphanum characters swapped out for
+  // ones that can be put in a URL without encoding. Browser JS has a native impl
+  // for base64 encoding but only a string (there isn't one that takes a UInt8Array
+  // yet) so just use the built-in one and convert, replace the chars and strip the
+  // padding from the end (otherwise we'd need to pull in another dependency).
+  return btoa(
+    key.reduce((acc, current) => acc + String.fromCharCode(current), "")
+  )
+    .replace("+", "-")
+    .replace("/", "_")
+    .replace(/=*$/, "");
+}
+
 /**
  * Initialises and returns a new standalone Matrix Client.
  * If true is passed for the 'restore' parameter, a check will be made
@@ -177,7 +196,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
     );
@@ -269,11 +288,17 @@ export function isLocalRoomId(roomId: string, client: MatrixClient): boolean {
   return parts[1] === client.getDomain();
 }
 
+interface CreateRoomResult {
+  roomId: string;
+  alias?: string;
+  password?: string;
+}
+
 export async function createRoom(
   client: MatrixClient,
   name: string,
   e2ee: boolean
-): Promise<[string, string]> {
+): Promise<CreateRoomResult> {
   logger.log(`Creating room for group call`);
   const createPromise = client.createRoom({
     visibility: Visibility.Private,
@@ -336,7 +361,20 @@ export async function createRoom(
     true
   );
 
-  return [fullAliasFromRoomName(name, client), result.room_id];
+  let password;
+  if (e2ee) {
+    password = secureRandomString(16);
+    setLocalStorageItem(
+      getRoomSharedKeyLocalStorageKey(result.room_id),
+      password
+    );
+  }
+
+  return {
+    roomId: result.room_id,
+    alias: e2ee ? undefined : fullAliasFromRoomName(name, client),
+    password,
+  };
 }
 
 /**
@@ -366,9 +404,16 @@ export function getRelativeRoomUrl(
   roomName?: string,
   password?: string
 ): string {
+  // The password shouldn't need URL encoding here (we generate URL-safe ones) but encode
+  // it in case it came from another client that generated a non url-safe one
+  const encodedPassword = password ? encodeURIComponent(password) : undefined;
+  if (password && encodedPassword !== password) {
+    logger.info("Encoded call password used non URL-safe chars: buggy client?");
+  }
+
   return `/room/#${
     roomName ? "/" + roomAliasLocalpartFromRoomName(roomName) : ""
-  }?roomId=${roomId}${password ? "&" + PASSWORD_STRING + password : ""}`;
+  }?roomId=${roomId}${password ? "&" + PASSWORD_STRING + encodedPassword : ""}`;
 }
 
 export function getAvatarUrl(

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;
@@ -131,7 +132,7 @@ export function useProfile(client: MatrixClient | undefined): UseProfile {
           }));
         }
       } else {
-        console.error("Client not initialized before calling saveProfile");
+        logger.error("Client not initialized before calling saveProfile");
       }
     },
     [client]

src/room/AppSelectionModal.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Text } from "@vector-im/compound-web";
-import { ReactComponent as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg";
+import PopOutIcon from "@vector-im/compound-design-tokens/icons/pop-out.svg?react";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { Modal } from "../Modal";

src/room/EncryptionLock.tsx

@@ -17,8 +17,8 @@ limitations under the License.
 import { FC } from "react";
 import { Tooltip } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
-import { ReactComponent as LockIcon } from "@vector-im/compound-design-tokens/icons/lock.svg";
+import LockIcon from "@vector-im/compound-design-tokens/icons/lock.svg?react";
-import { ReactComponent as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg";
+import LockOffIcon from "@vector-im/compound-design-tokens/icons/lock-off.svg?react";
 
 import styles from "./EncryptionLock.module.css";
 

src/room/GroupCallInspector.module.css

@@ -1,41 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.inspector {
-  background-color: var(--cpd-color-bg-subtle-secondary);
-}
-
-.scrollContainer {
-  height: 100%;
-  overflow-y: auto;
-}
-
-.sequenceDiagramViewer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
-}
-
-.selectInput {
-  align-self: flex-start;
-}
-
-.sequenceDiagramViewer :global(.messageText) {
-  font-size: var(--font-size-caption);
-  fill: var(--cpd-color-text-primary) !important;
-  stroke: var(--cpd-color-text-primary) !important;
-}

src/room/GroupCallInspector.tsx

@@ -1,543 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import * as Sentry from "@sentry/react";
-import { Resizable } from "re-resizable";
-import {
-  useEffect,
-  useState,
-  useReducer,
-  useRef,
-  createContext,
-  useContext,
-  Dispatch,
-  SetStateAction,
-  FC,
-  PropsWithChildren,
-} from "react";
-import ReactJson, { CollapsedFieldProps } from "react-json-view";
-import mermaid from "mermaid";
-import { Item } from "@react-stately/collections";
-import { MatrixEvent, IContent } from "matrix-js-sdk/src/models/event";
-import {
-  GroupCall,
-  GroupCallError,
-  GroupCallEvent,
-} from "matrix-js-sdk/src/webrtc/groupCall";
-import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
-import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
-import {
-  CallEvent,
-  CallState,
-  CallError,
-  MatrixCall,
-  VoipEvent,
-} from "matrix-js-sdk/src/webrtc/call";
-
-import styles from "./GroupCallInspector.module.css";
-import { SelectInput } from "../input/SelectInput";
-import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
-import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
-
-interface InspectorContextState {
-  eventsByUserId?: { [userId: string]: SequenceDiagramMatrixEvent[] };
-  remoteUserIds?: string[];
-  localUserId?: string;
-  localSessionId?: string;
-}
-
-const defaultCollapsedFields = [
-  "org.matrix.msc3401.call",
-  "org.matrix.msc3401.call.member",
-  "calls",
-  "callStats",
-  "hangupCalls",
-  "toDeviceEvents",
-  "sentVoipEvents",
-  "content",
-];
-
-function shouldCollapse({ name }: CollapsedFieldProps): boolean {
-  return name ? defaultCollapsedFields.includes(name) : false;
-}
-
-function getUserName(userId: string): string {
-  const match = userId.match(/@([^:]+):/);
-
-  return match && match.length > 0
-    ? match[1].replace("-", " ").replace(/\W/g, "")
-    : userId.replace(/\W/g, "");
-}
-
-function formatContent(type: string, content: CallEventContent): string {
-  if (type === "m.call.hangup") {
-    return `callId: ${content.call_id.slice(-4)} reason: ${
-      content.reason
-    } senderSID: ${content.sender_session_id} destSID: ${
-      content.dest_session_id
-    }`;
-  }
-  if (type.startsWith("m.call.")) {
-    return `callId: ${content.call_id?.slice(-4)} senderSID: ${
-      content.sender_session_id
-    } destSID: ${content.dest_session_id}`;
-  } else if (type === "org.matrix.msc3401.call.member") {
-    const call =
-      content["m.calls"] &&
-      content["m.calls"].length > 0 &&
-      content["m.calls"][0];
-    const device =
-      call &&
-      call["m.devices"] &&
-      call["m.devices"].length > 0 &&
-      call["m.devices"][0];
-    return `conf_id: ${call && call["m.call_id"].slice(-4)} sessionId: ${
-      device && device.session_id
-    }`;
-  } else {
-    return "";
-  }
-}
-
-const dateFormatter = new Intl.DateTimeFormat([], {
-  hour: "2-digit",
-  minute: "2-digit",
-  second: "2-digit",
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore the linter does not know about this property of the DataTimeFormatOptions
-  fractionalSecondDigits: 3,
-});
-
-function formatTimestamp(timestamp: number | Date): string {
-  return dateFormatter.format(timestamp);
-}
-
-function formatType(event: SequenceDiagramMatrixEvent): string {
-  if (event.content.msgtype === "m.bad.encrypted") return "Undecryptable";
-  return event.type;
-}
-
-function lineForEvent(event: SequenceDiagramMatrixEvent): string {
-  return `${getUserName(event.from)} ${
-    event.ignored ? "-x" : "->>"
-  } ${getUserName(event.to)}: ${formatTimestamp(event.timestamp)} ${formatType(
-    event
-  )} ${formatContent(event.type, event.content)}`;
-}
-
-export const InspectorContext =
-  createContext<
-    [InspectorContextState, Dispatch<SetStateAction<InspectorContextState>>]
-  >(undefined);
-
-export const InspectorContextProvider: FC<PropsWithChildren<{}>> = ({
-  children,
-}) => {
-  // We take the tuple of [currentState, setter] and stick
-  // it straight into the context for other things to call
-  // the setState method... this feels like a fairly severe
-  // contortion of the hooks API - is this really the best way
-  // to do this?
-  const context = useState<InspectorContextState>({});
-  return (
-    <InspectorContext.Provider value={context}>
-      {children}
-    </InspectorContext.Provider>
-  );
-};
-
-type CallEventContent = {
-  ["m.calls"]: {
-    ["m.devices"]: { session_id: string; [x: string]: unknown }[];
-    ["m.call_id"]: string;
-  }[];
-} & {
-  call_id: string;
-  reason: string;
-  sender_session_id: string;
-  dest_session_id: string;
-} & IContent;
-
-export type SequenceDiagramMatrixEvent = {
-  to: string;
-  from: string;
-  timestamp: number;
-  type: string;
-  content: CallEventContent;
-  ignored: boolean;
-};
-
-interface SequenceDiagramViewerProps {
-  localUserId: string;
-  remoteUserIds: string[];
-  selectedUserId: string;
-  onSelectUserId: (userId: string) => void;
-  events: SequenceDiagramMatrixEvent[];
-}
-
-export const SequenceDiagramViewer: FC<SequenceDiagramViewerProps> = ({
-  localUserId,
-  remoteUserIds,
-  selectedUserId,
-  onSelectUserId,
-  events,
-}) => {
-  const mermaidElRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    mermaid.initialize({
-      startOnLoad: true,
-      theme: "dark",
-      sequence: {
-        showSequenceNumbers: true,
-      },
-    });
-  }, []);
-
-  useEffect(() => {
-    const graphDefinition = `sequenceDiagram
-      participant ${getUserName(localUserId)}
-      participant Room
-      participant ${selectedUserId ? getUserName(selectedUserId) : "unknown"}
-      ${events ? events.map(lineForEvent).join("\n  ") : ""}
-    `;
-
-    mermaid.mermaidAPI.render("mermaid", graphDefinition, (svgCode: string) => {
-      if (!mermaidElRef.current) return;
-      mermaidElRef.current.innerHTML = svgCode;
-    });
-  }, [events, localUserId, selectedUserId]);
-
-  return (
-    <div className={styles.scrollContainer}>
-      <div className={styles.sequenceDiagramViewer}>
-        <SelectInput
-          className={styles.selectInput}
-          label="Remote User"
-          selectedKey={selectedUserId}
-          onSelectionChange={(key): void => onSelectUserId(key.toString())}
-        >
-          {remoteUserIds.map((userId) => (
-            <Item key={userId}>{userId}</Item>
-          ))}
-        </SelectInput>
-        <div id="mermaid" />
-        <div ref={mermaidElRef} />
-      </div>
-    </div>
-  );
-};
-
-function reducer(
-  state: InspectorContextState,
-  action: {
-    type?: CallEvent | ClientEvent | RoomStateEvent;
-    event?: MatrixEvent;
-    rawEvent?: VoipEvent;
-    callStateEvent?: MatrixEvent;
-    memberStateEvents?: MatrixEvent[];
-  }
-): InspectorContextState {
-  switch (action.type) {
-    case RoomStateEvent.Events: {
-      const { event, callStateEvent, memberStateEvents } = action;
-
-      let eventsByUserId = state.eventsByUserId;
-      let remoteUserIds = state.remoteUserIds;
-
-      if (event) {
-        const fromId = event.getStateKey();
-
-        remoteUserIds =
-          fromId === state.localUserId || eventsByUserId[fromId]
-            ? state.remoteUserIds
-            : [...state.remoteUserIds, fromId];
-
-        eventsByUserId = { ...state.eventsByUserId };
-
-        if (event.getStateKey() === state.localUserId) {
-          for (const userId in eventsByUserId) {
-            eventsByUserId[userId] = [
-              ...(eventsByUserId[userId] || []),
-              {
-                from: fromId,
-                to: "Room",
-                type: event.getType(),
-                content: event.getContent(),
-                timestamp: event.getTs() || Date.now(),
-                ignored: false,
-              },
-            ];
-          }
-        } else {
-          eventsByUserId[fromId] = [
-            ...(eventsByUserId[fromId] || []),
-            {
-              from: fromId,
-              to: "Room",
-              type: event.getType(),
-              content: event.getContent(),
-              timestamp: event.getTs() || Date.now(),
-              ignored: false,
-            },
-          ];
-        }
-      }
-
-      return {
-        ...state,
-        eventsByUserId,
-        remoteUserIds,
-        callStateEvent: callStateEvent.getContent(),
-        memberStateEvents: Object.fromEntries(
-          memberStateEvents.map((e) => [e.getStateKey(), e.getContent()])
-        ),
-      };
-    }
-    case ClientEvent.ReceivedVoipEvent: {
-      const event = action.event;
-      const eventsByUserId = { ...state.eventsByUserId };
-      const fromId = event.getSender();
-      const toId = state.localUserId;
-      const content = event.getContent<CallEventContent>();
-
-      const remoteUserIds = eventsByUserId[fromId]
-        ? state.remoteUserIds
-        : [...state.remoteUserIds, fromId];
-
-      eventsByUserId[fromId] = [
-        ...(eventsByUserId[fromId] || []),
-        {
-          from: fromId,
-          to: toId,
-          type: event.getType(),
-          content,
-          timestamp: event.getTs() || Date.now(),
-          ignored: state.localSessionId !== content.dest_session_id,
-        },
-      ];
-
-      return { ...state, eventsByUserId, remoteUserIds };
-    }
-    case CallEvent.SendVoipEvent: {
-      const event = action.rawEvent;
-      const eventsByUserId = { ...state.eventsByUserId };
-      const fromId = state.localUserId;
-      const toId = event.userId as string;
-
-      const remoteUserIds = eventsByUserId[toId]
-        ? state.remoteUserIds
-        : [...state.remoteUserIds, toId];
-
-      eventsByUserId[toId] = [
-        ...(eventsByUserId[toId] || []),
-        {
-          from: fromId,
-          to: toId,
-          type: event.eventType as string,
-          content: event.content as CallEventContent,
-          timestamp: Date.now(),
-          ignored: false,
-        },
-      ];
-
-      return { ...state, eventsByUserId, remoteUserIds };
-    }
-    default:
-      return state;
-  }
-}
-
-function useGroupCallState(
-  client: MatrixClient,
-  groupCall: GroupCall,
-  otelGroupCallMembership: OTelGroupCallMembership
-): InspectorContextState {
-  const [state, dispatch] = useReducer(reducer, {
-    localUserId: client.getUserId(),
-    localSessionId: client.getSessionId(),
-    eventsByUserId: {},
-    remoteUserIds: [],
-    callStateEvent: null,
-    memberStateEvents: {},
-  });
-
-  useEffect(() => {
-    function onUpdateRoomState(event?: MatrixEvent): void {
-      const callStateEvent = groupCall.room.currentState.getStateEvents(
-        "org.matrix.msc3401.call",
-        groupCall.groupCallId
-      );
-
-      const memberStateEvents = groupCall.room.currentState.getStateEvents(
-        "org.matrix.msc3401.call.member"
-      );
-
-      dispatch({
-        type: RoomStateEvent.Events,
-        event,
-        callStateEvent,
-        memberStateEvents,
-      });
-
-      otelGroupCallMembership?.onUpdateRoomState(event);
-    }
-
-    function onReceivedVoipEvent(event: MatrixEvent): void {
-      dispatch({ type: ClientEvent.ReceivedVoipEvent, event });
-
-      otelGroupCallMembership?.onReceivedVoipEvent(event);
-    }
-
-    function onSendVoipEvent(event: VoipEvent, call: MatrixCall): void {
-      dispatch({ type: CallEvent.SendVoipEvent, rawEvent: event });
-
-      otelGroupCallMembership?.onSendEvent(call, event);
-    }
-
-    function onCallStateChange(
-      newState: CallState,
-      _: CallState,
-      call: MatrixCall
-    ): void {
-      otelGroupCallMembership?.onCallStateChange(call, newState);
-    }
-
-    function onCallError(error: CallError, call: MatrixCall): void {
-      otelGroupCallMembership.onCallError(error, call);
-    }
-
-    function onGroupCallError(error: GroupCallError): void {
-      otelGroupCallMembership.onGroupCallError(error);
-    }
-
-    function onUndecryptableToDevice(event: MatrixEvent): void {
-      dispatch({ type: ClientEvent.ReceivedVoipEvent, event });
-
-      Sentry.captureMessage("Undecryptable to-device Event");
-      // probably unnecessary if it's now captured via otel?
-      PosthogAnalytics.instance.eventUndecryptableToDevice.track(
-        groupCall.groupCallId
-      );
-
-      otelGroupCallMembership.onUndecryptableToDevice(event);
-    }
-
-    client.on(RoomStateEvent.Events, onUpdateRoomState);
-    groupCall.on(CallEvent.SendVoipEvent, onSendVoipEvent);
-    groupCall.on(CallEvent.State, onCallStateChange);
-    groupCall.on(CallEvent.Error, onCallError);
-    groupCall.on(GroupCallEvent.Error, onGroupCallError);
-    //client.on("state", onCallsChanged);
-    //client.on("hangup", onCallHangup);
-    client.on(ClientEvent.ReceivedVoipEvent, onReceivedVoipEvent);
-    client.on(ClientEvent.UndecryptableToDeviceEvent, onUndecryptableToDevice);
-
-    onUpdateRoomState();
-
-    return () => {
-      client.removeListener(RoomStateEvent.Events, onUpdateRoomState);
-      groupCall.removeListener(CallEvent.SendVoipEvent, onSendVoipEvent);
-      groupCall.removeListener(CallEvent.State, onCallStateChange);
-      groupCall.removeListener(CallEvent.Error, onCallError);
-      groupCall.removeListener(GroupCallEvent.Error, onGroupCallError);
-      //client.removeListener("state", onCallsChanged);
-      //client.removeListener("hangup", onCallHangup);
-      client.removeListener(ClientEvent.ReceivedVoipEvent, onReceivedVoipEvent);
-      client.removeListener(
-        ClientEvent.UndecryptableToDeviceEvent,
-        onUndecryptableToDevice
-      );
-    };
-  }, [client, groupCall, otelGroupCallMembership]);
-
-  return state;
-}
-
-interface GroupCallInspectorProps {
-  client: MatrixClient;
-  groupCall: GroupCall;
-  otelGroupCallMembership: OTelGroupCallMembership;
-  show: boolean;
-}
-
-export const GroupCallInspector: FC<GroupCallInspectorProps> = ({
-  client,
-  groupCall,
-  otelGroupCallMembership,
-  show,
-}) => {
-  const [currentTab, setCurrentTab] = useState("sequence-diagrams");
-  const [selectedUserId, setSelectedUserId] = useState<string>();
-  const state = useGroupCallState(client, groupCall, otelGroupCallMembership);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, setState] = useContext(InspectorContext);
-
-  useEffect(() => {
-    setState(state);
-  }, [setState, state]);
-
-  if (!show) {
-    return null;
-  }
-
-  return (
-    <Resizable
-      enable={{ top: true }}
-      defaultSize={{ height: 200, width: 0 }}
-      className={styles.inspector}
-    >
-      <div className={styles.toolbar}>
-        <button onClick={(): void => setCurrentTab("sequence-diagrams")}>
-          Sequence Diagrams
-        </button>
-        <button onClick={(): void => setCurrentTab("inspector")}>
-          Inspector
-        </button>
-      </div>
-      {currentTab === "sequence-diagrams" &&
-        state.localUserId &&
-        selectedUserId &&
-        state.eventsByUserId &&
-        state.remoteUserIds && (
-          <SequenceDiagramViewer
-            localUserId={state.localUserId}
-            selectedUserId={selectedUserId}
-            onSelectUserId={setSelectedUserId}
-            remoteUserIds={state.remoteUserIds}
-            events={state.eventsByUserId[selectedUserId]}
-          />
-        )}
-      {currentTab === "inspector" && (
-        <ReactJson
-          theme="monokai"
-          src={state}
-          name={null}
-          indentWidth={2}
-          shouldCollapse={shouldCollapse}
-          displayDataTypes={false}
-          displayObjectSize={false}
-          enableClipboard
-          style={{ height: "100%", overflowY: "scroll" }}
-        />
-      )}
-    </Resizable>
-  );
-};

src/room/GroupCallView.tsx

@@ -20,7 +20,7 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Room, isE2EESupported } from "livekit-client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
-import { JoinRule, RoomMember } from "matrix-js-sdk/src/matrix";
+import { JoinRule } from "matrix-js-sdk/src/matrix";
 import { Heading, Link, Text } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 
@@ -39,15 +39,12 @@ import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
 import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
-import {
+import { useIsRoomE2EE, useRoomSharedKey } from "../e2ee/sharedKeyManagement";
-  useManageRoomSharedKey,
-  useIsRoomE2EE,
-} from "../e2ee/sharedKeyManagement";
 import { useEnableE2EE } from "../settings/useSetting";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
-import { ShareModal } from "./ShareModal";
+import { InviteModal } from "./InviteModal";
 
 declare global {
   interface Window {
@@ -75,7 +72,7 @@ export const GroupCallView: FC<Props> = ({
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
   const isJoined = useMatrixRTCSessionJoinState(rtcSession);
 
-  const e2eeSharedKey = useManageRoomSharedKey(rtcSession.room.roomId);
+  const e2eeSharedKey = useRoomSharedKey(rtcSession.room.roomId);
   const isRoomE2EE = useIsRoomE2EE(rtcSession.room.roomId);
 
   useEffect(() => {
@@ -111,18 +108,11 @@ export const GroupCallView: FC<Props> = ({
     client,
   ]);
 
-  const participatingMembers = useMemo(() => {
+  // Count each member only once, regardless of how many devices they use
-    const members: RoomMember[] = [];
+  const participantCount = useMemo(
-    // Count each member only once, regardless of how many devices they use
+    () => new Set<string>(memberships.map((m) => m.sender!)).size,
-    const addedUserIds = new Set<string>();
+    [memberships]
-    for (const membership of memberships) {
+  );
-      if (!addedUserIds.has(membership.member.userId)) {
-        addedUserIds.add(membership.member.userId);
-        members.push(membership.member);
-      }
-    }
-    return members;
-  }, [memberships]);
 
   const deviceContext = useMediaDevices();
   const latestDevices = useRef<MediaDevices>();
@@ -226,13 +216,16 @@ export const GroupCallView: FC<Props> = ({
         sendInstantly
       );
 
-      leaveRTCSession(rtcSession);
+      await leaveRTCSession(rtcSession);
       if (widget) {
         // we need to wait until the callEnded event is tracked on posthog.
         // Otherwise the iFrame gets killed before the callEnded event got tracked.
         await new Promise((resolve) => window.setTimeout(resolve, 10)); // 10ms
         widget.api.setAlwaysOnScreen(false);
         PosthogAnalytics.instance.logout();
+
+        // we will always send the hangup event after the memberships have been updated
+        // calling leaveRTCSession.
         widget.api.transport.send(ElementWidgetActions.HangupCall, {});
       }
 
@@ -278,15 +271,15 @@ export const GroupCallView: FC<Props> = ({
 
   const joinRule = useJoinRule(rtcSession.room);
 
-  const [shareModalOpen, setShareModalOpen] = useState(false);
+  const [shareModalOpen, setInviteModalOpen] = useState(false);
-  const onDismissShareModal = useCallback(
+  const onDismissInviteModal = useCallback(
-    () => setShareModalOpen(false),
+    () => setInviteModalOpen(false),
-    [setShareModalOpen]
+    [setInviteModalOpen]
   );
 
   const onShareClickFn = useCallback(
-    () => setShareModalOpen(true),
+    () => setInviteModalOpen(true),
-    [setShareModalOpen]
+    [setInviteModalOpen]
   );
   const onShareClick = joinRule === JoinRule.Public ? onShareClickFn : null;
 
@@ -329,10 +322,10 @@ export const GroupCallView: FC<Props> = ({
   }
 
   const shareModal = (
-    <ShareModal
+    <InviteModal
       room={rtcSession.room}
       open={shareModalOpen}
-      onDismiss={onDismissShareModal}
+      onDismiss={onDismissInviteModal}
     />
   );
 
@@ -344,7 +337,7 @@ export const GroupCallView: FC<Props> = ({
           client={client}
           matrixInfo={matrixInfo}
           rtcSession={rtcSession}
-          participatingMembers={participatingMembers}
+          participantCount={participantCount}
           onLeave={onLeave}
           hideHeader={hideHeader}
           muteStates={muteStates}
@@ -395,7 +388,7 @@ export const GroupCallView: FC<Props> = ({
           onEnter={(): void => enterRTCSession(rtcSession)}
           confineToRoom={confineToRoom}
           hideHeader={hideHeader}
-          participatingMembers={participatingMembers}
+          participantCount={participantCount}
           onShareClick={onShareClick}
         />
       </>

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;
+  position: sticky;
-  left: 0;
+  inset-block-end: 0;
-  bottom: 0;
-  width: 100%;
-  box-sizing: border-box;
   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 {
+  .footer {
-    --footerPadding: var(--cpd-space-10x);
+    padding-block: var(--cpd-space-10x);
   }
 }
 
 @media (min-height: 800px) {
-  .inRoom {
+  .footer {
-    --footerPadding: var(--cpd-space-15x);
+    padding-block: var(--cpd-space-15x);
   }
 }
 

src/room/InCallView.tsx

@@ -42,8 +42,8 @@ import useMeasure from "react-use-measure";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 
-import { ReactComponent as LogoMark } from "../icons/LogoMark.svg";
+import LogoMark from "../icons/LogoMark.svg?react";
-import { ReactComponent as LogoType } from "../icons/LogoType.svg";
+import LogoType from "../icons/LogoType.svg?react";
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
   HangupButton,
@@ -78,7 +78,7 @@ import { useWakeLock } from "../useWakeLock";
 import { useMergedRefs } from "../useMergedRefs";
 import { MuteStates } from "./MuteStates";
 import { MatrixInfo } from "./VideoPreview";
-import { ShareButton } from "../button/ShareButton";
+import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
 import {
   ECAddonConnectionState,
@@ -129,7 +129,7 @@ export interface InCallViewProps {
   rtcSession: MatrixRTCSession;
   livekitRoom: Room;
   muteStates: MuteStates;
-  participatingMembers: RoomMember[];
+  participantCount: number;
   onLeave: (error?: Error) => void;
   hideHeader: boolean;
   otelGroupCallMembership?: OTelGroupCallMembership;
@@ -143,7 +143,7 @@ export const InCallView: FC<InCallViewProps> = ({
   rtcSession,
   livekitRoom,
   muteStates,
-  participatingMembers,
+  participantCount,
   onLeave,
   hideHeader,
   otelGroupCallMembership,
@@ -178,7 +178,6 @@ export const InCallView: FC<InCallViewProps> = ({
     screenSharingTracks.length > 0
   );
 
-  //const [showInspector] = useShowInspector();
   const [showConnectionStats] = useShowConnectionStats();
 
   const { hideScreensharing } = useUrlParams();
@@ -353,19 +352,19 @@ export const InCallView: FC<InCallViewProps> = ({
     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"
       />
     );
 
@@ -420,13 +419,12 @@ export const InCallView: FC<InCallViewProps> = ({
               name={matrixInfo.roomName}
               avatarUrl={matrixInfo.roomAvatar}
               encrypted={matrixInfo.roomEncrypted}
-              participants={participatingMembers}
+              participantCount={participantCount}
-              client={client}
             />
           </LeftNav>
           <RightNav>
             {!reducedControls && onShareClick !== null && (
-              <ShareButton onClick={onShareClick} />
+              <InviteButton onClick={onShareClick} />
             )}
           </RightNav>
         </Header>
@@ -436,14 +434,6 @@ export const InCallView: FC<InCallViewProps> = ({
         {renderContent()}
         {footer}
       </div>
-      {/*otelGroupCallMembership && (
-        <GroupCallInspector
-          client={client}
-          groupCall={groupCall}
-          otelGroupCallMembership={otelGroupCallMembership}
-          show={showInspector}
-        />
-      )*/}
       {!noControls && <RageshakeRequestModal {...rageshakeRequestModalProps} />}
       <SettingsModal
         client={client}

src/room/InviteModal.module.css

@@ -14,6 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.copyButton {
+.url {
+  text-align: center;
+  color: var(--cpd-color-text-secondary);
+  margin-block-end: var(--cpd-space-8x);
+}
+
+.button {
   width: 100%;
 }

src/room/InviteModal.tsx

@@ -0,0 +1,84 @@
+/*
+Copyright 2022 - 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Room } from "matrix-js-sdk";
+import { Button, Text } from "@vector-im/compound-web";
+import LinkIcon from "@vector-im/compound-design-tokens/icons/link.svg?react";
+import CheckIcon from "@vector-im/compound-design-tokens/icons/check.svg?react";
+import useClipboard from "react-use-clipboard";
+
+import { Modal } from "../Modal";
+import { getAbsoluteRoomUrl } from "../matrix-utils";
+import styles from "./InviteModal.module.css";
+import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { Toast } from "../Toast";
+
+interface Props {
+  room: Room;
+  open: boolean;
+  onDismiss: () => void;
+}
+
+export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
+  const { t } = useTranslation();
+  const roomSharedKey = useRoomSharedKey(room.roomId);
+  const url = useMemo(
+    () =>
+      getAbsoluteRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined),
+    [room, roomSharedKey]
+  );
+  const [, setCopied] = useClipboard(url);
+  const [toastOpen, setToastOpen] = useState(false);
+  const onToastDismiss = useCallback(() => setToastOpen(false), [setToastOpen]);
+
+  const onButtonClick = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation();
+      setCopied();
+      onDismiss();
+      setToastOpen(true);
+    },
+    [setCopied, onDismiss]
+  );
+
+  return (
+    <>
+      <Modal title={t("Invite to this call")} open={open} onDismiss={onDismiss}>
+        <Text className={styles.url} size="sm" weight="semibold">
+          {url}
+        </Text>
+        <Button
+          className={styles.button}
+          Icon={LinkIcon}
+          onClick={onButtonClick}
+          data-testid="modal_inviteLink"
+        >
+          {t("Copy link")}
+        </Button>
+      </Modal>
+      <Toast
+        open={toastOpen}
+        onDismiss={onToastDismiss}
+        autoDismiss={2000}
+        Icon={CheckIcon}
+      >
+        {t("Link copied to clipboard")}
+      </Toast>
+    </>
+  );
+};

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/LayoutToggle.tsx

@@ -17,8 +17,8 @@ limitations under the License.
 import { ChangeEvent, FC, useCallback, useId } from "react";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "@vector-im/compound-web";
-import { ReactComponent as SpotlightViewIcon } from "@vector-im/compound-design-tokens/icons/spotlight-view.svg";
+import SpotlightViewIcon from "@vector-im/compound-design-tokens/icons/spotlight-view.svg?react";
-import { ReactComponent as GridViewIcon } from "@vector-im/compound-design-tokens/icons/grid-view.svg";
+import GridViewIcon from "@vector-im/compound-design-tokens/icons/grid-view.svg?react";
 import classNames from "classnames";
 
 import styles from "./LayoutToggle.module.css";

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

@@ -16,7 +16,7 @@ limitations under the License.
 
 import { FC, useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Button, Link } from "@vector-im/compound-web";
 import classNames from "classnames";
 import { useHistory } from "react-router-dom";
@@ -27,7 +27,7 @@ import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { useLocationNavigation } from "../useLocationNavigation";
 import { MatrixInfo, VideoPreview } from "./VideoPreview";
 import { MuteStates } from "./MuteStates";
-import { ShareButton } from "../button/ShareButton";
+import { InviteButton } from "../button/InviteButton";
 import {
   HangupButton,
   MicButton,
@@ -44,7 +44,7 @@ interface Props {
   onEnter: () => void;
   confineToRoom: boolean;
   hideHeader: boolean;
-  participatingMembers: RoomMember[];
+  participantCount: number;
   onShareClick: (() => void) | null;
 }
 
@@ -55,7 +55,7 @@ export const LobbyView: FC<Props> = ({
   onEnter,
   confineToRoom,
   hideHeader,
-  participatingMembers,
+  participantCount,
   onShareClick,
 }) => {
   const { t } = useTranslation();
@@ -104,12 +104,11 @@ export const LobbyView: FC<Props> = ({
                 name={matrixInfo.roomName}
                 avatarUrl={matrixInfo.roomAvatar}
                 encrypted={matrixInfo.roomEncrypted}
-                participants={participatingMembers}
+                participantCount={participantCount}
-                client={client}
               />
             </LeftNav>
             <RightNav>
-              {onShareClick !== null && <ShareButton onClick={onShareClick} />}
+              {onShareClick !== null && <InviteButton onClick={onShareClick} />}
             </RightNav>
           </Header>
         )}
@@ -129,16 +128,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 { FC, 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 const RoomAuthView: FC = () => {
         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/ShareModal.tsx

@@ -1,51 +0,0 @@
-/*
-Copyright 2022 - 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FC } from "react";
-import { useTranslation } from "react-i18next";
-import { Room } from "matrix-js-sdk";
-
-import { Modal } from "../Modal";
-import { CopyButton } from "../button";
-import { getAbsoluteRoomUrl } from "../matrix-utils";
-import styles from "./ShareModal.module.css";
-import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
-
-interface Props {
-  room: Room;
-  open: boolean;
-  onDismiss: () => void;
-}
-
-export const ShareModal: FC<Props> = ({ room, open, onDismiss }) => {
-  const { t } = useTranslation();
-  const roomSharedKey = useRoomSharedKey(room.roomId);
-
-  return (
-    <Modal title={t("Share this call")} open={open} onDismiss={onDismiss}>
-      <p>{t("Copy and share this call link")}</p>
-      <CopyButton
-        className={styles.copyButton}
-        value={getAbsoluteRoomUrl(
-          room.roomId,
-          room.name,
-          roomSharedKey ?? undefined
-        )}
-        data-testid="modal_inviteLink"
-      />
-    </Modal>
-  );
-};

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/rtcSessionHelpers.ts

@@ -41,13 +41,15 @@ export function enterRTCSession(rtcSession: MatrixRTCSession): void {
   // have started tracking by the time calls start getting created.
   //groupCallOTelMembership?.onJoinCall();
 
-  // right now we asume everything is a room-scoped call
+  // right now we assume everything is a room-scoped call
   const livekitAlias = rtcSession.room.roomId;
 
   rtcSession.joinRoomSession([makeFocus(livekitAlias)]);
 }
 
-export function leaveRTCSession(rtcSession: MatrixRTCSession): void {
+export async function leaveRTCSession(
+  rtcSession: MatrixRTCSession
+): Promise<void> {
   //groupCallOTelMembership?.onLeaveCall();
-  rtcSession.leaveRoomSession();
+  await rtcSession.leaveRoomSession();
 }

src/settings/SettingsModal.tsx

@@ -22,15 +22,14 @@ import { MatrixClient } from "matrix-js-sdk";
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
 import { TabContainer, TabItem } from "../tabs/Tabs";
-import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
+import AudioIcon from "../icons/Audio.svg?react";
-import { ReactComponent as VideoIcon } from "../icons/Video.svg";
+import VideoIcon from "../icons/Video.svg?react";
-import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg";
+import DeveloperIcon from "../icons/Developer.svg?react";
-import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg";
+import OverflowIcon from "../icons/Overflow.svg?react";
-import { ReactComponent as UserIcon } from "../icons/User.svg";
+import UserIcon from "../icons/User.svg?react";
-import { ReactComponent as FeedbackIcon } from "../icons/Feedback.svg";
+import FeedbackIcon from "../icons/Feedback.svg?react";
 import { SelectInput } from "../input/SelectInput";
 import {
-  useShowInspector,
   useOptInAnalytics,
   useDeveloperSettingsTab,
   useShowConnectionStats,
@@ -38,8 +37,6 @@ import {
   isFirefox,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
-import { Button } from "../button";
-import { useDownloadDebugLog } from "./submit-rageshake";
 import { Body, Caption } from "../typography/Typography";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { ProfileSettingsTab } from "./ProfileSettingsTab";
@@ -62,7 +59,6 @@ interface Props {
 export const SettingsModal: FC<Props> = (props) => {
   const { t } = useTranslation();
 
-  const [showInspector, setShowInspector] = useShowInspector();
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const [developerSettingsTab, setDeveloperSettingsTab] =
     useDeveloperSettingsTab();
@@ -70,8 +66,6 @@ export const SettingsModal: FC<Props> = (props) => {
     useShowConnectionStats();
   const [enableE2EE, setEnableE2EE] = useEnableE2EE();
 
-  const downloadDebugLog = useDownloadDebugLog();
-
   // Generate a `SelectInput` with a list of devices for a given device kind.
   const generateDeviceSelection = (
     devices: MediaDevice,
@@ -237,18 +231,6 @@ export const SettingsModal: FC<Props> = (props) => {
           })}
         </Body>
       </FieldRow>
-      <FieldRow>
-        <InputField
-          id="showInspector"
-          name="inspector"
-          label={t("Show call inspector")}
-          type="checkbox"
-          checked={showInspector}
-          onChange={(e: ChangeEvent<HTMLInputElement>): void =>
-            setShowInspector(e.target.checked)
-          }
-        />
-      </FieldRow>
       <FieldRow>
         <InputField
           id="showConnectionStats"
@@ -278,9 +260,6 @@ export const SettingsModal: FC<Props> = (props) => {
           }
         />
       </FieldRow>
-      <FieldRow>
-        <Button onPress={downloadDebugLog}>{t("Download debug logs")}</Button>
-      </FieldRow>
     </TabItem>
   );
 

src/settings/rageshake.ts

@@ -41,6 +41,7 @@ import EventEmitter from "events";
 import { throttle } from "lodash";
 import { logger } from "matrix-js-sdk/src/logger";
 import { randomString } from "matrix-js-sdk/src/randomstring";
+import { LoggingMethod } from "loglevel";
 
 // the length of log data we keep in indexeddb (and include in the reports)
 const MAX_LOG_SIZE = 1024 * 1024 * 5; // 5 MB
@@ -50,15 +51,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 +68,11 @@ interface LogEntry {
 
 class ConsoleLogger extends EventEmitter {
   private logs = "";
-  private originalFunctions: { [key in LogFunctionName]?: LogFunction } = {};
 
-  public monkeyPatch(consoleObj: Console): void {
+  public log = (
-    // Monkey-patch console logging
+    level: LogLevel,
-    const consoleFunctionsToLevels = {
+    ...args: (Error | DOMException | object | string | undefined)[]
-      log: "I",
+  ): void => {
-      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): void => {
-        this.log(level, ...args);
-        originalFn(...args);
-      };
-    });
-  }
-
-  public log(
-    level: string,
-    ...args: (Error | DOMException | object | string)[]
-  ): void {
     // We don't know what locale the user may be running so use ISO strings
     const ts = new Date().toISOString();
 
@@ -129,7 +102,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 +483,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 +554,65 @@ 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): void {
+  const originalFactory = logger.methodFactory;
+
+  logger.methodFactory = function (
+    methodName,
+    configLevel,
+    loggerName
+  ): LoggingMethod {
+    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

@@ -14,22 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {
+import { ComponentProps, useCallback, useEffect, useState } from "react";
-  ComponentProps,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 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";
-import { InspectorContext } from "../room/GroupCallInspector";
 import { Config } from "../config/Config";
 import { ElementCallOpenTelemetry } from "../otel/otel";
 import { RageshakeRequestModal } from "../room/RageshakeRequestModal";
@@ -57,10 +51,6 @@ export function useSubmitRageshake(): {
 } {
   const { client } = useClient();
 
-  // The value of the context is the whole tuple returned from setState,
-  // so we just want the current state.
-  const [inspectorState] = useContext(InspectorContext) ?? [];
-
   const [{ sending, sent, error }, setState] = useState<{
     sending: boolean;
     sent: boolean;
@@ -269,16 +259,6 @@ export function useSubmitRageshake(): {
             gzip(ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump()),
             "traces.json.gz"
           );
-
-          if (inspectorState) {
-            body.append(
-              "file",
-              new Blob([JSON.stringify(inspectorState)], {
-                type: "text/plain",
-              }),
-              "groupcall.txt"
-            );
-          }
         }
 
         if (opts.rageshakeRequestId) {
@@ -296,10 +276,10 @@ 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]
+    [client, sending]
   );
 
   return {
@@ -310,27 +290,6 @@ export function useSubmitRageshake(): {
   };
 }
 
-export function useDownloadDebugLog(): () => void {
-  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(): (
   roomId: string,
   rageshakeRequestId: string

src/settings/useSetting.ts

@@ -83,9 +83,6 @@ export const useSpatialAudio = (): DisableableSetting<boolean> => {
   return [false, null];
 };
 
-export const useShowInspector = (): Setting<boolean> =>
-  useSetting("show-inspector", false);
-
 // null = undecided
 export const useOptInAnalytics = (): DisableableSetting<boolean | null> => {
   const settingVal = useSetting<boolean | null>("opt-in-analytics", null);

src/tabs/Tabs.stories.tsx

@@ -1,66 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FC } from "react";
-
-import { TabContainer, TabItem } from "./Tabs";
-import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
-import { ReactComponent as VideoIcon } from "../icons/Video.svg";
-import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg";
-import { Body } from "../typography/Typography";
-
-export default {
-  title: "Tabs",
-  component: TabContainer,
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const Tabs: FC = () => (
-  <TabContainer>
-    <TabItem
-      title={
-        <>
-          <AudioIcon width={16} height={16} />
-          <Body>Audio</Body>
-        </>
-      }
-    >
-      Audio Tab Content
-    </TabItem>
-    <TabItem
-      title={
-        <>
-          <VideoIcon width={16} height={16} />
-          <Body>Video</Body>
-        </>
-      }
-    >
-      Video Tab Content
-    </TabItem>
-    <TabItem
-      title={
-        <>
-          <DeveloperIcon width={16} height={16} />
-          <Body>Developer</Body>
-        </>
-      }
-    >
-      Developer Tab Content
-    </TabItem>
-  </TabContainer>
-);

src/typography/Typography.stories.tsx

@@ -1,42 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FC } from "react";
-
-import { Headline, Title, Subtitle, Body, Caption, Micro } from "./Typography";
-
-export default {
-  title: "Typography",
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const Typography: FC = () => (
-  <>
-    <Headline>Headline Semi Bold</Headline>
-    <Title>Title</Title>
-    <Subtitle>Subtitle</Subtitle>
-    <Subtitle fontWeight="semiBold">Subtitle Semi Bold</Subtitle>
-    <Body>Body</Body>
-    <Body fontWeight="semiBold">Body Semi Bold</Body>
-    <Caption>Caption</Caption>
-    <Caption fontWeight="semiBold">Caption Semi Bold</Caption>
-    <Caption fontWeight="bold">Caption Bold</Caption>
-    <Micro>Micro</Micro>
-    <Micro fontWeight="bold">Micro bold</Micro>
-  </>
-);

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: var(--cpd-space-4x);
-  margin-block-start: var(--cpd-space-4x);
-  overflow-y: auto;
-  overflow-x: hidden;
 }
 
 .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

@@ -39,6 +39,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";
@@ -299,7 +300,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) {
@@ -70,8 +71,7 @@ limitations under the License.
   padding: var(--cpd-space-1x);
   padding-block: var(--cpd-space-1x);
   color: var(--cpd-color-text-primary);
-  /* TODO: un-hardcode this color. It comes from the dark theme. */
+  background-color: var(--cpd-color-bg-canvas-default);
-  background-color: rgba(237, 244, 252, 0.79);
   display: flex;
   align-items: center;
   border-radius: var(--cpd-radius-pill-effect);
@@ -82,11 +82,6 @@ limitations under the License.
   box-shadow: var(--small-drop-shadow);
 }
 
-:global(.cpd-theme-dark) .nameTag {
-  /* TODO: un-hardcode this color. It comes from the light theme. */
-  background-color: rgba(2, 7, 13, 0.77);
-}
-
 .nameTag > svg {
   flex-shrink: 0;
 }

src/video-grid/VideoTile.tsx

@@ -34,8 +34,8 @@ import {
   RoomMember,
   RoomMemberEvent,
 } from "matrix-js-sdk/src/models/room-member";
-import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
+import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react";
-import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg";
+import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react";
 import { Text } from "@vector-im/compound-web";
 
 import { Avatar } from "../Avatar";

src/widget.ts

@@ -70,9 +70,7 @@ interface WidgetHelpers {
  */
 export const widget = ((): WidgetHelpers | null => {
   try {
-    const query = new URLSearchParams(window.location.search);
+    const { widgetId, parentUrl } = getUrlParams();
-    const widgetId = query.get("widgetId");
-    const parentUrl = query.get("parentUrl");
 
     if (widgetId && parentUrl) {
       const parentOrigin = new URL(parentUrl).origin;

test/Toast-test.tsx

@@ -0,0 +1,59 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { screen, render } from "@testing-library/react";
+import { Toast } from "../src/Toast";
+import userEvent from "@testing-library/user-event";
+import { withFakeTimers } from "./utils";
+
+test("Toast renders", () => {
+  render(
+    <Toast open={false} onDismiss={() => {}}>
+      Hello world!
+    </Toast>
+  );
+  expect(screen.queryByRole("dialog")).toBe(null);
+  render(
+    <Toast open={true} onDismiss={() => {}}>
+      Hello world!
+    </Toast>
+  );
+  expect(screen.getByRole("dialog")).toMatchSnapshot();
+});
+
+test("Toast dismisses when clicked", async () => {
+  const onDismiss = jest.fn();
+  render(
+    <Toast open={true} onDismiss={onDismiss}>
+      Hello world!
+    </Toast>
+  );
+  await userEvent.click(screen.getByRole("dialog"));
+  expect(onDismiss).toHaveBeenCalled();
+});
+
+test("Toast dismisses itself after the specified timeout", async () => {
+  withFakeTimers(() => {
+    const onDismiss = jest.fn();
+    render(
+      <Toast open={true} onDismiss={onDismiss} autoDismiss={2000}>
+        Hello world!
+      </Toast>
+    );
+    jest.advanceTimersByTime(2000);
+    expect(onDismiss).toHaveBeenCalled();
+  });
+});

test/__snapshots__/Toast-test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toast renders 1`] = `
+<button
+  aria-describedby="radix-:r5:"
+  aria-labelledby="radix-:r4:"
+  class="overlay animate toast"
+  data-state="open"
+  id="radix-:r3:"
+  role="dialog"
+  style="pointer-events: auto;"
+  tabindex="-1"
+  type="button"
+>
+  <h3
+    class="_font-body-sm-semibold_1jx6b_45"
+    id="radix-:r4:"
+  >
+    Hello world!
+  </h3>
+</button>
+`;

test/mocks/svgr.ts

@@ -1,3 +1,3 @@
 // Mock file for SVG imports
-export default "SvgrURL";
+const ReactComponent = "svg";
-export const ReactComponent = "div";
+export default ReactComponent;

test/room/checkForParallelCalls-test.ts

@@ -18,15 +18,7 @@ import { Mocked, mocked } from "jest-mock";
 import { RoomState } from "matrix-js-sdk/src/models/room-state";
 import { PosthogAnalytics } from "../../src/analytics/PosthogAnalytics";
 import { checkForParallelCalls } from "../../src/room/checkForParallelCalls";
-
+import { withFakeTimers } from "../utils";
-const withFakeTimers = (continuation: () => void) => {
-  jest.useFakeTimers();
-  try {
-    continuation();
-  } finally {
-    jest.useRealTimers();
-  }
-};
 
 const withMockedPosthog = (
   continuation: (posthog: Mocked<PosthogAnalytics>) => void

test/utils.ts

@@ -0,0 +1,24 @@
+/*
+Copyright 2023 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.
+*/
+
+export function withFakeTimers(continuation: () => void): void {
+  jest.useFakeTimers();
+  try {
+    continuation();
+  } finally {
+    jest.useRealTimers();
+  }
+}