Update js-sdk

Add units to constant
Change rageshake persistence to throttled flushing
2023-01-17 11:15:39 +00:00 · 2023-01-17 11:15:12 +00:00 · 2023-01-17 11:15:00 +00:00 · 2023-01-17 11:13:40 +00:00 · 2023-01-17 11:11:39 +00:00 · 2023-01-17 11:11:13 +00:00
59 changed files with 340 additions and 2191 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,3 @@ dist-ssr
 *.local
 .idea/
 public/config.json
-/coverage
--- a/README.md
+++ b/README.md
@@ -5,8 +5,6 @@

 Full mesh group calls powered by [Matrix](https://matrix.org), implementing [MatrixRTC](https://github.com/matrix-org/matrix-spec-proposals/blob/matthew/group-voip/proposals/3401-group-voip.md).

-![A demo of Element Call with six people](demo.jpg)
-
 To try it out, visit our hosted version at [call.element.io](https://call.element.io). You can also find the latest development version continuously deployed to [element-call.netlify.app](https://element-call.netlify.app).

 ## Host it yourself
@@ -42,28 +40,6 @@ server {
 }
 ```

-By default, the app expects you to have a Matrix homeserver (such as [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html)) installed locally and running on port 8008. If you wish to use a homeserver on a different URL or one that is hosted on a different server, you can add a config file as above, and include the homeserver URL that you'd like to use.
-
-Element Call requires a homeserver with registration enabled without any 3pid or token requirements, if you want it to be used by unregistered users. Furthermore, it is not recommended to use it with an existing homeserver where user accounts have joined normal rooms, as it may not be able to handle those yet and it may behave unreliably.
-
-Therefore, to use a self-hosted homeserver, this is recommended to be a new server where any user account created has not joined any normal rooms anywhere in the Matrix federated network. The homeserver used can be setup to disable federation, so as to prevent spam registrations (if you keep registrations open) and to ensure Element Call continues to work in case any user decides to log in to their Element Call account using the standard Element app and joins normal rooms that Element Call cannot handle.
-
-### Features
-
-#### Allow joining group calls without a camera and a microphone
-
-You can allow joining a group call without video and audio enabling this feature in your `config.json`:
-
-```json
-{
-  ...
-
-  "features": {
-    "feature_group_calls_without_video_and_audio": true
-  }
-}
-```
-
 ## Development

 Element Call is built against [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/2553). To get started, clone, install, and link the package:
@@ -84,6 +60,8 @@ yarn
 yarn link matrix-js-sdk
 ```

+By default, the app expects you to have [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html) installed locally and running on port 8008. If you wish to use another homeserver, you can add a config file as above.
+
 You're now ready to launch the development server:

 ```
--- a/config/element_io_preview.json
+++ b/config/element_io_preview.json
@@ -5,10 +5,6 @@
      "server_name": "call.ems.host"
    }
  },
-  "posthog": {
-    "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",
-    "api_host": "https://posthog-element-call.element.io"
-  },
  "rageshake": {
    "submit_url": "https://element.io/bugreports/submit"
  }
--- a/demo.jpg
+++ b/demo.jpg
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
  },
  "dependencies": {
    "@juggle/resize-observer": "^3.3.1",
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
    "@react-aria/button": "^3.3.4",
    "@react-aria/dialog": "^3.1.4",
    "@react-aria/focus": "^3.5.0",
@@ -46,7 +46,7 @@
    "i18next-browser-languagedetector": "^6.1.8",
    "i18next-http-backend": "^1.4.4",
    "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#8cbbdaa239e449848e8874f041ef1879c1956696",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#a34d06c7c24c3523a77f70c01d4e31c45e92aa6b",
    "matrix-widget-api": "^1.0.0",
    "mermaid": "^8.13.8",
    "normalize.css": "^8.0.1",
@@ -63,7 +63,6 @@
    "react-use-clipboard": "^1.0.7",
    "react-use-measure": "^2.1.1",
    "sdp-transform": "^2.14.1",
-    "tinyqueue": "^2.0.3",
    "unique-names-generator": "^4.6.0"
  },
  "devDependencies": {
--- a/public/locales/cs/app.json
+++ b/public/locales/cs/app.json
@@ -136,8 +136,5 @@
  "<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>Proč neskončit nastavením hesla, abyste mohli účet použít znovu?</0><1>Budete si moci nechat své jméno a nastavit si avatar pro budoucí hovory </1>",
  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Připojit se</0><1>Or</1><2>Zkopírovat odkaz a připojit se později</2>",
  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Už máte účet?</0><1><0>Přihlásit se</0> Or <2>Jako host</2></1>",
-  "{{name}} (Waiting for video...)": "{{name}} (Čekání na video...)",
-  "This feature is only supported on Firefox.": "Tato funkce je podporována jen ve Firefoxu.",
-  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Odeslání ladících záznamů nám pomůže diagnostikovat problém.</0>",
-  "<0>Oops, something's gone wrong.</0>": "<0>Oops, něco se pokazilo.</0>"
+  "{{name}} (Waiting for video...)": "{{name}} (Čekání na video...)"
 }
--- a/public/locales/de/app.json
+++ b/public/locales/de/app.json
@@ -137,7 +137,5 @@
  "Whether to enable single-key keyboard shortcuts, e.g. 'm' to mute/unmute the mic.": "Ob Tastenkürzel mit nur einer Taste aktiviert sein sollen, z. B. „m“ um das Mikrofon stumm/aktiv zu schalten.",
  "Single-key keyboard shortcuts": "Ein-Tasten-Tastenkürzel",
  "{{name}} (Waiting for video...)": "{{name}} (Warte auf Video …)",
-  "This feature is only supported on Firefox.": "Diese Funktion wird nur in Firefox unterstützt.",
-  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Übermittelte Problemberichte helfen uns, Fehler zu beheben.</0>",
-  "<0>Oops, something's gone wrong.</0>": "<0>Hoppla, etwas ist schiefgelaufen.</0>"
+  "This feature is only supported on Firefox.": "Diese Funktion wird nur in Firefox unterstützt."
 }
--- a/public/locales/en-GB/app.json
+++ b/public/locales/en-GB/app.json
@@ -16,12 +16,13 @@
  "<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>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>",
  "Accept camera/microphone permissions to join the call.": "Accept camera/microphone permissions to join the call.",
  "Accept microphone permissions to join the call.": "Accept microphone permissions to join the call.",
+  "Advanced": "Advanced",
+  "Allow analytics": "Allow analytics",
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a 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.",
  "Audio": "Audio",
  "Avatar": "Avatar",
  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "By clicking \"Go\", you agree to our <2>Terms and conditions</2>",
  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>",
-  "By ticking this box you consent to the collection of anonymous data, which we use to improve your experience. You can find more information about which data we track in our ": "By ticking this box you consent to the collection of anonymous data, which we use to improve your experience. You can find more information about which data we track in our ",
  "Call link copied": "Call link copied",
  "Call type menu": "Call type menu",
  "Camera": "Camera",
@@ -40,12 +41,10 @@
  "Description (optional)": "Description (optional)",
  "Details": "Details",
  "Developer": "Developer",
-  "Developer Settings": "Developer Settings",
  "Display name": "Display name",
  "Download debug logs": "Download debug logs",
  "Element Call Home": "Element Call Home",
  "Exit full screen": "Exit full screen",
-  "Expose developer settings in the settings window.": "Expose developer settings in the settings window.",
  "Fetching group call timed out.": "Fetching group call timed out.",
  "Freedom": "Freedom",
  "Full screen": "Full screen",
@@ -85,7 +84,6 @@
  "Press and hold spacebar to talk over {{name}}": "Press and hold spacebar to talk over {{name}}",
  "Press and hold to talk": "Press and hold to talk",
  "Press and hold to talk over {{name}}": "Press and hold to talk over {{name}}",
-  "Privacy Policy": "Privacy Policy",
  "Profile": "Profile",
  "Recaptcha dismissed": "Recaptcha dismissed",
  "Recaptcha not loaded": "Recaptcha not loaded",
@@ -122,10 +120,10 @@
  "This feature is only supported on Firefox.": "This feature is only supported on Firefox.",
  "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>Terms and conditions</12>": "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>Terms and conditions</12>",
  "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)": "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)",
+  "This will send anonymised data (such as the duration of a call and the number of participants) to the Element Call team to help us optimise the application based on how it is used.": "This will send anonymised data (such as the duration of a call and the number of participants) to the Element Call team to help us optimise the application based on how it is used.",
  "Turn off camera": "Turn off camera",
  "Turn on camera": "Turn on camera",
  "Unmute microphone": "Unmute microphone",
-  "Use the upcoming grid system": "Use the upcoming grid system",
  "User ID": "User ID",
  "User menu": "User menu",
  "Username": "Username",
--- a/public/locales/es/app.json
+++ b/public/locales/es/app.json
@@ -136,8 +136,5 @@
  "This will send anonymised data (such as the duration of a call and the number of participants) to the Element Call team to help us optimise the application based on how it is used.": "Esto enviará datos anónimos (como la duración de la llamada y el número de participantes) al equipo de Element Call para ayudarnos a optimizar la aplicación dependiendo de cómo se use.",
  "Whether to enable single-key keyboard shortcuts, e.g. 'm' to mute/unmute the mic.": "Habilita los atajos de teclado de una sola tecla, por ejemplo 'm' para silenciar/desilenciar el micrófono.",
  "Single-key keyboard shortcuts": "Atajos de teclado de una sola tecla",
-  "{{name}} (Waiting for video...)": "{{name}} (Esperando al video...)",
-  "This feature is only supported on Firefox.": "Esta característica solo está disponible en Firefox.",
-  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Subir los registros de depuración nos ayudará a encontrar el problema.</0>",
-  "<0>Oops, something's gone wrong.</0>": "<0>Ups, algo ha salido mal.</0>"
+  "{{name}} (Waiting for video...)": "{{name}} (Esperando al video...)"
 }
--- a/public/locales/et/app.json
+++ b/public/locales/et/app.json
@@ -137,7 +137,5 @@
  "Whether to enable single-key keyboard shortcuts, e.g. 'm' to mute/unmute the mic.": "Kas kasutame üheklahvilisi kiirklahve, näiteks „m“ mikrofoni sisse/välja lülitamiseks.",
  "Single-key keyboard shortcuts": "Üheklahvilised kiirklahvid",
  "{{name}} (Waiting for video...)": "{{name}} (Ootame videovoo algust...)",
-  "This feature is only supported on Firefox.": "See funktsionaalsus on toetatud vaid Firefoxis.",
-  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Kui saadad meile vealogid, siis on lihtsam vea põhjust otsida.</0>",
-  "<0>Oops, something's gone wrong.</0>": "<0>Ohoo, midagi on nüüd katki.</0>"
+  "This feature is only supported on Firefox.": "See funktsionaalsus on toetatud vaid Firefoxis."
 }
--- a/public/locales/fr/app.json
+++ b/public/locales/fr/app.json
@@ -137,7 +137,5 @@
  "Whether to enable single-key keyboard shortcuts, e.g. 'm' to mute/unmute the mic.": "Bascule sur les raccourcis clavier à touche unique, par exemple « m » pour désactiver / activer le micro.",
  "Single-key keyboard shortcuts": "Raccourcis clavier en une touche",
  "{{name}} (Waiting for video...)": "{{name}} (En attente de vidéo…)",
-  "This feature is only supported on Firefox.": "Cette fonctionnalité est prise en charge dans Firefox uniquement.",
-  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Soumettre les journaux de débogage nous aidera à déterminer le problème.</0>",
-  "<0>Oops, something's gone wrong.</0>": "<0>Oups, quelque chose s’est mal passé.</0>"
+  "This feature is only supported on Firefox.": "Cette fonctionnalité est prise en charge dans Firefox uniquement."
 }
--- a/public/locales/id/app.json
+++ b/public/locales/id/app.json
@@ -137,7 +137,5 @@
  "Whether to enable single-key keyboard shortcuts, e.g. 'm' to mute/unmute the mic.": "Apakah pintasan papan ketik seharusnya diaktifkan, mis. 'm' untuk membisukan/menyuarakan mikrofon.",
  "Single-key keyboard shortcuts": "Pintasan papan ketik satu tombol",
  "{{name}} (Waiting for video...)": "{{name}} (Menunggu video...)",
-  "This feature is only supported on Firefox.": "Fitur ini hanya didukung di Firefox.",
-  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Mengirim catatan pengawakutuan akan membantu kami melacak masalahnya.</0>",
-  "<0>Oops, something's gone wrong.</0>": "<0>Aduh, ada yang salah.</0>"
+  "This feature is only supported on Firefox.": "Fitur ini hanya didukung di Firefox."
 }
--- a/public/locales/ja/app.json
+++ b/public/locales/ja/app.json
@@ -1,107 +1 @@
-{
-  "{{name}} (Connecting...)": "{{name}}（接続しています…）",
-  "{{count}} people connected|other": "{{count}}人が接続済",
-  "{{count}} people connected|one": "{{count}}人が接続済",
-  "{{name}} (Waiting for video...)": "{{name}}（ビデオを待機しています…）",
-  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>既にアカウントをお持ちですか？</0><1><0>ログイン</0>または<2>ゲストとしてアクセス</2></1>",
-  "{{roomName}} - Walkie-talkie call": "{{roomName}} - トランシーバー通話",
-  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>アカウントを作成</0>または<2>ゲストとしてアクセス</2>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>今すぐ通話に参加</0><1>または</1><2>通話リンクをコピーし、後で参加</2>",
-  "Accept camera/microphone permissions to join the call.": "通話に参加するには、カメラ・マイクの許可が必要です。",
-  "<0>Oops, something's gone wrong.</0>": "<0>何かがうまく行きませんでした。</0>",
-  "Camera/microphone permissions needed to join the call.": "通話に参加する場合、カメラ・マイクの許可が必要です。",
-  "Allow analytics": "アナリティクスを許可",
-  "Camera": "カメラ",
-  "Call link copied": "通話リンクをコピーしました",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "「今すぐ通話に参加」をクリックすると、<2>利用規約</2>に同意したとみなされます",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "「続行」をクリックすると、 <2>利用規約</2>に同意したとみなされます",
-  "Avatar": "アバター",
-  "Accept microphone permissions to join the call.": "通話に参加するには、マイクの許可が必要です。",
-  "Audio": "音声",
-  "Advanced": "高度",
-  "Connection lost": "接続が切断されました",
-  "Confirm password": "パスワードを確認",
-  "Close": "閉じる",
-  "Change layout": "レイアウトを変更",
-  "Copied!": "コピーしました！",
-  "Copy and share this call link": "通話リンクをコピーし共有",
-  "Copy": "コピー",
-  "Description (optional)": "概要（任意）",
-  "Debug log": "デバッグログ",
-  "Create account": "アカウントを作成",
-  "Having trouble? Help us fix it.": "問題が起きましたか？修正にご協力ください。",
-  "Go": "続行",
-  "Fetching group call timed out.": "グループ通話の取得がタイムアウトしました。",
-  "Element Call Home": "Element Call ホーム",
-  "Download debug logs": "デバッグログをダウンロード",
-  "Display name": "表示名",
-  "Developer": "開発者",
-  "Details": "詳細",
-  "Full screen": "全画面表示",
-  "Exit full screen": "全画面表示を終了",
-  "Include debug logs": "デバッグログを含める",
-  "Home": "ホーム",
-  "Incompatible versions!": "互換性のないバージョンです！",
-  "Incompatible versions": "互換性のないバージョン",
-  "Join existing call?": "既存の通話に参加しますか？",
-  "Join call now": "今すぐ通話に参加",
-  "Join call": "通話に参加",
-  "Invite": "招待",
-  "Invite people": "連絡先を招待",
-  "Not registered yet? <2>Create an account</2>": "アカウントがありませんか？ <2>アカウントを作成</2>",
-  "Mute microphone": "マイクをミュート",
-  "Microphone permissions needed to join the call.": "通話の参加にはマイクの許可が必要です。",
-  "Microphone": "マイク",
-  "Login": "ログイン",
-  "Logging in…": "ログインしています…",
-  "Loading…": "読み込んでいます…",
-  "Loading room…": "ルームを読み込んでいます…",
-  "Leave": "退出",
-  "Version: {{version}}": "バージョン：{{version}}",
-  "Username": "ユーザー名",
-  "User menu": "ユーザーメニュー",
-  "User ID": "ユーザーID",
-  "Unmute microphone": "マイクのミュートを解除",
-  "Turn on camera": "カメラをつける",
-  "Turn off camera": "カメラを切る",
-  "Submitting feedback…": "フィードバックを送信しています…",
-  "Submit feedback": "フィードバックを送信",
-  "Stop sharing screen": "画面共有を停止",
-  "Spotlight": "スポットライト",
-  "Send debug logs": "デバッグログを送信",
-  "Sign out": "サインアウト",
-  "Sign in": "サインイン",
-  "Share screen": "画面共有",
-  "Settings": "設定",
-  "Sending…": "送信しています…",
-  "Sending debug logs…": "デバッグログを送信しています…",
-  "Saving…": "保存しています…",
-  "Save": "保存",
-  "Return to home screen": "ホーム画面に戻る",
-  "Registering…": "登録しています…",
-  "Register": "登録",
-  "Profile": "プロフィール",
-  "Press and hold spacebar to talk": "スペースを長押しで会話",
-  "Passwords must match": "パスワードが一致する必要があります",
-  "Password": "パスワード",
-  "Speaker": "スピーカー",
-  "Video call name": "ビデオ通話の名称",
-  "Video call": "ビデオ通話",
-  "Video": "ビデオ",
-  "Waiting for other participants…": "他の参加者を待機しています…",
-  "Waiting for network": "ネットワークを待機しています",
-  "Walkie-talkie call name": "トランシーバー通話の名称",
-  "Walkie-talkie call": "トランシーバー通話",
-  "Camera {{n}}": "カメラ {{n}}",
-  "{{name}} is talking…": "{{name}}が話しています…",
-  "Yes, join call": "はい、通話に参加",
-  "Spatial audio": "空間オーディオ",
-  "Select an option": "オプションを選択",
-  "Debug log request": "デバッグログを要求",
-  "Your recent calls": "最近の通話",
-  "You can't talk at the same time": "同時に会話することはできません",
-  "WebRTC is not supported or is being blocked in this browser.": "お使いのブラウザでWebRTCがサポートされていないか、またはブロックされています。",
-  "Login to your account": "お持ちのアカウントでログイン",
-  "Freedom": "自由",
-  "{{displayName}}, your call is now ended": "{{displayName}}、通話が終了しました"
-}
+{}
--- a/public/locales/pl/app.json
+++ b/public/locales/pl/app.json
@@ -124,16 +124,5 @@
  "{{name}} is talking…": "{{name}} mówi…",
  "{{name}} is presenting": "{{name}} prezentuje",
  "{{displayName}}, your call is now ended": "{{displayName}}, twoje połączenie zostało zakończone",
-  "{{count}} people connected|one": "{{count}} osoba połączona",
-  "Whether to enable single-key keyboard shortcuts, e.g. 'm' to mute/unmute the mic.": "Czy włączyć skróty klawiszowe pojedynczych klawiszy, np. 'm' aby wyciszyć/załączyć mikrofon.",
-  "This feature is only supported on Firefox.": "Ta funkcjonalność jest dostępna tylko w Firefox.",
-  "Single-key keyboard shortcuts": "Skróty klawiszowe (pojedyncze klawisze)",
-  "Copy": "Kopiuj",
-  "Allow analytics": "Zezwól na analitykę",
-  "Advanced": "Zaawansowane",
-  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Wysłanie logów debuggowania pomoże nam ustalić przyczynę problemu.</0>",
-  "<0>Oops, something's gone wrong.</0>": "<0>Ojej, coś poszło nie tak.</0>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Dołącz do rozmowy teraz</0><1>Or</1><2>Skopiuj link do rozmowy i dołącz później</2>",
-  "{{name}} (Waiting for video...)": "{{name}} (Oczekiwanie na wideo...)",
-  "{{name}} (Connecting...)": "{{name}} (Łączenie...)"
+  "{{count}} people connected|one": "{{count}} osoba połączona"
 }
--- a/public/locales/ru/app.json
+++ b/public/locales/ru/app.json
@@ -132,12 +132,6 @@
  "Copy": "Копировать",
  "Allow analytics": "Разрешить аналитику",
  "Advanced": "Расширенные",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Присоединиться сейчас</0><1>или<1><2>cкопировать ссылку на звонок и присоединиться позже</2>",
-  "{{name}} (Connecting...)": "{{name}} (Соединение...)",
-  "Whether to enable single-key keyboard shortcuts, e.g. 'm' to mute/unmute the mic.": "Включить горячие клавиши, например 'm' чтобы отключить/включить микрофон.",
-  "This feature is only supported on Firefox.": "Эта возможность доступна только в Firefox.",
-  "Single-key keyboard shortcuts": "Горячие клавиши",
-  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Отправка журналов поможет нам найти и устранить проблему.</0>",
-  "<0>Oops, something's gone wrong.</0>": "<0>Упс, что-то пошло не так.</0>",
-  "{{name}} (Waiting for video...)": "{{name}} (Ожидание видео...)"
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Присоединиться сейчас</0><1>или<1><2>Скопировать ссылку на звонок и присоединиться позже</2>",
+  "{{name}} (Connecting...)": "{{name}} (Соединение...)"
 }
--- a/public/locales/sk/app.json
+++ b/public/locales/sk/app.json
@@ -137,7 +137,5 @@
  "{{displayName}}, your call is now ended": "{{displayName}}, váš hovor je teraz ukončený",
  "{{count}} people connected|other": "{{count}} osôb pripojených",
  "{{count}} people connected|one": "{{count}} osoba pripojená",
-  "This feature is only supported on Firefox.": "Táto funkcia je podporovaná len v prehliadači Firefox.",
-  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Odoslanie záznamov ladenia nám pomôže nájsť problém.</0>",
-  "<0>Oops, something's gone wrong.</0>": "<0>Hups, niečo sa pokazilo.</0>"
+  "This feature is only supported on Firefox.": "Táto funkcia je podporovaná len v prehliadači Firefox."
 }
--- a/public/locales/uk/app.json
+++ b/public/locales/uk/app.json
@@ -137,7 +137,5 @@
  "Whether to enable single-key keyboard shortcuts, e.g. 'm' to mute/unmute the mic.": "Чи вмикати/вимикати мікрофон однією клавішею, наприклад, «m» для ввімкнення/вимкнення мікрофона.",
  "Single-key keyboard shortcuts": "Одноклавішні комбінації клавіш",
  "{{name}} (Waiting for video...)": "{{name}} (Очікування на відео...)",
-  "This feature is only supported on Firefox.": "Ця функція підтримується лише в браузері Firefox.",
-  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Надсилання журналів зневадження допоможе нам виявити проблему.</0>",
-  "<0>Oops, something's gone wrong.</0>": "<0>Йой, щось пішло не за планом.</0>"
+  "This feature is only supported on Firefox.": "Ця функція підтримується лише в браузері Firefox."
 }
--- a/src/ClientContext.tsx
+++ b/src/ClientContext.tsx
@@ -36,10 +36,7 @@ import {
  fallbackICEServerAllowed,
 } from "./matrix-utils";
 import { widget } from "./widget";
-import {
-  PosthogAnalytics,
-  RegistrationType,
-} from "./analytics/PosthogAnalytics";
+import { PosthogAnalytics, RegistrationType } from "./PosthogAnalytics";
 import { translatedError } from "./TranslatedError";
 import { useEventTarget } from "./useEvents";
 import { Config } from "./config/Config";
--- a/src/analytics/PosthogAnalytics.ts
+++ b/src/analytics/PosthogAnalytics.ts
@@ -19,8 +19,8 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixClient } from "matrix-js-sdk";
 import { Buffer } from "buffer";

-import { widget } from "../widget";
-import { getSetting, setSetting, settingsBus } from "../settings/useSetting";
+import { widget } from "./widget";
+import { getSetting, setSetting, settingsBus } from "./settings/useSetting";
 import {
  CallEndedTracker,
  CallStartedTracker,
@@ -30,8 +30,8 @@ import {
  MuteMicrophoneTracker,
  UndecryptableToDeviceEventTracker,
 } from "./PosthogEvents";
-import { Config } from "../config/Config";
-import { getUrlParams } from "../UrlParams";
+import { Config } from "./config/Config";
+import { getUrlParams } from "./UrlParams";

 /* Posthog analytics tracking.
 *
@@ -94,7 +94,7 @@ export class PosthogAnalytics {
  private static ANALYTICS_EVENT_TYPE = "im.vector.analytics";

  // set true during the constructor if posthog config is present, otherwise false
-  private static internalInstance: PosthogAnalytics | null = null;
+  private static internalInstance = null;

  private identificationPromise: Promise<void>;
  private readonly enabled: boolean = false;
@@ -137,9 +137,6 @@ export class PosthogAnalytics {
      });
      this.enabled = true;
    } else {
-      logger.info(
-        "Posthog is not enabled because there is no api key or no host given in the config"
-      );
      this.enabled = false;
    }
    this.startListeningToSettingsChanges();
@@ -228,7 +225,9 @@ export class PosthogAnalytics {
  }

  public async identifyUser(analyticsIdGenerator: () => string) {
-    if (this.anonymity == Anonymity.Pseudonymous && this.enabled) {
+    // There might be a better way to get the client here.
+
+    if (this.anonymity == Anonymity.Pseudonymous) {
      // Check the user's account_data for an analytics ID to use. Storing the ID in account_data allows
      // different devices to send the same ID.
      let analyticsID = await this.getAnalyticsId();
--- a/src/analytics/PosthogEvents.ts
+++ b/src/analytics/PosthogEvents.ts
--- a/src/analytics/AnalyticsOptInDescription.tsx
+++ b/src/analytics/AnalyticsOptInDescription.tsx
@@ -1,20 +0,0 @@
-import { t } from "i18next";
-import React from "react";
-
-import { Link } from "../typography/Typography";
-
-export const optInDescription: () => JSX.Element = () => {
-  return (
-    <>
-      <>
-        {t(
-          "By ticking this box you consent to the collection of anonymous data, which we use to improve your experience. You can find more information about which data we track in our "
-        )}
-      </>
-      <Link color="primary" href="https://element.io/privacy">
-        <>{t("Privacy Policy")}</>
-      </Link>
-      .
-    </>
-  );
-};
--- a/src/auth/LoginPage.tsx
+++ b/src/auth/LoginPage.tsx
@@ -25,7 +25,7 @@ import { Button } from "../button";
 import styles from "./LoginPage.module.css";
 import { useInteractiveLogin } from "./useInteractiveLogin";
 import { usePageTitle } from "../usePageTitle";
-import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import { PosthogAnalytics } from "../PosthogAnalytics";
 import { Config } from "../config/Config";

 export const LoginPage: FC = () => {
--- a/src/auth/RegisterPage.tsx
+++ b/src/auth/RegisterPage.tsx
@@ -38,7 +38,7 @@ import { LoadingView } from "../FullScreenView";
 import { useRecaptcha } from "./useRecaptcha";
 import { Caption, Link } from "../typography/Typography";
 import { usePageTitle } from "../usePageTitle";
-import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import { PosthogAnalytics } from "../PosthogAnalytics";
 import { Config } from "../config/Config";

 export const RegisterPage: FC = () => {
--- a/src/config/ConfigOptions.ts
+++ b/src/config/ConfigOptions.ts
@@ -44,14 +44,6 @@ export interface ConfigOptions {
      server_name: string;
    };
  };
-
-  /**
-   * Allow to join a group calls without audio and video.
-   * TEMPORARY: Is a feature that's not proved and experimental
-   */
-  features?: {
-    feature_group_calls_without_video_and_audio: boolean;
-  };
 }

 // Overrides members from ConfigOptions that are always provided by the
--- a/src/home/RegisteredView.tsx
+++ b/src/home/RegisteredView.tsx
@@ -24,11 +24,7 @@ import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";

-import {
-  createRoom,
-  roomAliasLocalpartFromRoomName,
-  sanitiseRoomNameInput,
-} from "../matrix-utils";
+import { createRoom, roomAliasLocalpartFromRoomName } from "../matrix-utils";
 import { useGroupCallRooms } from "./useGroupCallRooms";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import commonStyles from "./common.module.css";
@@ -42,8 +38,6 @@ import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { Title } from "../typography/Typography";
 import { Form } from "../form/Form";
 import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
-import { useOptInAnalytics } from "../settings/useSetting";
-import { optInDescription } from "../analytics/AnalyticsOptInDescription";

 interface Props {
  client: MatrixClient;
@@ -54,7 +48,6 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
  const [callType, setCallType] = useState(CallType.Video);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error>();
-  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
  const history = useHistory();
  const { t } = useTranslation();
  const { modalState, modalProps } = useModalTriggerState();
@@ -64,10 +57,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
      e.preventDefault();
      const data = new FormData(e.target as HTMLFormElement);
      const roomNameData = data.get("callName");
-      const roomName =
-        typeof roomNameData === "string"
-          ? sanitiseRoomNameInput(roomNameData)
-          : "";
+      const roomName = typeof roomNameData === "string" ? roomNameData : "";
      const ptt = callType === CallType.Radio;

      async function submit() {
@@ -144,15 +134,6 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
                {loading ? t("Loading…") : t("Go")}
              </Button>
            </FieldRow>
-            <InputField
-              id="optInAnalytics"
-              type="checkbox"
-              checked={optInAnalytics}
-              description={optInDescription()}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                setOptInAnalytics(event.target.checked)
-              }
-            />
            {error && (
              <FieldRow className={styles.fieldRow}>
                <ErrorMessage error={error} />
--- a/src/home/UnauthenticatedView.tsx
+++ b/src/home/UnauthenticatedView.tsx
@@ -24,11 +24,7 @@ import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
-import {
-  createRoom,
-  roomAliasLocalpartFromRoomName,
-  sanitiseRoomNameInput,
-} from "../matrix-utils";
+import { createRoom, roomAliasLocalpartFromRoomName } from "../matrix-utils";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
 import { useModalTriggerState } from "../Modal";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
@@ -39,15 +35,12 @@ import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
 import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
-import { useOptInAnalytics } from "../settings/useSetting";
-import { optInDescription } from "../analytics/AnalyticsOptInDescription";

 export const UnauthenticatedView: FC = () => {
  const { setClient } = useClient();
  const [callType, setCallType] = useState(CallType.Video);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error>();
-  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
  const [privacyPolicyUrl, recaptchaKey, register] =
    useInteractiveRegistration();
  const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
@@ -61,7 +54,7 @@ export const UnauthenticatedView: FC = () => {
    (e) => {
      e.preventDefault();
      const data = new FormData(e.target as HTMLFormElement);
-      const roomName = sanitiseRoomNameInput(data.get("callName") as string);
+      const roomName = data.get("callName") as string;
      const displayName = data.get("displayName") as string;
      const ptt = callType === CallType.Radio;

@@ -155,15 +148,6 @@ export const UnauthenticatedView: FC = () => {
                autoComplete="off"
              />
            </FieldRow>
-            <InputField
-              id="optInAnalytics"
-              type="checkbox"
-              checked={optInAnalytics}
-              description={optInDescription()}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                setOptInAnalytics(event.target.checked)
-              }
-            />
            <Caption>
              <Trans>
                By clicking "Go", you agree to our{" "}
--- a/src/initializer.tsx
+++ b/src/initializer.tsx
@@ -214,5 +214,5 @@ export class Initializer {
      resolve();
    }
  }
-  private initPromise: Promise<void> | null;
+  private initPromise: Promise<void>;
 }
--- a/src/input/Input.module.css
+++ b/src/input/Input.module.css
@@ -209,7 +209,3 @@ limitations under the License.
  margin-left: 26px;
  width: 100%; /* Ensure that it breaks onto the next row */
 }
-
-.description.noLabel {
-  margin-top: -20px; /* Ensures that there is no weired spacing if the checkbox doesn't have a label */
-}
--- a/src/input/Input.tsx
+++ b/src/input/Input.tsx
@@ -55,14 +55,14 @@ export function Field({ children, className }: FieldProps): JSX.Element {
 }

 interface InputFieldProps {
-  label?: string;
+  label: string;
  type: string;
  prefix?: string;
  suffix?: string;
  id?: string;
  checked?: boolean;
  className?: string;
-  description?: string | ReactNode;
+  description?: string;
  disabled?: boolean;
  required?: boolean;
  // this is a hack. Those variables should be part of `HTMLAttributes<HTMLInputElement> | HTMLAttributes<HTMLTextAreaElement>`
@@ -140,14 +140,7 @@ export const InputField = forwardRef<
        </label>
        {suffix && <span>{suffix}</span>}
        {description && (
-          <p
-            id={descriptionId}
-            className={
-              label
-                ? styles.description
-                : classNames(styles.description, styles.noLabel)
-            }
-          >
+          <p id={descriptionId} className={styles.description}>
            {description}
          </p>
        )}
--- a/src/matrix-utils.ts
+++ b/src/matrix-utils.ts
@@ -92,14 +92,10 @@ export async function initClient(
    indexedDB = window.indexedDB;
  } catch (e) {}

-  const baseOpts = {
-    fallbackICEServerAllowed: fallbackICEServerAllowed,
-    isVoipWithNoMediaAllowed:
-      Config.get().features?.feature_group_calls_without_video_and_audio,
-  } as ICreateClientOpts;
+  const storeOpts = {} as ICreateClientOpts;

  if (indexedDB && localStorage) {
-    baseOpts.store = new IndexedDBStore({
+    storeOpts.store = new IndexedDBStore({
      indexedDB: window.indexedDB,
      localStorage,
      dbName: SYNC_STORE_NAME,
@@ -111,7 +107,7 @@ export async function initClient(
        : () => new IndexedDBWorker(),
    });
  } else if (localStorage) {
-    baseOpts.store = new MemoryStore({ localStorage });
+    storeOpts.store = new MemoryStore({ localStorage });
  }

  // Check whether we have crypto data store. If we are restoring a session
@@ -143,14 +139,14 @@ export async function initClient(
  }

  if (indexedDB) {
-    baseOpts.cryptoStore = new IndexedDBCryptoStore(
+    storeOpts.cryptoStore = new IndexedDBCryptoStore(
      indexedDB,
      CRYPTO_STORE_NAME
    );
  } else if (localStorage) {
-    baseOpts.cryptoStore = new LocalStorageCryptoStore(localStorage);
+    storeOpts.cryptoStore = new LocalStorageCryptoStore(localStorage);
  } else {
-    baseOpts.cryptoStore = new MemoryCryptoStore();
+    storeOpts.cryptoStore = new MemoryCryptoStore();
  }

  // XXX: we read from the URL params in RoomPage too:
@@ -164,7 +160,7 @@ export async function initClient(
  }

  const client = createClient({
-    ...baseOpts,
+    ...storeOpts,
    ...clientOptions,
    useAuthorizationHeader: true,
    // Use a relatively low timeout for API calls: this is a realtime app
@@ -215,37 +211,6 @@ export function fullAliasFromRoomName(
  return `#${roomAliasLocalpartFromRoomName(roomName)}:${client.getDomain()}`;
 }

-/**
- * Applies some basic sanitisation to a room name that the user
- * has given us
- * @param input The room name from the user
- * @param client A matrix client object
- */
-export function sanitiseRoomNameInput(input: string): string {
-  // check to see if the user has enetered a fully qualified room
-  // alias. If so, turn it into just the localpart because that's what
-  // we use
-  const parts = input.split(":", 2);
-  if (parts.length === 2 && parts[0][0] === "#") {
-    // looks like a room alias
-    if (parts[1] === Config.defaultServerName()) {
-      // it's local to our own homeserver
-      return parts[0];
-    } else {
-      throw new Error("Unsupported remote room alias");
-    }
-  }
-
-  // that's all we do here right now
-  return input;
-}
-
-/**
- * XXX: What is this trying to do? It looks like it's getting the localpart from
- * a room alias, but why is it splitting on hyphens and then putting spaces in??
- * @param roomId
- * @returns
- */
 export function roomNameFromRoomId(roomId: string): string {
  return roomId
    .match(/([^:]+):.*$/)[1]
--- a/src/room/GroupCallInspector.tsx
+++ b/src/room/GroupCallInspector.tsx
@@ -35,7 +35,7 @@ import { CallEvent } from "matrix-js-sdk/src/webrtc/call";

 import styles from "./GroupCallInspector.module.css";
 import { SelectInput } from "../input/SelectInput";
-import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import { PosthogAnalytics } from "../PosthogAnalytics";

 interface InspectorContextState {
  eventsByUserId?: { [userId: string]: SequenceDiagramMatrixEvent[] };
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -32,7 +32,7 @@ import { CallEndedView } from "./CallEndedView";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 import { useLocationNavigation } from "../useLocationNavigation";
-import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import { PosthogAnalytics } from "../PosthogAnalytics";
 import { useMediaHandler } from "../settings/useMediaHandler";
 import { findDeviceByName, getDevices } from "../media-utils";

--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -20,10 +20,9 @@ limitations under the License.
  flex-direction: column;
  overflow: hidden;
  min-height: 100%;
+  position: fixed;
  height: 100%;
  width: 100%;
-  --footerPadding: 8px;
-  --footerHeight: calc(50px + 2 * var(--footerPadding));
 }

 .centerMessage {
@@ -40,27 +39,11 @@ limitations under the License.
 }

 .footer {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
+  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
-  padding: var(--footerPadding) 0;
-  /* TODO: Un-hardcode these colors */
-  background: linear-gradient(
-    360deg,
-    #15191e 0%,
-    rgba(21, 25, 30, 0.9) 37%,
-    rgba(21, 25, 30, 0.8) 49.68%,
-    rgba(21, 25, 30, 0.7) 56.68%,
-    rgba(21, 25, 30, 0.427397) 72.92%,
-    rgba(21, 25, 30, 0.257534) 81.06%,
-    rgba(21, 25, 30, 0.136986) 87.29%,
-    rgba(21, 25, 30, 0.0658079) 92.4%,
-    rgba(21, 25, 30, 0) 100%
-  );
+  height: calc(50px + 2 * 8px);
 }

 .footer > * {
@@ -82,22 +65,16 @@ limitations under the License.
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
-  /* To make avatars scale smoothly with their tiles during animations, we
-  override the styles set on the element */
-  --avatarSize: calc(min(var(--tileWidth), var(--tileHeight)) / 2);
-  width: var(--avatarSize) !important;
-  height: var(--avatarSize) !important;
-  border-radius: 10000px !important;
 }

@media (min-height: 300px) {
-  .inRoom {
-    --footerPadding: 24px;
+  .footer {
+    height: calc(50px + 2 * 24px);
  }
 }

@media (min-width: 800px) {
-  .inRoom {
-    --footerPadding: 32px;
+  .footer {
+    height: calc(50px + 2 * 32px);
  }
 }
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -41,11 +41,7 @@ import {
  RoomHeaderInfo,
  VersionMismatchWarning,
 } from "../Header";
-import {
-  VideoGrid,
-  useVideoGridLayout,
-  ChildrenProperties,
-} from "../video-grid/VideoGrid";
+import { VideoGrid, useVideoGridLayout } from "../video-grid/VideoGrid";
 import { VideoTileContainer } from "../video-grid/VideoTileContainer";
 import { GroupCallInspector } from "./GroupCallInspector";
 import { OverflowMenu } from "./OverflowMenu";
@@ -55,15 +51,11 @@ import { UserMenuContainer } from "../UserMenuContainer";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
 import { useMediaHandler } from "../settings/useMediaHandler";
-import {
-  useNewGrid,
-  useShowInspector,
-  useSpatialAudio,
-} from "../settings/useSetting";
+import { useShowInspector, useSpatialAudio } from "../settings/useSetting";
 import { useModalTriggerState } from "../Modal";
 import { useAudioContext } from "../video-grid/useMediaStream";
 import { useFullscreen } from "../video-grid/useFullscreen";
-import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import { PosthogAnalytics } from "../PosthogAnalytics";
 import { widget, ElementWidgetActions } from "../widget";
 import { useJoinRule } from "./useJoinRule";
 import { useUrlParams } from "../UrlParams";
@@ -72,7 +64,6 @@ import { ParticipantInfo } from "./useGroupCall";
 import { TileDescriptor } from "../video-grid/TileDescriptor";
 import { AudioSink } from "../video-grid/AudioSink";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
-import { NewVideoGrid } from "../video-grid/NewVideoGrid";

 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -285,8 +276,6 @@ export function InCallView({
    []
  );

-  const [newGrid] = useNewGrid();
-  const Grid = newGrid ? NewVideoGrid : VideoGrid;
  const prefersReducedMotion = usePrefersReducedMotion();

  const renderContent = (): JSX.Element => {
@@ -300,8 +289,8 @@ export function InCallView({
    if (maximisedParticipant) {
      return (
        <VideoTileContainer
-          targetHeight={bounds.height}
-          targetWidth={bounds.width}
+          height={bounds.height}
+          width={bounds.width}
          key={maximisedParticipant.id}
          item={maximisedParticipant}
          getAvatar={renderAvatar}
@@ -316,13 +305,20 @@ export function InCallView({
    }

    return (
-      <Grid
+      <VideoGrid
        items={items}
        layout={layout}
        disableAnimations={prefersReducedMotion || isSafari}
      >
-        {({ item, ...rest }: ChildrenProperties) => (
+        {({
+          item,
+          ...rest
+        }: {
+          item: TileDescriptor;
+          [x: string]: unknown;
+        }) => (
          <VideoTileContainer
+            key={item.id}
            item={item}
            getAvatar={renderAvatar}
            audioContext={audioContext}
@@ -334,7 +330,7 @@ export function InCallView({
            {...rest}
          />
        )}
-      </Grid>
+      </VideoGrid>
    );
  };

@@ -372,36 +368,27 @@ export function InCallView({

  if (noControls) {
    footer = null;
-  } else {
-    const buttons: JSX.Element[] = [];
-
-    buttons.push(
-      <MicButton
-        key="1"
-        muted={microphoneMuted}
-        onPress={toggleMicrophoneMuted}
-      />,
-      <VideoButton
-        key="2"
-        muted={localVideoMuted}
-        onPress={toggleLocalVideoMuted}
-      />
+  } else if (reducedControls) {
+    footer = (
+      <div className={styles.footer}>
+        <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
+        <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
+        <HangupButton onPress={onLeave} />
+      </div>
    );
-
-    if (!reducedControls) {
-      if (canScreenshare && !hideScreensharing && !isSafari) {
-        buttons.push(
+  } else {
+    footer = (
+      <div className={styles.footer}>
+        <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
+        <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
+        {canScreenshare && !hideScreensharing && !isSafari && (
          <ScreenshareButton
-            key="3"
            enabled={isScreensharing}
            onPress={toggleScreensharing}
          />
-        );
-      }
-      if (!maximisedParticipant) {
-        buttons.push(
+        )}
+        {!maximisedParticipant && (
          <OverflowMenu
-            key="4"
            inCall
            roomIdOrAlias={roomIdOrAlias}
            groupCall={groupCall}
@@ -409,12 +396,10 @@ export function InCallView({
            feedbackModalState={feedbackModalState}
            feedbackModalProps={feedbackModalProps}
          />
-        );
-      }
-    }
-
-    buttons.push(<HangupButton key="6" onPress={onLeave} />);
-    footer = <div className={styles.footer}>{buttons}</div>;
+        )}
+        <HangupButton onPress={onLeave} />
+      </div>
+    );
  }

  return (
--- a/src/room/PTTButton.tsx
+++ b/src/room/PTTButton.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 import React, { useCallback, useState, useRef } from "react";
 import classNames from "classnames";
 import { useSpring, animated } from "@react-spring/web";
-import { logger } from "@sentry/utils";

 import styles from "./PTTButton.module.css";
 import { ReactComponent as MicIcon } from "../icons/Mic.svg";
@@ -69,23 +68,11 @@ export const PTTButton: React.FC<Props> = ({
    enqueueNetworkWaiting(true, 100);
    startTalking();
  }, [enqueueNetworkWaiting, startTalking, buttonHeld]);
-
  const unhold = useCallback(() => {
-    if (!buttonHeld) return;
    setButtonHeld(false);
    setNetworkWaiting(false);
    stopTalking();
-  }, [setNetworkWaiting, stopTalking, buttonHeld]);
-
-  const onMouseUp = useCallback(() => {
-    logger.info("Mouse up event: unholding PTT button");
-    unhold();
-  }, [unhold]);
-
-  const onBlur = useCallback(() => {
-    logger.info("Blur event: unholding PTT button");
-    unhold();
-  }, [unhold]);
+  }, [setNetworkWaiting, stopTalking]);

  const onButtonMouseDown = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -98,7 +85,7 @@ export const PTTButton: React.FC<Props> = ({
  // These listeners go on the window so even if the user's cursor / finger
  // leaves the button while holding it, the button stays pushed until
  // they stop clicking / tapping.
-  useEventTarget(window, "mouseup", onMouseUp);
+  useEventTarget(window, "mouseup", unhold);
  useEventTarget(
    window,
    "touchend",
@@ -116,8 +103,6 @@ export const PTTButton: React.FC<Props> = ({
        }
        if (!touchFound) return;

-        logger.info("Touch event ended: unholding PTT button");
-
        e.preventDefault();
        unhold();
        setActiveTouchId(null);
@@ -178,8 +163,6 @@ export const PTTButton: React.FC<Props> = ({

          e.preventDefault();

-          logger.info("Keyup event for spacebar: unholding PTT button");
-
          unhold();
        }
      },
@@ -188,7 +171,7 @@ export const PTTButton: React.FC<Props> = ({
  );

  // TODO: We will need to disable this for a global PTT hotkey to work
-  useEventTarget(window, "blur", onBlur);
+  useEventTarget(window, "blur", unhold);

  const prefersReducedMotion = usePrefersReducedMotion();
  const { shadow } = useSpring({
--- a/src/room/PTTCallView.tsx
+++ b/src/room/PTTCallView.tsx
@@ -210,36 +210,36 @@ export const PTTCallView: React.FC<Props> = ({
        </Header>
      )}
      <div className={styles.center}>
-        {/* Always render this because the window will become shorter when the on-screen
-            keyboard appears, so if we don't render it, the dialog will unmount. */}
-        <div style={{ display: showControls ? "block" : "none" }}>
-          <div className={styles.participants}>
-            <p>
-              {t("{{count}} people connected", {
-                count: participatingMembers.length,
-              })}
-            </p>
-            <Facepile
-              size={facepileSize}
-              max={8}
-              className={styles.facepile}
-              client={client}
-              members={participatingMembers}
-            />
-          </div>
-          <div className={styles.footer}>
-            <OverflowMenu
-              inCall
-              roomIdOrAlias={roomIdOrAlias}
-              groupCall={groupCall}
-              showInvite={false}
-              feedbackModalState={feedbackModalState}
-              feedbackModalProps={feedbackModalProps}
-            />
-            {!isEmbedded && <HangupButton onPress={onLeave} />}
-            <InviteButton onPress={() => inviteModalState.open()} />
-          </div>
-        </div>
+        {showControls && (
+          <>
+            <div className={styles.participants}>
+              <p>
+                {t("{{count}} people connected", {
+                  count: participatingMembers.length,
+                })}
+              </p>
+              <Facepile
+                size={facepileSize}
+                max={8}
+                className={styles.facepile}
+                client={client}
+                members={participatingMembers}
+              />
+            </div>
+            <div className={styles.footer}>
+              <OverflowMenu
+                inCall
+                roomIdOrAlias={roomIdOrAlias}
+                groupCall={groupCall}
+                showInvite={false}
+                feedbackModalState={feedbackModalState}
+                feedbackModalProps={feedbackModalProps}
+              />
+              {!isEmbedded && <HangupButton onPress={onLeave} />}
+              <InviteButton onPress={() => inviteModalState.open()} />
+            </div>
+          </>
+        )}

        <div className={styles.pttButtonContainer}>
          {showControls &&
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -50,9 +50,9 @@ export const RoomPage: FC = () => {
  const [isRegistering, setIsRegistering] = useState(false);

  useEffect(() => {
-    // If we've finished loading, are not already authed and we've been given a display name as
+    // If we're not already authed and we've been given a display name as
    // a URL param, automatically register a passwordless user
-    if (!loading && !isAuthenticated && displayName) {
+    if (!isAuthenticated && displayName) {
      setIsRegistering(true);
      registerPasswordlessUser(displayName).finally(() => {
        setIsRegistering(false);
@@ -63,7 +63,6 @@ export const RoomPage: FC = () => {
    displayName,
    setIsRegistering,
    registerPasswordlessUser,
-    loading,
  ]);

  const groupCallView = useCallback(
--- a/src/room/useGroupCall.ts
+++ b/src/room/useGroupCall.ts
@@ -29,7 +29,7 @@ import { useTranslation } from "react-i18next";
 import { IWidgetApiRequest } from "matrix-widget-api";

 import { usePageUnload } from "./usePageUnload";
-import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import { PosthogAnalytics } from "../PosthogAnalytics";
 import { TranslatedError, translatedError } from "../TranslatedError";
 import { ElementWidgetActions, ScreenshareStartData, widget } from "../widget";

@@ -98,24 +98,12 @@ function getParticipants(
        (f) => f.userId === member.userId && f.deviceId === deviceId
      );

-      let connectionState: ConnectionState;
-      // If we allow calls without media, we have no feeds and cannot read the connection status from them.
-      // @TODO: The connection state should generally not be determined by the feed.
-      if (
-        groupCall.allowCallWithoutVideoAndAudio &&
-        !feed &&
-        !participant.screensharing
-      ) {
-        connectionState = ConnectionState.Connected;
-      } else {
-        connectionState = feed
+      participantInfoMap.set(deviceId, {
+        connectionState: feed
          ? feed.connected
            ? ConnectionState.Connected
            : ConnectionState.WaitMedia
-          : ConnectionState.EstablishingCall;
-      }
-      participantInfoMap.set(deviceId, {
-        connectionState,
+          : ConnectionState.EstablishingCall,
        presenter: participant.screensharing,
      });
    }
@@ -170,38 +158,6 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
    [setState]
  );

-  const doNothingMediaActionCallback = useCallback(
-    (details: MediaSessionActionDetails) => {},
-    []
-  );
-
-  useEffect(() => {
-    // disable the media action keys, otherwise audio elements get paused when
-    // the user presses media keys or unplugs headphones, etc.
-    // Note there are actions for muting / unmuting a microphone & hanging up
-    // which we could wire up.
-    const mediaActions: MediaSessionAction[] = [
-      "play",
-      "pause",
-      "stop",
-      "nexttrack",
-      "previoustrack",
-    ];
-
-    for (const mediaAction of mediaActions) {
-      navigator.mediaSession.setActionHandler(
-        mediaAction,
-        doNothingMediaActionCallback
-      );
-    }
-
-    return () => {
-      for (const mediaAction of mediaActions) {
-        navigator.mediaSession.setActionHandler(mediaAction, null);
-      }
-    };
-  }, [doNothingMediaActionCallback]);
-
  useEffect(() => {
    function onGroupCallStateChanged() {
      updateState({
--- a/src/room/useLoadGroupCall.ts
+++ b/src/room/useLoadGroupCall.ts
@@ -52,22 +52,12 @@ export const useLoadGroupCall = (

    const fetchOrCreateRoom = async (): Promise<Room> => {
      try {
-        // We lowercase the localpart when we create the room, so we must lowercase
-        // it here too (we just do the whole alias). We can't do the same to room IDs
-        // though.
-        const sanitisedIdOrAlias =
-          roomIdOrAlias[0] === "#"
-            ? roomIdOrAlias.toLowerCase()
-            : roomIdOrAlias;
-
-        const room = await client.joinRoom(sanitisedIdOrAlias, {
-          viaServers,
-        });
+        const room = await client.joinRoom(roomIdOrAlias, { viaServers });
        logger.info(
-          `Joined ${sanitisedIdOrAlias}, waiting room to be ready for group calls`
+          `Joined ${roomIdOrAlias}, waiting room to be ready for group calls`
        );
        await client.waitUntilRoomReadyForGroupCalls(room.roomId);
-        logger.info(`${sanitisedIdOrAlias}, is ready for group calls`);
+        logger.info(`${roomIdOrAlias}, is ready for group calls`);
        return room;
      } catch (error) {
        if (
--- a/src/room/usePTT.ts
+++ b/src/room/usePTT.ts
@@ -113,14 +113,12 @@ export const usePTT = (
    },
    setState,
  ] = useState(() => {
-    // slightly concerningly, this can end up null as we seem to sometimes get
-    // here before the room state contains our own member event
    const roomMember = groupCall.room.getMember(client.getUserId());

    const activeSpeakerFeed = getActiveSpeakerFeed(userMediaFeeds, groupCall);

    return {
-      isAdmin: roomMember ? roomMember.powerLevel >= 100 : false,
+      isAdmin: roomMember.powerLevel >= 100,
      talkOverEnabled: false,
      pttButtonHeld: false,
      activeSpeakerUserId: activeSpeakerFeed ? activeSpeakerFeed.userId : null,
--- a/src/settings/SettingsModal.module.css
+++ b/src/settings/SettingsModal.module.css
@@ -26,12 +26,3 @@ limitations under the License.
 .fieldRowText {
  margin-bottom: 0;
 }
-
-/*
-This style guarantees a fixed width of the tab bar in the settings window.
-The "Developer" item in the tab bar can be toggled.
-Without a defined width activating the developer tab makes the tab container jump to the right.
-*/
-.tabLabel {
-  width: 80px;
-}
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -33,14 +33,11 @@ import {
  useShowInspector,
  useOptInAnalytics,
  canEnableSpatialAudio,
-  useNewGrid,
-  useDeveloperSettingsTab,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
 import { useDownloadDebugLog } from "./submit-rageshake";
 import { Body } from "../typography/Typography";
-import { optInDescription } from "../analytics/AnalyticsOptInDescription";

 interface Props {
  isOpen: boolean;
@@ -64,10 +61,7 @@ export const SettingsModal = (props: Props) => {
  const [spatialAudio, setSpatialAudio] = useSpatialAudio();
  const [showInspector, setShowInspector] = useShowInspector();
  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
-  const [developerSettingsTab, setDeveloperSettingsTab] =
-    useDeveloperSettingsTab();
  const [keyboardShortcuts, setKeyboardShortcuts] = useKeyboardShortcuts();
-  const [newGrid, setNewGrid] = useNewGrid();

  const downloadDebugLog = useDownloadDebugLog();

@@ -84,7 +78,7 @@ export const SettingsModal = (props: Props) => {
          title={
            <>
              <AudioIcon width={16} height={16} />
-              <span className={styles.tabLabel}>{t("Audio")}</span>
+              <span>{t("Audio")}</span>
            </>
          }
        >
@@ -162,11 +156,24 @@ export const SettingsModal = (props: Props) => {
          title={
            <>
              <OverflowIcon width={16} height={16} />
-              <span>{t("More")}</span>
+              <span>{t("Advanced")}</span>
            </>
          }
        >
-          <h4>Keyboard</h4>
+          <FieldRow>
+            <InputField
+              id="optInAnalytics"
+              label={t("Allow analytics")}
+              type="checkbox"
+              checked={optInAnalytics}
+              description={t(
+                "This will send anonymised data (such as the duration of a call and the number of participants) to the Element Call team to help us optimise the application based on how it is used."
+              )}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setOptInAnalytics(event.target.checked)
+              }
+            />
+          </FieldRow>
          <FieldRow>
            <InputField
              id="keyboardShortcuts"
@@ -181,79 +188,40 @@ export const SettingsModal = (props: Props) => {
              }
            />
          </FieldRow>
-          <h4>Analytics</h4>
+        </TabItem>
+        <TabItem
+          title={
+            <>
+              <DeveloperIcon width={16} height={16} />
+              <span>{t("Developer")}</span>
+            </>
+          }
+        >
+          <FieldRow>
+            <Body className={styles.fieldRowText}>
+              {t("Version: {{version}}", {
+                version: import.meta.env.VITE_APP_VERSION || "dev",
+              })}
+            </Body>
+          </FieldRow>
          <FieldRow>
            <InputField
-              id="optInAnalytics"
+              id="showInspector"
+              name="inspector"
+              label={t("Show call inspector")}
              type="checkbox"
-              checked={optInAnalytics}
-              description={optInDescription()}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                setOptInAnalytics(event.target.checked)
+              checked={showInspector}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setShowInspector(e.target.checked)
              }
            />
          </FieldRow>
          <FieldRow>
-            <InputField
-              id="developerSettingsTab"
-              type="checkbox"
-              checked={developerSettingsTab}
-              label={t("Developer Settings")}
-              description={t(
-                "Expose developer settings in the settings window."
-              )}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                setDeveloperSettingsTab(event.target.checked)
-              }
-            />
+            <Button onPress={downloadDebugLog}>
+              {t("Download debug logs")}
+            </Button>
          </FieldRow>
        </TabItem>
-        {developerSettingsTab && (
-          <TabItem
-            title={
-              <>
-                <DeveloperIcon width={16} height={16} />
-                <span>{t("Developer")}</span>
-              </>
-            }
-          >
-            <FieldRow>
-              <Body className={styles.fieldRowText}>
-                {t("Version: {{version}}", {
-                  version: import.meta.env.VITE_APP_VERSION || "dev",
-                })}
-              </Body>
-            </FieldRow>
-            <FieldRow>
-              <InputField
-                id="showInspector"
-                name="inspector"
-                label={t("Show call inspector")}
-                type="checkbox"
-                checked={showInspector}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setShowInspector(e.target.checked)
-                }
-              />
-            </FieldRow>
-            <FieldRow>
-              <InputField
-                id="newGrid"
-                label={t("Use the upcoming grid system")}
-                type="checkbox"
-                checked={newGrid}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setNewGrid(e.target.checked)
-                }
-              />
-            </FieldRow>
-            <FieldRow>
-              <Button onPress={downloadDebugLog}>
-                {t("Download debug logs")}
-              </Button>
-            </FieldRow>
-          </TabItem>
-        )}
      </TabContainer>
    </Modal>
  );
--- a/src/settings/useSetting.ts
+++ b/src/settings/useSetting.ts
@@ -90,6 +90,3 @@ export const useShowInspector = () => useSetting("show-inspector", false);
 export const useOptInAnalytics = () => useSetting("opt-in-analytics", false);
 export const useKeyboardShortcuts = () =>
  useSetting("keyboard-shortcuts", true);
-export const useNewGrid = () => useSetting("new-grid", false);
-export const useDeveloperSettingsTab = () =>
-  useSetting("developer-settings-tab", false);
--- a/src/useMergedRefs.ts
+++ b/src/useMergedRefs.ts
@@ -1,39 +0,0 @@
-/*
-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 { MutableRefObject, RefCallback, useCallback } from "react";
-
-/**
- * Combines multiple refs into one, useful for attaching multiple refs to the
- * same DOM node.
- */
-export const useMergedRefs = <T>(
-  ...refs: (MutableRefObject<T | null> | RefCallback<T | null>)[]
-): RefCallback<T | null> =>
-  useCallback(
-    (value) =>
-      refs.forEach((ref) => {
-        if (typeof ref === "function") {
-          ref(value);
-        } else {
-          ref.current = value;
-        }
-      }),
-    // Since this isn't an array literal, we can't use the static dependency
-    // checker, but that's okay
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    refs
-  );
--- a/src/useReactiveState.ts
+++ b/src/useReactiveState.ts
@@ -1,67 +0,0 @@
-/*
-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 {
-  DependencyList,
-  Dispatch,
-  SetStateAction,
-  useCallback,
-  useRef,
-  useState,
-} from "react";
-
-/**
- * Hook creating a stateful value that updates automatically whenever the
- * dependencies change. Or equivalently, a version of useMemo that takes its own
- * previous value as an input, and can be updated manually.
- */
-export const useReactiveState = <T>(
-  updateFn: (prevState?: T) => T,
-  deps: DependencyList
-): [T, Dispatch<SetStateAction<T>>] => {
-  const state = useRef<T>();
-  if (state.current === undefined) state.current = updateFn();
-  const prevDeps = useRef<DependencyList>();
-
-  // Since we store the state in a ref, we use this counter to force an update
-  // when someone calls setState
-  const [, setNumUpdates] = useState(0);
-
-  // If this is the first render or the deps have changed, recalculate the state
-  if (
-    prevDeps.current === undefined ||
-    deps.length !== prevDeps.current.length ||
-    deps.some((d, i) => d !== prevDeps.current![i])
-  ) {
-    state.current = updateFn(state.current);
-  }
-  prevDeps.current = deps;
-
-  return [
-    state.current,
-    useCallback(
-      (action) => {
-        if (typeof action === "function") {
-          state.current = (action as (prevValue: T) => T)(state.current!);
-        } else {
-          state.current = action;
-        }
-        setNumUpdates((n) => n + 1); // Force an update
-      },
-      [setNumUpdates]
-    ),
-  ];
-};
--- a/src/video-grid/AudioSink.tsx
+++ b/src/video-grid/AudioSink.tsx
@@ -31,15 +31,14 @@ export const AudioSink: React.FC<Props> = ({
  tileDescriptor,
  audioOutput,
 }: Props) => {
-  const { localVolume, stream } = useCallFeed(tileDescriptor.callFeed);
+  const { audioMuted, localVolume, stream } = useCallFeed(
+    tileDescriptor.callFeed
+  );

  const audioElementRef = useMediaStream(
    stream,
    audioOutput,
-    // We don't compare the audioMuted flag of useCallFeed here, since unmuting
-    // depends on to-device messages which may lag behind the audio actually
-    // starting to flow over the stream
-    tileDescriptor.isLocal,
+    audioMuted,
    localVolume
  );

--- a/src/video-grid/NewVideoGrid.module.css
+++ b/src/video-grid/NewVideoGrid.module.css
@@ -1,48 +0,0 @@
-/*
-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.
-*/
-
-.grid {
-  contain: strict;
-  position: relative;
-  flex-grow: 1;
-  padding: 0 20px;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.slotGrid {
-  position: relative;
-  display: grid;
-  grid-auto-rows: 163px;
-  gap: 8px;
-  padding-bottom: var(--footerHeight);
-}
-
-.slot {
-  contain: strict;
-}
-
-@media (min-width: 800px) {
-  .grid {
-    padding: 0 22px;
-  }
-
-  .slotGrid {
-    grid-auto-rows: 183px;
-    column-gap: 18px;
-    row-gap: 21px;
-  }
-}
--- a/src/video-grid/NewVideoGrid.tsx
+++ b/src/video-grid/NewVideoGrid.tsx
@@ -1,461 +0,0 @@
-/*
-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 { SpringRef, TransitionFn, useTransition } from "@react-spring/web";
-import { EventTypes, Handler, useScroll } from "@use-gesture/react";
-import React, {
-  Dispatch,
-  FC,
-  ReactNode,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import useMeasure from "react-use-measure";
-import { zipWith } from "lodash";
-
-import styles from "./NewVideoGrid.module.css";
-import { TileDescriptor } from "./TileDescriptor";
-import { VideoGridProps as Props, TileSpring } from "./VideoGrid";
-import { useReactiveState } from "../useReactiveState";
-import { useMergedRefs } from "../useMergedRefs";
-import {
-  Grid,
-  Cell,
-  row,
-  column,
-  fillGaps,
-  forEachCellInArea,
-  cycleTileSize,
-  appendItems,
-} from "./model";
-
-interface GridState extends Grid {
-  /**
-   * The ID of the current state of the grid.
-   */
-  generation: number;
-}
-
-const useGridState = (
-  columns: number | null,
-  items: TileDescriptor[]
-): [GridState | null, Dispatch<SetStateAction<Grid>>] => {
-  const [grid, setGrid_] = useReactiveState<GridState | null>(
-    (prevGrid = null) => {
-      if (prevGrid === null) {
-        // We can't do anything if the column count isn't known yet
-        if (columns === null) {
-          return null;
-        } else {
-          prevGrid = { generation: 0, columns, cells: [] };
-        }
-      }
-
-      // Step 1: Update tiles that still exist, and remove tiles that have left
-      // the grid
-      const itemsById = new Map(items.map((i) => [i.id, i]));
-      const grid1: Grid = {
-        ...prevGrid,
-        cells: prevGrid.cells.map((c) => {
-          if (c === undefined) return undefined;
-          const item = itemsById.get(c.item.id);
-          return item === undefined ? undefined : { ...c, item };
-        }),
-      };
-
-      // Step 2: Backfill gaps left behind by removed tiles
-      const grid2 = fillGaps(grid1);
-
-      // Step 3: Add new tiles to the end of the grid
-      const existingItemIds = new Set(
-        grid2.cells.filter((c) => c !== undefined).map((c) => c!.item.id)
-      );
-      const newItems = items.filter((i) => !existingItemIds.has(i.id));
-      const grid3 = appendItems(newItems, grid2);
-
-      return { ...grid3, generation: prevGrid.generation + 1 };
-    },
-    [columns, items]
-  );
-
-  const setGrid: Dispatch<SetStateAction<Grid>> = useCallback(
-    (action) => {
-      if (typeof action === "function") {
-        setGrid_((prevGrid) =>
-          prevGrid === null
-            ? null
-            : {
-                ...(action as (prev: Grid) => Grid)(prevGrid),
-                generation: prevGrid.generation + 1,
-              }
-        );
-      } else {
-        setGrid_((prevGrid) => ({
-          ...action,
-          generation: prevGrid?.generation ?? 1,
-        }));
-      }
-    },
-    [setGrid_]
-  );
-
-  return [grid, setGrid];
-};
-
-interface Rect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-interface Tile extends Rect {
-  item: TileDescriptor;
-}
-
-interface DragState {
-  tileId: string;
-  tileX: number;
-  tileY: number;
-  cursorX: number;
-  cursorY: number;
-}
-
-/**
- * An interactive, animated grid of video tiles.
- */
-export const NewVideoGrid: FC<Props> = ({
-  items,
-  disableAnimations,
-  children,
-}) => {
-  // Overview: This component lays out tiles by rendering an invisible template
-  // grid of "slots" for tiles to go in. Once rendered, it uses the DOM API to
-  // get the dimensions of each slot, feeding these numbers back into
-  // react-spring to let the actual tiles move freely atop the template.
-
-  // To know when the rendered grid becomes consistent with the layout we've
-  // requested, we give it a data-generation attribute which holds the ID of the
-  // most recently rendered generation of the grid, and watch it with a
-  // MutationObserver.
-
-  const [slotGrid, setSlotGrid] = useState<HTMLDivElement | null>(null);
-  const [slotGridGeneration, setSlotGridGeneration] = useState(0);
-
-  useEffect(() => {
-    if (slotGrid !== null) {
-      setSlotGridGeneration(
-        parseInt(slotGrid.getAttribute("data-generation")!)
-      );
-
-      const observer = new MutationObserver((mutations) => {
-        if (mutations.some((m) => m.type === "attributes")) {
-          setSlotGridGeneration(
-            parseInt(slotGrid.getAttribute("data-generation")!)
-          );
-        }
-      });
-
-      observer.observe(slotGrid, { attributes: true });
-      return () => observer.disconnect();
-    }
-  }, [slotGrid, setSlotGridGeneration]);
-
-  const [gridRef1, gridBounds] = useMeasure();
-  const gridRef2 = useRef<HTMLDivElement | null>(null);
-  const gridRef = useMergedRefs(gridRef1, gridRef2);
-
-  const slotRects = useMemo(() => {
-    if (slotGrid === null) return [];
-
-    const slots = slotGrid.getElementsByClassName(styles.slot);
-    const rects = new Array<Rect>(slots.length);
-    for (let i = 0; i < slots.length; i++) {
-      const slot = slots[i] as HTMLElement;
-      rects[i] = {
-        x: slot.offsetLeft,
-        y: slot.offsetTop,
-        width: slot.offsetWidth,
-        height: slot.offsetHeight,
-      };
-    }
-
-    return rects;
-    // The rects may change due to the grid being resized or rerendered, but
-    // eslint can't statically verify this
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [slotGrid, slotGridGeneration, gridBounds]);
-
-  const [columns] = useReactiveState<number | null>(
-    // Since grid resizing isn't implemented yet, pick a column count on mount
-    // and stick to it
-    (prevColumns) =>
-      prevColumns !== undefined && prevColumns !== null
-        ? prevColumns
-        : // The grid bounds might not be known yet
-        gridBounds.width === 0
-        ? null
-        : Math.max(2, Math.floor(gridBounds.width * 0.0045)),
-    [gridBounds]
-  );
-
-  const [grid, setGrid] = useGridState(columns, items);
-
-  const [tiles] = useReactiveState<Tile[]>(
-    (prevTiles) => {
-      // If React hasn't yet rendered the current generation of the grid, skip
-      // the update, because grid and slotRects will be out of sync
-      if (slotGridGeneration !== grid?.generation) return prevTiles ?? [];
-
-      const tileCells = grid.cells.filter((c) => c?.origin) as Cell[];
-      const tileRects = new Map<TileDescriptor, Rect>(
-        zipWith(tileCells, slotRects, (cell, rect) => [cell.item, rect])
-      );
-      return items.map((item) => ({ ...tileRects.get(item)!, item }));
-    },
-    [slotRects, grid, slotGridGeneration]
-  );
-
-  // Drag state is stored in a ref rather than component state, because we use
-  // react-spring's imperative API during gestures to improve responsiveness
-  const dragState = useRef<DragState | null>(null);
-
-  const [tileTransitions, springRef] = useTransition(
-    tiles,
-    () => ({
-      key: ({ item }: Tile) => item.id,
-      from: ({ x, y, width, height }: Tile) => ({
-        opacity: 0,
-        scale: 0,
-        shadow: 1,
-        zIndex: 1,
-        x,
-        y,
-        width,
-        height,
-        immediate: disableAnimations,
-      }),
-      enter: { opacity: 1, scale: 1, immediate: disableAnimations },
-      update: ({ item, x, y, width, height }: Tile) =>
-        item.id === dragState.current?.tileId
-          ? {}
-          : {
-              x,
-              y,
-              width,
-              height,
-              immediate: disableAnimations,
-            },
-      leave: { opacity: 0, scale: 0, immediate: disableAnimations },
-      config: { mass: 0.7, tension: 252, friction: 25 },
-    }),
-    [tiles, disableAnimations]
-    // react-spring's types are bugged and can't infer the spring type
-  ) as unknown as [TransitionFn<Tile, TileSpring>, SpringRef<TileSpring>];
-
-  const animateDraggedTile = (endOfGesture: boolean) => {
-    const { tileId, tileX, tileY, cursorX, cursorY } = dragState.current!;
-    const tile = tiles.find((t) => t.item.id === tileId)!;
-
-    springRef.start((_i, controller) => {
-      if ((controller.item as Tile).item.id === tileId) {
-        if (endOfGesture) {
-          return {
-            scale: 1,
-            zIndex: 1,
-            shadow: 1,
-            x: tile.x,
-            y: tile.y,
-            width: tile.width,
-            height: tile.height,
-            immediate: disableAnimations || ((key) => key === "zIndex"),
-            // Allow the tile's position to settle before pushing its
-            // z-index back down
-            delay: (key) => (key === "zIndex" ? 500 : 0),
-          };
-        } else {
-          return {
-            scale: 1.1,
-            zIndex: 2,
-            shadow: 15,
-            x: tileX,
-            y: tileY,
-            immediate:
-              disableAnimations ||
-              ((key) => key === "zIndex" || key === "x" || key === "y"),
-          };
-        }
-      } else {
-        return {};
-      }
-    });
-
-    const overTile = tiles.find(
-      (t) =>
-        cursorX >= t.x &&
-        cursorX < t.x + t.width &&
-        cursorY >= t.y &&
-        cursorY < t.y + t.height
-    );
-    if (overTile !== undefined && overTile.item.id !== tileId) {
-      setGrid((g) => ({
-        ...g!,
-        cells: g!.cells.map((c) => {
-          if (c?.item === overTile.item) return { ...c, item: tile.item };
-          if (c?.item === tile.item) return { ...c, item: overTile.item };
-          return c;
-        }),
-      }));
-    }
-  };
-
-  // Callback for useDrag. We could call useDrag here, but the default
-  // pattern of spreading {...bind()} across the children to bind the gesture
-  // ends up breaking memoization and ruining this component's performance.
-  // Instead, we pass this callback to each tile via a ref, to let them bind the
-  // gesture using the much more sensible ref-based method.
-  const onTileDrag = (
-    tileId: string,
-    {
-      tap,
-      initial: [initialX, initialY],
-      delta: [dx, dy],
-      last,
-    }: Parameters<Handler<"drag", EventTypes["drag"]>>[0]
-  ) => {
-    if (tap) {
-      setGrid((g) => cycleTileSize(tileId, g!));
-    } else {
-      const tileSpring = springRef.current
-        .find((c) => (c.item as Tile).item.id === tileId)!
-        .get();
-
-      if (dragState.current === null) {
-        dragState.current = {
-          tileId,
-          tileX: tileSpring.x,
-          tileY: tileSpring.y,
-          cursorX: initialX - gridBounds.x,
-          cursorY: initialY - gridBounds.y + scrollOffset.current,
-        };
-      }
-      dragState.current.tileX += dx;
-      dragState.current.tileY += dy;
-      dragState.current.cursorX += dx;
-      dragState.current.cursorY += dy;
-
-      animateDraggedTile(last);
-
-      if (last) dragState.current = null;
-    }
-  };
-
-  const onTileDragRef = useRef(onTileDrag);
-  onTileDragRef.current = onTileDrag;
-
-  const scrollOffset = useRef(0);
-
-  useScroll(
-    ({ xy: [, y], delta: [, dy] }) => {
-      scrollOffset.current = y;
-
-      if (dragState.current !== null) {
-        dragState.current.tileY += dy;
-        dragState.current.cursorY += dy;
-        animateDraggedTile(false);
-      }
-    },
-    { target: gridRef2 }
-  );
-
-  const slotGridStyle = useMemo(() => {
-    if (grid === null) return {};
-
-    const areas = new Array<(number | null)[]>(
-      Math.ceil(grid.cells.length / grid.columns)
-    );
-    for (let i = 0; i < areas.length; i++)
-      areas[i] = new Array<number | null>(grid.columns).fill(null);
-
-    let slotId = 0;
-    for (let i = 0; i < grid.cells.length; i++) {
-      const cell = grid.cells[i];
-      if (cell?.origin) {
-        const slotEnd = i + cell.columns - 1 + grid.columns * (cell.rows - 1);
-        forEachCellInArea(
-          i,
-          slotEnd,
-          grid,
-          (_c, j) => (areas[row(j, grid)][column(j, grid)] = slotId)
-        );
-        slotId++;
-      }
-    }
-
-    return {
-      gridTemplateAreas: areas
-        .map(
-          (row) =>
-            `'${row
-              .map((slotId) => (slotId === null ? "." : `s${slotId}`))
-              .join(" ")}'`
-        )
-        .join(" "),
-      gridTemplateColumns: `repeat(${columns}, 1fr)`,
-    };
-  }, [grid, columns]);
-
-  const slots = useMemo(() => {
-    const slots = new Array<ReactNode>(items.length);
-    for (let i = 0; i < items.length; i++)
-      slots[i] = (
-        <div className={styles.slot} key={i} style={{ gridArea: `s${i}` }} />
-      );
-    return slots;
-  }, [items.length]);
-
-  // Render nothing if the grid has yet to be generated
-  if (grid === null) {
-    return <div ref={gridRef} className={styles.grid} />;
-  }
-
-  return (
-    <div ref={gridRef} className={styles.grid}>
-      <div
-        style={slotGridStyle}
-        ref={setSlotGrid}
-        className={styles.slotGrid}
-        data-generation={grid.generation}
-      >
-        {slots}
-      </div>
-      {tileTransitions((style, tile) =>
-        children({
-          ...style,
-          key: tile.item.id,
-          targetWidth: tile.width,
-          targetHeight: tile.height,
-          item: tile.item,
-          onDragRef: onTileDragRef,
-        })
-      )}
-    </div>
-  );
-};
--- a/src/video-grid/VideoGrid.module.css
+++ b/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);
 }
--- a/src/video-grid/VideoGrid.tsx
+++ b/src/video-grid/VideoGrid.tsx
@@ -16,12 +16,7 @@ limitations under the License.

 import React, { Key, useCallback, useEffect, useRef, useState } from "react";
 import { FullGestureState, useDrag, useGesture } from "@use-gesture/react";
-import {
-  SpringRef,
-  SpringValue,
-  SpringValues,
-  useSprings,
-} from "@react-spring/web";
+import { Interpolation, SpringValue, useSprings } from "@react-spring/web";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { ReactDOMAttributes } from "@use-gesture/react/dist/declarations/src/types";
@@ -47,17 +42,6 @@ interface Tile {
  presenter: boolean;
 }

-export interface TileSpring {
-  opacity: number;
-  scale: number;
-  shadow: number;
-  zIndex: number;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
 type LayoutDirection = "vertical" | "horizontal";

 export function useVideoGridLayout(hasScreenshareFeeds: boolean): {
@@ -708,23 +692,20 @@ interface DragTileData {
  y: number;
 }

-export interface ChildrenProperties extends ReactDOMAttributes {
+interface ChildrenProperties extends ReactDOMAttributes {
  key: Key;
-  targetWidth: number;
-  targetHeight: number;
+  style: {
+    scale: SpringValue<number>;
+    opacity: SpringValue<number>;
+    boxShadow: Interpolation<number, string>;
+  };
+  width: number;
+  height: number;
  item: TileDescriptor;
-  opacity: SpringValue<number>;
-  scale: SpringValue<number>;
-  shadow: SpringValue<number>;
-  zIndex: SpringValue<number>;
-  x: SpringValue<number>;
-  y: SpringValue<number>;
-  width: SpringValue<number>;
-  height: SpringValue<number>;
  [index: string]: unknown;
 }

-export interface VideoGridProps {
+interface VideoGridProps {
  items: TileDescriptor[];
  layout: Layout;
  disableAnimations?: boolean;
@@ -915,7 +896,6 @@ export function VideoGrid({
              shadow: 0,
              scale: 0,
              opacity: 0,
-              zIndex: 0,
            },
            reset: false,
          };
@@ -939,7 +919,6 @@ export function VideoGrid({
            shadow: number;
            scale: number;
            opacity: number;
-            zIndex?: number;
            x?: number;
            y?: number;
            width?: number;
@@ -986,8 +965,7 @@ export function VideoGrid({
    tilePositions,
    tiles,
    scrollPosition,
-    // react-spring's types are bugged and can't infer the spring type
-  ]) as unknown as [SpringValues<TileSpring>[], SpringRef<TileSpring>];
+  ]);

  const onTap = useCallback(
    (tileKey: Key) => {
@@ -1197,16 +1175,21 @@ export function VideoGrid({

  return (
    <div className={styles.videoGrid} ref={gridRef} {...bindGrid()}>
-      {springs.map((style, i) => {
+      {springs.map(({ shadow, ...style }, i) => {
        const tile = tiles[i];
        const tilePosition = tilePositions[tile.order];

        return children({
          ...bindTile(tile.key),
-          ...style,
-          key: tile.item.id,
-          targetWidth: tilePosition.width,
-          targetHeight: tilePosition.height,
+          key: tile.key,
+          style: {
+            boxShadow: shadow.to(
+              (s) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px 0px`
+            ),
+            ...style,
+          },
+          width: tilePosition.width,
+          height: tilePosition.height,
          item: tile.item,
        });
      })}
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -16,13 +16,11 @@ limitations under the License.

 .videoTile {
  position: absolute;
-  contain: strict;
-  top: 0;
-  width: var(--tileWidth);
-  height: var(--tileHeight);
-  border-radius: 8px;
+  will-change: transform, width, height, opacity, box-shadow;
+  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
+  touch-action: none;

  /* HACK: This has no visual effect due to the short duration, but allows the
  JS to detect movement via the transform property for audio spatialization */
@@ -30,6 +28,9 @@ limitations under the License.
 }

 .videoTile * {
+  touch-action: none;
+  -moz-user-select: none;
+  -webkit-user-drag: none;
  user-select: none;
 }

@@ -142,6 +143,13 @@ limitations under the License.
  white-space: nowrap;
 }

+.videoMutedAvatar {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .videoMutedOverlay {
  width: 100%;
  height: 100%;
@@ -171,9 +179,3 @@ limitations under the License.
  max-width: 360px;
  border-radius: 20px;
 }
-
-@media (min-width: 800px) {
-  .videoTile {
-    border-radius: 20px;
-  }
-}
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, { ForwardedRef, forwardRef } from "react";
-import { animated, SpringValue } from "@react-spring/web";
+import React, { forwardRef } from "react";
+import { animated } from "@react-spring/web";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";

@@ -36,7 +36,6 @@ interface Props {
  mediaRef?: React.RefObject<MediaElement>;
  onOptionsPress?: () => void;
  localVolume?: number;
-  hasAudio?: boolean;
  maximised?: boolean;
  fullscreen?: boolean;
  onFullscreen?: () => void;
@@ -44,17 +43,9 @@ interface Props {
  showOptions?: boolean;
  isLocal?: boolean;
  disableSpeakingIndicator?: boolean;
-  opacity?: SpringValue<number>;
-  scale?: SpringValue<number>;
-  shadow?: SpringValue<number>;
-  zIndex?: SpringValue<number>;
-  x?: SpringValue<number>;
-  y?: SpringValue<number>;
-  width?: SpringValue<number>;
-  height?: SpringValue<number>;
 }

-export const VideoTile = forwardRef<HTMLElement, Props>(
+export const VideoTile = forwardRef<HTMLDivElement, Props>(
  (
    {
      name,
@@ -67,7 +58,6 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
      mediaRef,
      onOptionsPress,
      localVolume,
-      hasAudio,
      maximised,
      fullscreen,
      onFullscreen,
@@ -76,14 +66,6 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
      isLocal,
      // TODO: disableSpeakingIndicator is not used atm.
      disableSpeakingIndicator,
-      opacity,
-      scale,
-      shadow,
-      zIndex,
-      x,
-      y,
-      width,
-      height,
      ...rest
    },
    ref
@@ -92,16 +74,14 @@ export const VideoTile = forwardRef<HTMLElement, Props>(

    const toolbarButtons: JSX.Element[] = [];
    if (connectionState == ConnectionState.Connected && !isLocal) {
-      if (hasAudio) {
-        toolbarButtons.push(
-          <AudioButton
-            key="localVolume"
-            className={styles.button}
-            volume={localVolume}
-            onPress={onOptionsPress}
-          />
-        );
-      }
+      toolbarButtons.push(
+        <AudioButton
+          key="localVolume"
+          className={styles.button}
+          volume={localVolume}
+          onPress={onOptionsPress}
+        />
+      );

      if (screenshare) {
        toolbarButtons.push(
@@ -138,22 +118,7 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
          [styles.screenshare]: screenshare,
          [styles.maximised]: maximised,
        })}
-        style={{
-          opacity,
-          scale,
-          boxShadow: shadow?.to(
-            (s) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px 0px`
-          ),
-          zIndex,
-          x,
-          y,
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore React does in fact support assigning custom properties,
-          // but React's types say no
-          "--tileWidth": width?.to((w) => `${w}px`),
-          "--tileHeight": height?.to((h) => `${h}px`),
-        }}
-        ref={ref as ForwardedRef<HTMLDivElement>}
+        ref={ref}
        {...rest}
      >
        {toolbarButtons.length > 0 && !maximised && (
@@ -172,13 +137,7 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
            </div>
          ) : (
            <div className={classNames(styles.infoBubble, styles.memberName)}>
-              {
-                /* If the user is speaking, it's safe to say they're unmuted.
-                Mute state is currently sent over to-device messages, which
-                aren't quite real-time, so this is an important kludge to make
-                sure no one appears muted when they've clearly begun talking. */
-                audioMuted && !videoMuted && !speaking && <MicMutedIcon />
-              }
+              {audioMuted && !videoMuted && <MicMutedIcon />}
              {videoMuted && <VideoMutedIcon />}
              <span title={caption}>{caption}</span>
            </div>
--- a/src/video-grid/VideoTileContainer.tsx
+++ b/src/video-grid/VideoTileContainer.tsx
@@ -15,11 +15,9 @@ limitations under the License.
 */

 import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
-import React, { FC, memo, RefObject } from "react";
+import React from "react";
 import { useCallback } from "react";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { SpringValue } from "@react-spring/web";
-import { EventTypes, Handler, useDrag } from "@use-gesture/react";

 import { useCallFeed } from "./useCallFeed";
 import { useSpatialMediaStream } from "./useMediaStream";
@@ -31,8 +29,8 @@ import { TileDescriptor } from "./TileDescriptor";

 interface Props {
  item: TileDescriptor;
-  targetWidth: number;
-  targetHeight: number;
+  width?: number;
+  height?: number;
  getAvatar: (
    roomMember: RoomMember,
    width: number,
@@ -44,113 +42,84 @@ interface Props {
  maximised: boolean;
  fullscreen: boolean;
  onFullscreen: (item: TileDescriptor) => void;
-  opacity?: SpringValue<number>;
-  scale?: SpringValue<number>;
-  shadow?: SpringValue<number>;
-  zIndex?: SpringValue<number>;
-  x?: SpringValue<number>;
-  y?: SpringValue<number>;
-  width?: SpringValue<number>;
-  height?: SpringValue<number>;
-  onDragRef?: RefObject<
-    (
-      tileId: string,
-      state: Parameters<Handler<"drag", EventTypes["drag"]>>[0]
-    ) => void
-  >;
 }

-export const VideoTileContainer: FC<Props> = memo(
-  ({
-    item,
-    targetWidth,
-    targetHeight,
-    getAvatar,
+export function VideoTileContainer({
+  item,
+  width,
+  height,
+  getAvatar,
+  audioContext,
+  audioDestination,
+  disableSpeakingIndicator,
+  maximised,
+  fullscreen,
+  onFullscreen,
+  ...rest
+}: Props) {
+  const {
+    isLocal,
+    audioMuted,
+    videoMuted,
+    localVolume,
+    speaking,
+    stream,
+    purpose,
+  } = useCallFeed(item.callFeed);
+  const { rawDisplayName } = useRoomMemberName(item.member);
+  const [tileRef, mediaRef] = useSpatialMediaStream(
+    stream ?? null,
    audioContext,
    audioDestination,
-    disableSpeakingIndicator,
-    maximised,
-    fullscreen,
-    onFullscreen,
-    onDragRef,
-    ...rest
-  }) => {
-    const {
-      isLocal,
-      audioMuted,
-      videoMuted,
-      localVolume,
-      hasAudio,
-      speaking,
-      stream,
-      purpose,
-    } = useCallFeed(item.callFeed);
-    const { rawDisplayName } = useRoomMemberName(item.member);
+    localVolume,
+    // The feed is muted if it's local audio (because we don't want our own audio,
+    // but it's a hook and we can't call it conditionally so we're stuck with it)
+    // or if there's a maximised feed in which case we always render audio via audio
+    // elements because we wire it up at the video tile container level and only one
+    // video tile container is displayed.
+    isLocal || maximised
+  );
+  const {
+    modalState: videoTileSettingsModalState,
+    modalProps: videoTileSettingsModalProps,
+  } = useModalTriggerState();
+  const onOptionsPress = () => {
+    videoTileSettingsModalState.open();
+  };

-    const [tileRef, mediaRef] = useSpatialMediaStream(
-      stream ?? null,
-      audioContext,
-      audioDestination,
-      localVolume,
-      // The feed is muted if it's local audio (because we don't want our own audio,
-      // but it's a hook and we can't call it conditionally so we're stuck with it)
-      // or if there's a maximised feed in which case we always render audio via audio
-      // elements because we wire it up at the video tile container level and only one
-      // video tile container is displayed.
-      isLocal || maximised
-    );
+  const onFullscreenCallback = useCallback(() => {
+    onFullscreen(item);
+  }, [onFullscreen, item]);

-    useDrag((state) => onDragRef?.current!(item.id, state), {
-      target: tileRef,
-      filterTaps: true,
-      preventScroll: true,
-    });
+  // Firefox doesn't respect the disablePictureInPicture attribute
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1611831

-    const {
-      modalState: videoTileSettingsModalState,
-      modalProps: videoTileSettingsModalProps,
-    } = useModalTriggerState();
-    const onOptionsPress = () => {
-      videoTileSettingsModalState.open();
-    };
-
-    const onFullscreenCallback = useCallback(() => {
-      onFullscreen(item);
-    }, [onFullscreen, item]);
-
-    // Firefox doesn't respect the disablePictureInPicture attribute
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1611831
-
-    return (
-      <>
-        <VideoTile
-          isLocal={isLocal}
-          speaking={speaking && !disableSpeakingIndicator}
-          audioMuted={audioMuted}
-          videoMuted={videoMuted}
-          screenshare={purpose === SDPStreamMetadataPurpose.Screenshare}
-          name={rawDisplayName}
-          connectionState={item.connectionState}
-          ref={tileRef}
-          mediaRef={mediaRef}
-          avatar={
-            getAvatar && getAvatar(item.member, targetWidth, targetHeight)
-          }
-          onOptionsPress={onOptionsPress}
-          localVolume={localVolume}
-          hasAudio={hasAudio}
-          maximised={maximised}
-          fullscreen={fullscreen}
-          onFullscreen={onFullscreenCallback}
-          {...rest}
+  return (
+    <>
+      <VideoTile
+        isLocal={isLocal}
+        speaking={speaking && !disableSpeakingIndicator}
+        audioMuted={audioMuted}
+        videoMuted={videoMuted}
+        screenshare={purpose === SDPStreamMetadataPurpose.Screenshare}
+        name={rawDisplayName}
+        connectionState={item.connectionState}
+        ref={tileRef}
+        mediaRef={mediaRef}
+        avatar={getAvatar && getAvatar(item.member, width, height)}
+        onOptionsPress={onOptionsPress}
+        localVolume={localVolume}
+        maximised={maximised}
+        fullscreen={fullscreen}
+        onFullscreen={onFullscreenCallback}
+        {...rest}
+      />
+      {videoTileSettingsModalState.isOpen && !maximised && item.callFeed && (
+        <VideoTileSettingsModal
+          {...videoTileSettingsModalProps}
+          feed={item.callFeed}
        />
-        {videoTileSettingsModalState.isOpen && !maximised && item.callFeed && (
-          <VideoTileSettingsModal
-            {...videoTileSettingsModalProps}
-            feed={item.callFeed}
-          />
-        )}
-      </>
-    );
-  }
-);
+      )}
+    </>
+  );
+}
--- a/src/video-grid/model.ts
+++ b/src/video-grid/model.ts
@@ -1,416 +0,0 @@
-/*
-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 TinyQueue from "tinyqueue";
-
-import { TileDescriptor } from "./TileDescriptor";
-
-/**
- * A 1×1 cell in a grid which belongs to a tile.
- */
-export interface Cell {
-  /**
-   * The item displayed on the tile.
-   */
-  item: TileDescriptor;
-  /**
-   * Whether this cell is the origin (top left corner) of the tile.
-   */
-  origin: boolean;
-  /**
-   * The width, in columns, of the tile.
-   */
-  columns: number;
-  /**
-   * The height, in rows, of the tile.
-   */
-  rows: number;
-}
-
-export interface Grid {
-  columns: number;
-  /**
-   * The cells of the grid, in left-to-right top-to-bottom order.
-   * undefined = empty.
-   */
-  cells: (Cell | undefined)[];
-}
-
-/**
- * Gets the paths that tiles should travel along in the grid to reach a
- * particular destination.
- * @param dest The destination index.
- * @param g The grid.
- * @returns An array in which each cell holds the index of the next cell to move
- *   to to reach the destination, or null if it is the destination.
- */
-export function getPaths(dest: number, g: Grid): (number | null)[] {
-  const destRow = row(dest, g);
-  const destColumn = column(dest, g);
-
-  // This is Dijkstra's algorithm
-
-  const distances = new Array<number>(dest + 1).fill(Infinity);
-  distances[dest] = 0;
-  const edges = new Array<number | null | undefined>(dest).fill(undefined);
-  edges[dest] = null;
-  const heap = new TinyQueue([dest], (i) => distances[i]);
-
-  const visit = (curr: number, via: number) => {
-    const viaCell = g.cells[via];
-    const viaLargeTile =
-      viaCell !== undefined && (viaCell.rows > 1 || viaCell.columns > 1);
-    // Since it looks nicer to have paths go around large tiles, we impose an
-    // increased cost for moving through them
-    const distanceVia = distances[via] + (viaLargeTile ? 8 : 1);
-
-    if (distanceVia < distances[curr]) {
-      distances[curr] = distanceVia;
-      edges[curr] = via;
-      heap.push(curr);
-    }
-  };
-
-  while (heap.length > 0) {
-    const via = heap.pop()!;
-    const viaRow = row(via, g);
-    const viaColumn = column(via, g);
-
-    // Visit each neighbor
-    if (viaRow > 0) visit(via - g.columns, via);
-    if (viaColumn > 0) visit(via - 1, via);
-    if (viaColumn < (viaRow === destRow ? destColumn : g.columns - 1))
-      visit(via + 1, via);
-    if (
-      viaRow < destRow - 1 ||
-      (viaRow === destRow - 1 && viaColumn <= destColumn)
-    )
-      visit(via + g.columns, via);
-  }
-
-  // The heap is empty, so we've generated all paths
-  return edges as (number | null)[];
-}
-
-function findLastIndex<T>(
-  array: T[],
-  predicate: (item: T) => boolean
-): number | null {
-  for (let i = array.length - 1; i >= 0; i--) {
-    if (predicate(array[i])) return i;
-  }
-
-  return null;
-}
-
-const findLast1By1Index = (g: Grid): number | null =>
-  findLastIndex(g.cells, (c) => c?.rows === 1 && c?.columns === 1);
-
-export function row(index: number, g: Grid): number {
-  return Math.floor(index / g.columns);
-}
-
-export function column(index: number, g: Grid): number {
-  return ((index % g.columns) + g.columns) % g.columns;
-}
-
-function inArea(index: number, start: number, end: number, g: Grid): boolean {
-  const indexColumn = column(index, g);
-  const indexRow = row(index, g);
-  return (
-    indexRow >= row(start, g) &&
-    indexRow <= row(end, g) &&
-    indexColumn >= column(start, g) &&
-    indexColumn <= column(end, g)
-  );
-}
-
-function* cellsInArea(
-  start: number,
-  end: number,
-  g: Grid
-): Generator<number, void, unknown> {
-  const startColumn = column(start, g);
-  const endColumn = column(end, g);
-  for (
-    let i = start;
-    i <= end;
-    i =
-      column(i, g) === endColumn
-        ? i + g.columns + startColumn - endColumn
-        : i + 1
-  )
-    yield i;
-}
-
-export function forEachCellInArea(
-  start: number,
-  end: number,
-  g: Grid,
-  fn: (c: Cell | undefined, i: number) => void
-): void {
-  for (const i of cellsInArea(start, end, g)) fn(g.cells[i], i);
-}
-
-function allCellsInArea(
-  start: number,
-  end: number,
-  g: Grid,
-  fn: (c: Cell | undefined, i: number) => boolean
-): boolean {
-  for (const i of cellsInArea(start, end, g)) {
-    if (!fn(g.cells[i], i)) return false;
-  }
-
-  return true;
-}
-
-const areaEnd = (
-  start: number,
-  columns: number,
-  rows: number,
-  g: Grid
-): number => start + columns - 1 + g.columns * (rows - 1);
-
-/**
- * Gets the index of the next gap in the grid that should be backfilled by 1×1
- * tiles.
- */
-function getNextGap(g: Grid): number | null {
-  const last1By1Index = findLast1By1Index(g);
-  if (last1By1Index === null) return null;
-
-  for (let i = 0; i < last1By1Index; i++) {
-    // To make the backfilling process look natural when there are multiple
-    // gaps, we actually scan each row from right to left
-    const j =
-      (row(i, g) === row(last1By1Index, g)
-        ? last1By1Index
-        : (row(i, g) + 1) * g.columns) -
-      1 -
-      column(i, g);
-
-    if (g.cells[j] === undefined) return j;
-  }
-
-  return null;
-}
-
-/**
- * Backfill any gaps in the grid.
- */
-export function fillGaps(g: Grid): Grid {
-  const result: Grid = { ...g, cells: [...g.cells] };
-  let gap = getNextGap(result);
-
-  if (gap !== null) {
-    const pathsToEnd = getPaths(findLast1By1Index(result)!, result);
-
-    do {
-      let filled = false;
-      let to = gap;
-      let from = pathsToEnd[gap];
-
-      // First, attempt to fill the gap by moving 1×1 tiles backwards from the
-      // end of the grid along a set path
-      while (from !== null) {
-        const toCell = result.cells[to];
-        const fromCell = result.cells[from];
-
-        // Skip over slots that are already full
-        if (toCell !== undefined) {
-          to = pathsToEnd[to]!;
-          // Skip over large tiles. Also, we might run into gaps along the path
-          // created during the filling of previous gaps. Skip over those too;
-          // they'll be picked up on the next iteration of the outer loop.
-        } else if (
-          fromCell === undefined ||
-          fromCell.rows > 1 ||
-          fromCell.columns > 1
-        ) {
-          from = pathsToEnd[from];
-        } else {
-          result.cells[to] = result.cells[from];
-          result.cells[from] = undefined;
-          filled = true;
-          to = pathsToEnd[to]!;
-          from = pathsToEnd[from];
-        }
-      }
-
-      // In case the path approach failed, fall back to taking the very last 1×1
-      // tile, and just dropping it into place
-      if (!filled) {
-        const last1By1Index = findLast1By1Index(result)!;
-        result.cells[gap] = result.cells[last1By1Index];
-        result.cells[last1By1Index] = undefined;
-      }
-
-      gap = getNextGap(result);
-    } while (gap !== null);
-  }
-
-  // TODO: If there are any large tiles on the last row, shuffle them back
-  // upwards into a full row
-
-  // Shrink the array to remove trailing gaps
-  const finalLength =
-    (findLastIndex(result.cells, (c) => c !== undefined) ?? -1) + 1;
-  if (finalLength < result.cells.length)
-    result.cells = result.cells.slice(0, finalLength);
-
-  return result;
-}
-
-export function appendItems(items: TileDescriptor[], g: Grid): Grid {
-  return {
-    ...g,
-    cells: [
-      ...g.cells,
-      ...items.map((i) => ({
-        item: i,
-        origin: true,
-        columns: 1,
-        rows: 1,
-      })),
-    ],
-  };
-}
-
-/**
- * Changes the size of a tile, rearranging the grid to make space.
- * @param tileId The ID of the tile to modify.
- * @param g The grid.
- * @returns The updated grid.
- */
-export function cycleTileSize(tileId: string, g: Grid): Grid {
-  const from = g.cells.findIndex((c) => c?.item.id === tileId);
-  if (from === -1) return g; // Tile removed, no change
-  const fromWidth = g.cells[from]!.columns;
-  const fromHeight = g.cells[from]!.rows;
-  const fromEnd = areaEnd(from, fromWidth, fromHeight, g);
-
-  // The target dimensions, which toggle between 1×1 and larger than 1×1
-  const [toWidth, toHeight] =
-    fromWidth === 1 && fromHeight === 1
-      ? [Math.min(3, Math.max(2, g.columns - 1)), 2]
-      : [1, 1];
-
-  // If we're expanding the tile, we want to create enough new rows at the
-  // tile's target position such that every new unit of grid area created during
-  // the expansion can fit within the new rows.
-  // We do it this way, since it's easier to backfill gaps in the grid than it
-  // is to push colliding tiles outwards.
-  const newRows = Math.max(
-    0,
-    Math.ceil((toWidth * toHeight - fromWidth * fromHeight) / g.columns)
-  );
-
-  // This is the grid with the new rows added
-  const gappyGrid: Grid = {
-    ...g,
-    cells: new Array(g.cells.length + newRows * g.columns),
-  };
-
-  // The next task is to scan for a spot to place the modified tile. Since we
-  // might be creating new rows at the target position, this spot can be shorter
-  // than the target height.
-  const candidateWidth = toWidth;
-  const candidateHeight = toHeight - newRows;
-
-  // To make the tile appear to expand outwards from its center, we're actually
-  // scanning for locations to put the *center* of the tile. These numbers are
-  // the offsets between the tile's origin and its center.
-  const scanColumnOffset = Math.floor((toWidth - 1) / 2);
-  const scanRowOffset = Math.floor((toHeight - 1) / 2);
-
-  const nextScanLocations = new Set<number>([from]);
-  const rows = row(g.cells.length - 1, g) + 1;
-  let to: number | null = null;
-
-  // The contents of a given cell are 'displaceable' if it's empty, holds a 1×1
-  // tile, or is part of the original tile we're trying to reposition
-  const displaceable = (c: Cell | undefined, i: number): boolean =>
-    c === undefined ||
-    (c.columns === 1 && c.rows === 1) ||
-    inArea(i, from, fromEnd, g);
-
-  // Do the scanning
-  for (const scanLocation of nextScanLocations) {
-    const start = scanLocation - scanColumnOffset - g.columns * scanRowOffset;
-    const end = areaEnd(start, candidateWidth, candidateHeight, g);
-    const startColumn = column(start, g);
-    const startRow = row(start, g);
-    const endColumn = column(end, g);
-    const endRow = row(end, g);
-
-    if (
-      start >= 0 &&
-      endColumn - startColumn + 1 === candidateWidth &&
-      allCellsInArea(start, end, g, displaceable)
-    ) {
-      // This location works!
-      to = start;
-      break;
-    }
-
-    // Scan outwards in all directions
-    if (startColumn > 0) nextScanLocations.add(scanLocation - 1);
-    if (endColumn < g.columns - 1) nextScanLocations.add(scanLocation + 1);
-    if (startRow > 0) nextScanLocations.add(scanLocation - g.columns);
-    if (endRow < rows - 1) nextScanLocations.add(scanLocation + g.columns);
-  }
-
-  // If there is no space in the grid, give up
-  if (to === null) return g;
-
-  const toRow = row(to, g);
-
-  // Copy tiles from the original grid to the new one, with the new rows
-  // inserted at the target location
-  g.cells.forEach((c, src) => {
-    if (c?.origin && c.item.id !== tileId) {
-      const offset =
-        row(src, g) > toRow + candidateHeight - 1 ? g.columns * newRows : 0;
-      forEachCellInArea(src, areaEnd(src, c.columns, c.rows, g), g, (c, i) => {
-        gappyGrid.cells[i + offset] = c;
-      });
-    }
-  });
-
-  // Place the tile in its target position, making a note of the tiles being
-  // overwritten
-  const displacedTiles: Cell[] = [];
-  const toEnd = areaEnd(to, toWidth, toHeight, g);
-  forEachCellInArea(to, toEnd, gappyGrid, (c, i) => {
-    if (c !== undefined) displacedTiles.push(c);
-    gappyGrid.cells[i] = {
-      item: g.cells[from]!.item,
-      origin: i === to,
-      columns: toWidth,
-      rows: toHeight,
-    };
-  });
-
-  // Place the displaced tiles in the remaining space
-  for (let i = 0; displacedTiles.length > 0; i++) {
-    if (gappyGrid.cells[i] === undefined)
-      gappyGrid.cells[i] = displacedTiles.shift();
-  }
-
-  // Fill any gaps that remain
-  return fillGaps(gappyGrid);
-}
--- a/src/video-grid/useCallFeed.ts
+++ b/src/video-grid/useCallFeed.ts
@@ -25,7 +25,6 @@ interface CallFeedState {
  videoMuted: boolean;
  audioMuted: boolean;
  localVolume: number;
-  hasAudio: boolean;
  disposed: boolean | undefined;
  stream: MediaStream | undefined;
  purpose: SDPStreamMetadataPurpose | undefined;
@@ -39,7 +38,6 @@ function getCallFeedState(callFeed: CallFeed | undefined): CallFeedState {
    videoMuted: callFeed ? callFeed.isVideoMuted() : true,
    audioMuted: callFeed ? callFeed.isAudioMuted() : true,
    localVolume: callFeed ? callFeed.getLocalVolume() : 0,
-    hasAudio: callFeed ? callFeed.stream.getAudioTracks().length >= 1 : false,
    disposed: callFeed ? callFeed.disposed : undefined,
    stream: callFeed ? callFeed.stream : undefined,
    purpose: callFeed ? callFeed.purpose : undefined,
--- a/src/video-grid/useMediaStream.ts
+++ b/src/video-grid/useMediaStream.ts
@@ -158,8 +158,8 @@ export const useSpatialMediaStream = (
  audioDestination: AudioNode,
  localVolume: number,
  mute = false
-): [RefObject<HTMLElement>, RefObject<MediaElement>] => {
-  const tileRef = useRef<HTMLElement | null>(null);
+): [RefObject<HTMLDivElement>, RefObject<MediaElement>] => {
+  const tileRef = useRef<HTMLDivElement | null>(null);
  const [spatialAudio] = useSpatialAudio();

  // This media stream is only used for the video - the audio goes via the audio
--- a/src/widget.ts
+++ b/src/widget.ts
@@ -101,7 +101,7 @@ export const widget: WidgetHelpers | null = (() => {
      // We need to do this now rather than later because it has capabilities to
      // request, and is responsible for starting the transport (should it be?)

-      const { roomId, userId, deviceId, baseUrl, e2eEnabled } = getUrlParams();
+      const { roomId, userId, deviceId, baseUrl } = getUrlParams();
      if (!roomId) throw new Error("Room ID must be supplied");
      if (!userId) throw new Error("User ID must be supplied");
      if (!deviceId) throw new Error("Device ID must be supplied");
@@ -147,7 +147,6 @@ export const widget: WidgetHelpers | null = (() => {
          userId,
          deviceId,
          timelineSupport: true,
-          useE2eForGroupCall: e2eEnabled,
        }
      );
      const clientPromise = client.startClient().then(() => client);
--- a/test/video-grid/model-test.ts
+++ b/test/video-grid/model-test.ts
@@ -1,283 +0,0 @@
-/*
-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 {
-  appendItems,
-  column,
-  cycleTileSize,
-  fillGaps,
-  forEachCellInArea,
-  Grid,
-  row,
-} from "../../src/video-grid/model";
-import { TileDescriptor } from "../../src/video-grid/TileDescriptor";
-
-/**
- * Builds a grid from a string specifying the contents of each cell as a letter.
- */
-function mkGrid(spec: string): Grid {
-  const secondNewline = spec.indexOf("\n", 1);
-  const columns = secondNewline === -1 ? spec.length : secondNewline - 1;
-  const cells = spec.match(/[a-z ]/g) ?? [];
-  const areas = new Set(cells);
-  areas.delete(" "); // Space represents an empty cell, not an area
-  const grid: Grid = { columns, cells: new Array(cells.length) };
-
-  for (const area of areas) {
-    const start = cells.indexOf(area);
-    const end = cells.lastIndexOf(area);
-    const rows = row(end, grid) - row(start, grid) + 1;
-    const columns = column(end, grid) - column(start, grid) + 1;
-
-    forEachCellInArea(start, end, grid, (_c, i) => {
-      grid.cells[i] = {
-        item: { id: area } as unknown as TileDescriptor,
-        origin: i === start,
-        rows,
-        columns,
-      };
-    });
-  }
-
-  return grid;
-}
-
-/**
- * Turns a grid into a string showing the contents of each cell as a letter.
- */
-function showGrid(g: Grid): string {
-  let result = "\n";
-  g.cells.forEach((c, i) => {
-    if (i > 0 && i % g.columns == 0) result += "\n";
-    result += c?.item.id ?? " ";
-  });
-  return result;
-}
-
-function testFillGaps(title: string, input: string, output: string): void {
-  test(`fillGaps ${title}`, () => {
-    expect(showGrid(fillGaps(mkGrid(input)))).toBe(output);
-  });
-}
-
-testFillGaps(
-  "does nothing on an empty grid",
-  `
-`,
-  `
-`
-);
-
-testFillGaps(
-  "does nothing if there are no gaps",
-  `
-ab
-cd
-ef`,
-  `
-ab
-cd
-ef`
-);
-
-testFillGaps(
-  "fills a gap",
-  `
-a b
-cde
-f`,
-  `
-cab
-fde`
-);
-
-testFillGaps(
-  "fills multiple gaps",
-  `
-a bc 
-defgh
- ijkl
-mno`,
-  `
-aebch
-difgl
-monjk`
-);
-
-testFillGaps(
-  "fills a big gap",
-  `
-abcd
-e  f
-g  h
-ijkl`,
-  `
-abcd
-elhf
-gkji`
-);
-
-testFillGaps(
-  "only moves 1×1 tiles",
-  `
-  
-aa
-bc`,
-  `
-bc
-aa`
-);
-
-testFillGaps(
-  "prefers moving around large tiles",
-  `
-a bc
-ddde
-dddf
-ghij
-k`,
-  `
-abce
-dddf
-dddj
-kghi`
-);
-
-testFillGaps(
-  "moves through large tiles if necessary",
-  `
-a bc
-dddd
-efgh
-i`,
-  `
-afbc
-dddd
-iegh`
-);
-
-function testCycleTileSize(
-  title: string,
-  tileId: string,
-  input: string,
-  output: string
-): void {
-  test(`cycleTileSize ${title}`, () => {
-    expect(showGrid(cycleTileSize(tileId, mkGrid(input)))).toBe(output);
-  });
-}
-
-testCycleTileSize(
-  "does nothing if the tile is not present",
-  "z",
-  `
-abcd
-efgh`,
-  `
-abcd
-efgh`
-);
-
-testCycleTileSize(
-  "expands a tile to 2×2 in a 3 column layout",
-  "c",
-  `
-abc
-def
-ghi`,
-  `
-acc
-bcc
-def
-ghi`
-);
-
-testCycleTileSize(
-  "expands a tile to 3×3 in a 4 column layout",
-  "g",
-  `
-abcd
-efgh`,
-  `
-abcd
-eggg
-fggg
-h`
-);
-
-testCycleTileSize(
-  "restores a tile to 1×1",
-  "b",
-  `
-abbc
-dbbe
-fghi
-jk`,
-  `
-abhc
-djge
-fik`
-);
-
-testCycleTileSize(
-  "expands a tile even in a crowded grid",
-  "c",
-  `
-abb
-cbb
-dde
-ddf
-ghi
-klm`,
-  `
-abb
-gbb
-dde
-ddf
-cci
-cch
-klm`
-);
-
-testCycleTileSize(
-  "does nothing if the tile has no room to expand",
-  "c",
-  `
-abb
-cbb
-dde
-ddf`,
-  `
-abb
-cbb
-dde
-ddf`
-);
-
-test("appendItems appends 1×1 tiles", () => {
-  const grid1 = `
-aab
-aac
-d`;
-  const grid2 = `
-aab
-aac
-def`;
-  const newItems = ["e", "f"].map(
-    (i) => ({ id: i } as unknown as TileDescriptor)
-  );
-  expect(showGrid(appendItems(newItems, mkGrid(grid1)))).toBe(grid2);
-});
--- a/yarn.lock
+++ b/yarn.lock
@@ -1821,14 +1821,14 @@
  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
  integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==

-"@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.3":
-  version "0.1.0-alpha.4"
-  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.4.tgz#1b20294e0354c3dcc9c7dc810d883198a4042f04"
-  integrity sha512-mdaDKrw3P5ZVCpq0ioW0pV6ihviDEbS8ZH36kpt9stLKHwwDSopPogE6CkQhi0B1jn1yBUtOYi32mBV/zcOR7g==
+"@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.2":
+  version "0.1.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.2.tgz#a09d0fea858e817da971a3c9f904632ef7b49eb6"
+  integrity sha512-oVkBCh9YP7H9i4gAoQbZzswniczfo/aIptNa4dxRi4Ff9lSvUCFv6Hvzi7C+90c0/PWZLXjIDTIAWZYmwyd2fA==

-"@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz":
-  version "3.2.14"
-  resolved "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz#acd96c00a881d0f462e1f97a56c73742c8dbc984"
+"@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz":
+  version "3.2.8"
+  resolved "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz#8d53636d045e1776e2a2ec6613e57330dd9ce856"

 "@mdx-js/mdx@^1.6.22":
  version "1.6.22"
@@ -2418,13 +2418,13 @@
    "@sentry/utils" "6.19.7"
    tslib "^1.9.3"

-"@sentry/core@7.28.1":
-  version "7.28.1"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.28.1.tgz#c712ce17469b18b01606108817be24a99ed2116e"
-  integrity sha512-7wvnuvn/mrAfcugWoCG/3pqDIrUgH5t+HisMJMGw0h9Tc33KqrmqMDCQVvjlrr2pWrw/vuUCFdm8CbUHJ832oQ==
+"@sentry/core@7.31.0":
+  version "7.31.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.31.0.tgz#2c1ec086cd86c097fc5c60703d33c848089597c7"
+  integrity sha512-IZS1MZznyBOPw7UEpZwq3t3aaaVhFB+r3KM4JYFSJRr7Ky9TjldXA3hadNUTztjYGgEC3u8kB9jXoRvNXM2hqA==
  dependencies:
-    "@sentry/types" "7.28.1"
-    "@sentry/utils" "7.28.1"
+    "@sentry/types" "7.31.0"
+    "@sentry/utils" "7.31.0"
    tslib "^1.9.3"

 "@sentry/hub@6.19.7":
@@ -2446,13 +2446,13 @@
    tslib "^1.9.3"

 "@sentry/node@^7.19.0":
-  version "7.28.1"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.28.1.tgz#fc53675a048c29c86e5a8cd3ba570c454f492c18"
-  integrity sha512-n7AbpJqZJjWPpKNGc55mP7AdQ+XSomS9MZJuZ+Xt2AU52aVwGPI4z9aHUJFSDGaMHHiu/toyPnoUES+XZf6/hw==
+  version "7.31.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.31.0.tgz#d6b6776f7c1daee0a41e7f97fc15f058435f1b1c"
+  integrity sha512-DBjPfThZ5CIC2G9/CVFRlSOP/QqF1IoZXNpTUPZkhQ1cjShJeERT64jMkTdk+RAStSTpEfF6J0rUy1NIyHHEoQ==
  dependencies:
-    "@sentry/core" "7.28.1"
-    "@sentry/types" "7.28.1"
-    "@sentry/utils" "7.28.1"
+    "@sentry/core" "7.31.0"
+    "@sentry/types" "7.31.0"
+    "@sentry/utils" "7.31.0"
    cookie "^0.4.1"
    https-proxy-agent "^5.0.0"
    lru_map "^0.3.3"
@@ -2482,13 +2482,13 @@
    tslib "^1.9.3"

 "@sentry/tracing@^7.19.0":
-  version "7.28.1"
-  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.28.1.tgz#d276e4d17a79190a88112696c73de12c209607a1"
-  integrity sha512-uWspnuz+7FyW8ES5lRaVA7O/YJSzMlSkvBFtgzaoKmdaueokU/sRLwlCsrdgwavG1wpm79df7R1iiSeqhaXDlw==
+  version "7.31.0"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.31.0.tgz#c37f1930aba05a4c461f655dc258eaa851e9a305"
+  integrity sha512-p/b9sOw2wwcDLp8p0bJ0oetgeEB1q/ueZaXDeBeSh+3GNKx6J4S3pcFpbMXDK8d2Ayd3P9Gvrm7y9Hc2ueJteg==
  dependencies:
-    "@sentry/core" "7.28.1"
-    "@sentry/types" "7.28.1"
-    "@sentry/utils" "7.28.1"
+    "@sentry/core" "7.31.0"
+    "@sentry/types" "7.31.0"
+    "@sentry/utils" "7.31.0"
    tslib "^1.9.3"

 "@sentry/types@6.19.7":
@@ -2496,10 +2496,10 @@
  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.19.7.tgz#c6b337912e588083fc2896eb012526cf7cfec7c7"
  integrity sha512-jH84pDYE+hHIbVnab3Hr+ZXr1v8QABfhx39KknxqKWr2l0oEItzepV0URvbEhB446lk/S/59230dlUUIBGsXbg==

-"@sentry/types@7.28.1":
-  version "7.28.1"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.28.1.tgz#9018b4c152b475de9bedd267237393d3c9b1253d"
-  integrity sha512-DvSplMVrVEmOzR2M161V5+B8Up3vR71xMqJOpWTzE9TqtFJRGPtqT/5OBsNJJw1+/j2ssMcnKwbEo9Q2EGeS6g==
+"@sentry/types@7.31.0":
+  version "7.31.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.31.0.tgz#c028519a660d76c4e8f18ba9e44ede45d314fcae"
+  integrity sha512-nFqo7wyMnapdSEdw1MD+cavDtD9x5QQmh/bwLEOb/euM0cHFJHYyD7CveY/mQng4HyEVWY+DCtX/7E3GcQ7Bdw==

 "@sentry/types@^7.2.0":
  version "7.13.0"
@@ -2514,12 +2514,12 @@
    "@sentry/types" "6.19.7"
    tslib "^1.9.3"

-"@sentry/utils@7.28.1":
-  version "7.28.1"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.28.1.tgz#0a7b6aa4b09e91e4d1aded2a8c8dbaf818cee96e"
-  integrity sha512-75/jzLUO9HH09iC9TslNimGbxOP3jgn89P+q7uR+rp2fJfRExHVeKJZQdK0Ij4/SmE7TJ3Uh2r154N0INZEx1g==
+"@sentry/utils@7.31.0":
+  version "7.31.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.31.0.tgz#507290984c941fca8f5c2621a4b8b0aca8fbfc10"
+  integrity sha512-B1KkvdfwlaqM7sDp3/yk2No7WsbMuLEywGRVOLzXeTqTLSBRBWyyYIudqPtx2LDds9anlUHj21zs9FKY+S3eiA==
  dependencies:
-    "@sentry/types" "7.28.1"
+    "@sentry/types" "7.31.0"
    tslib "^1.9.3"

 "@sentry/vite-plugin@^0.3.0":
@@ -10362,12 +10362,12 @@ matrix-events-sdk@0.0.1:
  resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd"
  integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==

-"matrix-js-sdk@github:matrix-org/matrix-js-sdk#8cbbdaa239e449848e8874f041ef1879c1956696":
-  version "23.4.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/8cbbdaa239e449848e8874f041ef1879c1956696"
+"matrix-js-sdk@github:matrix-org/matrix-js-sdk#a34d06c7c24c3523a77f70c01d4e31c45e92aa6b":
+  version "23.0.0"
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/a34d06c7c24c3523a77f70c01d4e31c45e92aa6b"
  dependencies:
    "@babel/runtime" "^7.12.5"
-    "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.3"
+    "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.2"
    another-json "^0.2.0"
    bs58 "^5.0.0"
    content-type "^1.0.4"
@@ -13717,11 +13717,6 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.3:
  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==

-tinyqueue@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.3.tgz#64d8492ebf39e7801d7bd34062e29b45b2035f08"
-  integrity sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==
-
 tmpl@1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
Author	SHA1	Message	Date
David Baker	69b1b3076c	Update js-sdk	2023-01-17 11:15:39 +00:00
David Baker	4ec7749631	Add units to constant	2023-01-17 11:15:12 +00:00
David Baker	3340ba96dc	Change rageshake persistence to throttled flushing Rather than every 30 seconds. This way we'll save logs for sessions lasting less than 30 seconds which we previously didn't. Also save on window unload just in case that doesn't catch everything. Plus remove some more unused params.	2023-01-17 11:15:00 +00:00
David Baker	756e03758f	Mostly cosmetic fixes to rageshake * Remove duplicate copyright header * Remove ts-ignores by just using the objects directly rather than via event.target * Use error.message rather than errorCode which TS doesn't know about and may or may not exist. * Remove some unused things like the skip rageshake function and the option to init rageshakes without storage. * Turn single function with a boolean param to make it take two entirely separate code paths into two functions.	2023-01-17 11:13:40 +00:00
David Baker	ec4e50693f	Log undecryptable to-device events Listen for the new undecryptable to-device event event and log events for it in Posthog & Sentry, and make it visible in the call flow diagram.	2023-01-17 11:11:39 +00:00
David Baker	fe575990f5	Rename to useCallViewKeyboardShortcuts	2023-01-17 11:11:13 +00:00
David Baker	c9baa2d9dc	Prevent mute event spam from key repeats	2023-01-17 11:10:55 +00:00
David Baker	9b3a7cd219	Disable keyboard shortcuts when feedback modal is open	2023-01-17 11:10:45 +00:00
David Baker	f58590fc70	Fix caching headers on Docker image	2023-01-17 11:10:37 +00:00
David Baker	71a1c5d24b	Use IndexedDB storage in dev mode, just without the worker As per comment, we can't use workers in Vite dev mode. We previously fell back to the memory store but this ends up with it working significantly differently in dev mode to production, eg. dev mode would always start by doing an initial sync, so old to-device messages would arrive again. There's no need to fall all the way back to the memory store though, we can use the IndexedDB store without the worker.	2023-01-17 11:10:01 +00:00