Merge branch 'livekit' into toger5/tiles_based_on_rtc_member

2026-03-31 07:00:26 +00:00 · 2024-11-06 13:42:45 +00:00
parent fecd789d02 c45f724279
commit 733b685e96
57 changed files with 2159 additions and 1101 deletions
--- a/public/locales/bg/app.json
+++ b/public/locales/bg/app.json
@@ -20,7 +20,6 @@
    "audio": "Звук",
    "avatar": "Аватар",
    "camera": "Камера",
-    "copied": "Копирано!",
    "display_name": "Име/псевдоним",
    "home": "Начало",
    "loading": "Зареждане…",
@@ -58,9 +57,7 @@
  "register_auth_links": "<0>Вече имате акаунт?</0><1><0>Влезте с него</0> или <2>Влезте като гост</2></1>",
  "register_confirm_password_label": "Потвърди паролата",
  "return_home_button": "Връщане на началния екран",
-  "room_auth_view_join_button": "Влез в разговора сега",
  "screenshare_button_label": "Сподели екрана",
-  "select_input_unset_button": "Изберете опция",
  "settings": {
    "developer_tab_title": "Разработчик",
    "feedback_tab_h4": "Изпрати обратна връзка",
@@ -70,6 +67,5 @@
  },
  "unauthenticated_view_body": "Все още не сте регистрирани? <2>Създайте акаунт</2>",
  "unauthenticated_view_login_button": "Влезте в акаунта си",
-  "version": "Версия: {{version}}",
-  "waiting_for_participants": "Изчакване на други участници…"
+  "version": "Версия: {{version}}"
 }
--- a/public/locales/cs/app.json
+++ b/public/locales/cs/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "Zavřít",
-    "copy": "Kopírovat",
    "go": "Pokračovat",
    "no": "Ne",
    "register": "Registrace",
@@ -19,7 +18,6 @@
  },
  "common": {
    "camera": "Kamera",
-    "copied": "Zkopírováno!",
    "display_name": "Zobrazované jméno",
    "home": "Domov",
    "loading": "Načítání…",
@@ -60,9 +58,7 @@
  "register_auth_links": "<0>Už máte účet?</0><1><0>Přihlásit se</0> Or <2>Jako host</2></1>",
  "register_confirm_password_label": "Potvrdit heslo",
  "return_home_button": "Vrátit se na domácí obrazovku",
-  "room_auth_view_join_button": "Připojit se k hovoru",
  "screenshare_button_label": "Sdílet obrazovku",
-  "select_input_unset_button": "Vyberte možnost",
  "settings": {
    "developer_settings_label": "Vývojářské nastavení",
    "developer_settings_label_description": "Zobrazit vývojářské nastavení.",
@@ -74,6 +70,5 @@
  },
  "unauthenticated_view_body": "Nejste registrovaní? <2>Vytvořit účet</2>",
  "unauthenticated_view_login_button": "Přihlásit se ke svému účtu",
-  "version": "Verze: {{version}}",
-  "waiting_for_participants": "Čekání na další účastníky…"
+  "version": "Verze: {{version}}"
 }
--- a/public/locales/de/app.json
+++ b/public/locales/de/app.json
@@ -4,8 +4,8 @@
  },
  "action": {
    "close": "Schließen",
-    "copy": "Kopieren",
    "copy_link": "Link kopieren",
+    "edit": "Bearbeiten",
    "go": "Los geht’s",
    "invite": "Einladen",
    "no": "Nein",
@@ -13,7 +13,8 @@
    "remove": "Entfernen",
    "sign_in": "Anmelden",
    "sign_out": "Abmelden",
-    "submit": "Absenden"
+    "submit": "Absenden",
+    "upload_file": "Datei hochladen"
  },
  "analytics_notice": "Mit der Teilnahme an der Beta akzeptierst du die Sammlung von anonymen Daten, die wir zur Verbesserung des Produkts verwenden. Weitere Informationen zu den von uns erhobenen Daten findest du in unserer <2>Datenschutzerklärung</2> und unseren <6>Cookie-Richtlinien</6>.",
  "app_selection_modal": {
@@ -38,26 +39,44 @@
  },
  "call_name": "Name des Anrufs",
  "common": {
+    "analytics": "Analyse",
    "audio": "Audio",
    "avatar": "Profilbild",
+    "back": "Zurück",
    "camera": "Kamera",
-    "copied": "Kopiert!",
    "display_name": "Anzeigename",
    "encrypted": "Verschlüsselt",
    "error": "Fehler",
    "home": "Startseite",
    "loading": "Lade …",
    "microphone": "Mikrofon",
+    "next": "Weiter",
+    "options": "Optionen",
    "password": "Passwort",
+    "preferences": "Einstellungen",
    "profile": "Profil",
+    "raise_hand": "Hand heben",
    "settings": "Einstellungen",
    "unencrypted": "Nicht verschlüsselt",
    "username": "Benutzername",
    "video": "Video"
  },
+  "crypto_version": "Krypto-Version:{{version}}",
+  "device_id": "Geräte-ID: {{id}}",
  "disconnected_banner": "Die Verbindung zum Server wurde getrennt.",
  "full_screen_view_description": "<0>Übermittelte Problemberichte helfen uns, Fehler zu beheben.</0>",
  "full_screen_view_h1": "<0>Hoppla, etwas ist schiefgelaufen.</0>",
+  "group_call_loader": {
+    "banned_body": "Du wurdest aus dem Raum verbannt.",
+    "banned_heading": "Verbannt",
+    "call_ended_body": "Du wurdest aus dem Anruf entfernt.",
+    "call_ended_heading": "Anruf beendet",
+    "failed_heading": "Beitreten fehlgeschlagen",
+    "failed_text": "Anruf nicht gefunden oder Beitritt nicht erlaubt",
+    "knock_reject_body": "Die Mitglieder des Raums haben Deine Beitrittsanfrage abgelehnt.",
+    "knock_reject_heading": "Beitritt nicht erlaubt",
+    "reason": "Grund"
+  },
  "hangup_button_label": "Anruf beenden",
  "header_label": "Element Call-Startseite",
  "header_participants_label": "Teilnehmende",
@@ -73,8 +92,11 @@
  "layout_grid_label": "Raster",
  "layout_spotlight_label": "Rampenlicht",
  "lobby": {
+    "ask_to_join": "Beitritt anfragen",
+    "join_as_guest": "Als Gast beitreten",
    "join_button": "Anruf beitreten",
-    "leave_button": "Zurück zu kürzlichen Anrufen"
+    "leave_button": "Zurück zu kürzlichen Anrufen",
+    "waiting_for_invite": "Anfrage gesendet"
  },
  "log_in": "Anmelden",
  "logging_in": "Anmelden …",
@@ -82,9 +104,13 @@
  "login_auth_links_prompt": "Noch nicht registriert?",
  "login_subheading": "Weiter zu Element",
  "login_title": "Anmelden",
+  "matrix_id": "Matrix-ID: {{id}}",
  "microphone_off": "Mikrofon aus",
  "microphone_on": "Mikrofon an",
  "mute_microphone_button_label": "Mikrofon deaktivieren",
+  "participant_count_one": "{{count, number}}",
+  "participant_count_other": "{{count, number}}",
+  "qr_code": "QR-Code",
  "rageshake_button_error_caption": "Protokolle erneut senden",
  "rageshake_request_modal": {
    "body": "Ein anderer Benutzer dieses Anrufs hat ein Problem. Um es besser diagnostizieren zu können, würden wir gerne ein Debug-Protokoll erstellen.",
@@ -103,15 +129,16 @@
  },
  "register_auth_links": "<0>Du hast bereits ein Konto?</0><1><0>Anmelden</0> Oder <2>Als Gast betreten</2></1>",
  "register_confirm_password_label": "Passwort bestätigen",
+  "register_heading": "Erstelle Dein Konto",
  "return_home_button": "Zurück zur Startseite",
-  "room_auth_view_eula_caption": "Mit einem Klick auf „Anruf beitreten“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
-  "room_auth_view_join_button": "Anruf beitreten",
+  "room_auth_view_continue_button": "Weiter",
+  "room_auth_view_eula_caption": "Mit einem Klick auf „Weiter“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
  "screenshare_button_label": "Bildschirm teilen",
-  "select_input_unset_button": "Wähle eine Option",
  "settings": {
    "developer_settings_label": "Entwicklereinstellungen",
    "developer_settings_label_description": "Zeige die Entwicklereinstellungen im Einstellungsfenster.",
    "developer_tab_title": "Entwickler",
+    "duplicate_tiles_label": "Anzahl zusätzlicher Kachelkopien pro Teilnehmer",
    "feedback_tab_body": "Falls du auf Probleme stößt oder einfach nur eine Rückmeldung geben möchtest, sende uns bitte eine kurze Beschreibung.",
    "feedback_tab_description_label": "Deine Rückmeldung",
    "feedback_tab_h4": "Rückmeldung geben",
@@ -120,8 +147,11 @@
    "feedback_tab_title": "Rückmeldung",
    "more_tab_title": "Mehr",
    "opt_in_description": "<0></0><1></1>Du kannst deine Zustimmung durch Abwählen dieses Kästchens zurückziehen. Falls du dich aktuell in einem Anruf befindest, wird diese Einstellung nach dem Ende des Anrufs wirksam.",
-    "show_connection_stats_label": "Verbindungsstatistiken zeigen",
-    "speaker_device_selection_label": "Wiedergabegerät"
+    "preferences_tab_body": "Hier können zusätzliche Optionen individuell konfigurieren werden",
+    "preferences_tab_h4": "Einstellungen",
+    "preferences_tab_show_hand_raised_timer_description": "Einen Timer anzeigen, wenn ein Teilnehmer seine Hand hebt",
+    "preferences_tab_show_hand_raised_timer_label": "Dauer des Handhebens anzeigen",
+    "speaker_device_selection_label": "Lautsprecher"
  },
  "star_rating_input_label_one": "{{count}} Stern",
  "star_rating_input_label_other": "{{count}} Sterne",
@@ -130,13 +160,18 @@
  "stop_screenshare_button_label": "Bildschirm wird geteilt",
  "stop_video_button_label": "Video deaktivieren",
  "submitting": "Sende …",
+  "switch_camera": "Kamera wechseln",
  "unauthenticated_view_body": "Noch nicht registriert? <2>Konto erstellen</2>",
  "unauthenticated_view_eula_caption": "Mit einem Klick auf „Los geht’s“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
  "unauthenticated_view_login_button": "Melde dich mit deinem Konto an",
  "unmute_microphone_button_label": "Mikrofon aktivieren",
-  "version": "Version: {{version}}",
+  "version": "{{productName}} Version: {{version}}",
  "video_tile": {
-    "sfu_participant_local": "Du"
-  },
-  "waiting_for_participants": "Warte auf weitere Teilnehmer …"
+    "always_show": "Immer anzeigen",
+    "change_fit_contain": "An Fenster anpassen",
+    "collapse": "Minimieren",
+    "expand": "Erweitern",
+    "mute_for_me": "Für mich stummschalten",
+    "volume": "Lautstärke"
+  }
 }
--- a/public/locales/el/app.json
+++ b/public/locales/el/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "Κλείσιμο",
-    "copy": "Αντιγραφή",
    "go": "Μετάβαση",
    "no": "Όχι",
    "register": "Εγγραφή",
@@ -13,7 +12,7 @@
    "sign_out": "Αποσύνδεση",
    "submit": "Υποβολή"
  },
-  "analytics_notice": "Συμμετέχοντας σε αυτή τη δοκιμαστική έκδοση, συναινείτε στη συλλογή ανώνυμων δεδομένων, τα οποία χρησιμοποιούμε για τη βελτίωση του προϊόντος. Μπορείτε να βρείτε περισσότερες πληροφορίες σχετικά με το ποια δεδομένα καταγράφουμε στην <2>Πολιτική απορρήτου</2> και στην <6>Πολιτική cookies</6>.",
+  "analytics_notice": "Συμμετέχοντας σε αυτή τη δοκιμαστική έκδοση, συναινείτε στη συλλογή ανώνυμων δεδομένων, τα οποία χρησιμοποιούμε για τη βελτίωση του προϊόντος. Μπορείτε να βρείτε περισσότερες πληροφορίες σχετικά με το ποια δεδομένα καταγράφουμε στην <2>Πολιτική απορρήτου</2> και στην <5>Πολιτική cookies</5>.",
  "call_ended_view": {
    "create_account_button": "Δημιουργία λογαριασμού",
    "create_account_prompt": "<0>Γιατί να μην ολοκληρώσετε με τη δημιουργία ενός κωδικού πρόσβασης για τη διατήρηση του λογαριασμού σας;</0><1>Θα μπορείτε να διατηρήσετε το όνομά σας και να ορίσετε ένα avatar για χρήση σε μελλοντικές κλήσεις.</1>",
@@ -26,7 +25,6 @@
  "common": {
    "audio": "Ήχος",
    "camera": "Κάμερα",
-    "copied": "Αντιγράφηκε!",
    "display_name": "Εμφανιζόμενο όνομα",
    "home": "Αρχική",
    "loading": "Φόρτωση…",
@@ -67,9 +65,7 @@
  "register_auth_links": "<0>Έχετε ήδη λογαριασμό;</0><1><0>Συνδεθείτε</0> Ή <2>Συμμετέχετε ως επισκέπτης</2></1>",
  "register_confirm_password_label": "Επιβεβαίωση κωδικού",
  "return_home_button": "Επιστροφή στην αρχική οθόνη",
-  "room_auth_view_join_button": "Συμμετοχή στην κλήση τώρα",
  "screenshare_button_label": "Κοινή χρήση οθόνης",
-  "select_input_unset_button": "Επιλέξτε μια επιλογή",
  "settings": {
    "developer_settings_label": "Ρυθμίσεις προγραμματιστή",
    "developer_settings_label_description": "Εμφάνιση ρυθμίσεων προγραμματιστή στο παράθυρο ρυθμίσεων.",
@@ -82,7 +78,6 @@
    "feedback_tab_title": "Ανατροφοδότηση",
    "more_tab_title": "Περισσότερα",
    "opt_in_description": "<0></0><1></1>Μπορείτε να ανακαλέσετε τη συγκατάθεσή σας αποεπιλέγοντας αυτό το πλαίσιο. Εάν βρίσκεστε σε κλήση, η ρύθμιση αυτή θα τεθεί σε ισχύ στο τέλος της.",
-    "show_connection_stats_label": "Εμφάνιση στατιστικών σύνδεσης",
    "speaker_device_selection_label": "Ηχείο"
  },
  "star_rating_input_label_one": "{{count}} αστέρι",
@@ -90,6 +85,5 @@
  "submitting": "Υποβολή…",
  "unauthenticated_view_body": "Δεν έχετε εγγραφεί ακόμα; <2>Δημιουργήστε λογαριασμό</2>",
  "unauthenticated_view_login_button": "Συνδεθείτε στον λογαριασμό σας",
-  "version": "Έκδοση: {{version}}",
-  "waiting_for_participants": "Αναμονή για άλλους συμμετέχοντες…"
+  "version": "Έκδοση: {{version}}"
 }
--- a/public/locales/en-GB/app.json
+++ b/public/locales/en-GB/app.json
@@ -64,6 +64,12 @@
  "crypto_version": "Crypto version: {{version}}",
  "device_id": "Device ID: {{id}}",
  "disconnected_banner": "Connectivity to the server has been lost.",
+  "e2ee_encryption_status": {
+    "connecting": "Connecting...",
+    "key_invalid": "The end-to-end encrypted media key for this person is invalid",
+    "key_missing": "You haven't received the current end-to-end encrypted media key for this person yet",
+    "password_invalid": "This person is using a different password so you won't be able to communicate with them"
+  },
  "full_screen_view_description": "<0>Submitting debug logs will help us track down the problem.</0>",
  "full_screen_view_h1": "<0>Oops, something's gone wrong.</0>",
  "group_call_loader": {
--- a/public/locales/es/app.json
+++ b/public/locales/es/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "Cerrar",
-    "copy": "Copiar",
    "go": "Comenzar",
    "register": "Registrarse",
    "remove": "Eliminar",
@@ -12,7 +11,7 @@
    "sign_out": "Cerrar sesión",
    "submit": "Enviar"
  },
-  "analytics_notice": "Al participar en esta beta, consientes a la recogida de datos anónimos, los cuales usaremos para mejorar el producto. Puedes encontrar más información sobre que datos recogemos en nuestra <2>Política de privacidad</2> y en nuestra <6>Política sobre Cookies</6>.",
+  "analytics_notice": "Al participar en esta beta, consientes a la recogida de datos anónimos, los cuales usaremos para mejorar el producto. Puedes encontrar más información sobre que datos recogemos en nuestra <2>Política de privacidad</2> y en nuestra <5>Política sobre Cookies</5>.",
  "call_ended_view": {
    "create_account_button": "Crear cuenta",
    "create_account_prompt": "<0>¿Por qué no mantienes tu cuenta estableciendo una contraseña?</0><1>Podrás mantener tu nombre y establecer un avatar para usarlo en futuras llamadas</1>",
@@ -24,7 +23,6 @@
  },
  "common": {
    "camera": "Cámara",
-    "copied": "¡Copiado!",
    "display_name": "Nombre a mostrar",
    "home": "Inicio",
    "loading": "Cargando…",
@@ -67,9 +65,7 @@
  "register_confirm_password_label": "Confirmar contraseña",
  "return_home_button": "Volver a la pantalla de inicio",
  "room_auth_view_eula_caption": "Al hacer clic en \"Unirse a la llamada ahora\", aceptas nuestro <2>Contrato de Licencia de Usuario Final (CLUF)</2>",
-  "room_auth_view_join_button": "Unirse a la llamada ahora",
  "screenshare_button_label": "Compartir pantalla",
-  "select_input_unset_button": "Selecciona una opción",
  "settings": {
    "developer_settings_label": "Ajustes de desarrollador",
    "developer_settings_label_description": "Muestra los ajustes de desarrollador en la ventana de ajustes.",
@@ -82,7 +78,6 @@
    "feedback_tab_title": "Danos tu opinión",
    "more_tab_title": "Más",
    "opt_in_description": "<0></0><1></1>Puedes retirar tu consentimiento desmarcando esta casilla. Si estás en una llamada, este ajuste se aplicará al final de esta.",
-    "show_connection_stats_label": "Mostrar estadísticas de conexión",
    "speaker_device_selection_label": "Altavoz"
  },
  "star_rating_input_label_one": "{{count}} estrella",
@@ -91,6 +86,5 @@
  "unauthenticated_view_body": "¿No estás registrado todavía? <2>Crear una cuenta</2>",
  "unauthenticated_view_eula_caption": "Al hacer clic en \"Comenzar\", aceptas nuestro <2>Contrato de Licencia de Usuario Final (CLUF)</2>",
  "unauthenticated_view_login_button": "Iniciar sesión en tu cuenta",
-  "version": "Versión: {{version}}",
-  "waiting_for_participants": "Esperando a los otros participantes…"
+  "version": "Versión: {{version}}"
 }
--- a/public/locales/et/app.json
+++ b/public/locales/et/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "Sulge",
-    "copy": "Kopeeri",
    "copy_link": "Kopeeri link",
    "go": "Jätka",
    "invite": "Kutsu",
@@ -15,7 +14,7 @@
    "sign_out": "Logi välja",
    "submit": "Saada"
  },
-  "analytics_notice": "Nõustudes selle beetaversiooni kasutamisega sa nõustud ka toote arendamiseks kasutatavate anonüümsete andmete kogumisega. Täpsemat teavet kogutavate andmete kohta leiad meie <2>Privaatsuspoliitikast</2> ja meie <6>Küpsiste kasutamise reeglitest</6>.",
+  "analytics_notice": "Nõustudes selle beetaversiooni kasutamisega sa nõustud ka toote arendamiseks kasutatavate anonüümsete andmete kogumisega. Täpsemat teavet kogutavate andmete kohta leiad meie <2>Privaatsuspoliitikast</2> ja meie <5>Küpsiste kasutamise reeglitest</5>.",
  "app_selection_modal": {
    "continue_in_browser": "Jätka veebibrauseris",
    "open_in_app": "Ava rakenduses",
@@ -39,7 +38,6 @@
    "audio": "Heli",
    "avatar": "Tunnuspilt",
    "camera": "Kaamera",
-    "copied": "Kopeeritud!",
    "display_name": "Kuvatav nimi",
    "encrypted": "Krüptitud",
    "home": "Avavaatesse",
@@ -97,9 +95,7 @@
  "register_confirm_password_label": "Kinnita salasõna",
  "return_home_button": "Tagasi avalehele",
  "room_auth_view_eula_caption": "Klõpsides „Liitu kõnega kohe“, nõustud sa meie <2>Lõppkasutaja litsentsilepinguga (EULA)</2>",
-  "room_auth_view_join_button": "Liitu kõnega kohe",
  "screenshare_button_label": "Jaga ekraani",
-  "select_input_unset_button": "Vali oma eelistus",
  "settings": {
    "developer_settings_label": "Arendaja seadistused",
    "developer_settings_label_description": "Näita seadistuste aknas arendajale vajalikke seadeid.",
@@ -112,7 +108,6 @@
    "feedback_tab_title": "Tagasiside",
    "more_tab_title": "Rohkem",
    "opt_in_description": "<0></0><1></1>Sa võid selle valiku eelmaldamisega alati oma nõusoleku tagasi võtta. Kui sul parasjagu on kõne pooleli, siis seadistuste muudatus jõustub pärast kõne lõppu.",
-    "show_connection_stats_label": "Näita ühenduse statistikat",
    "speaker_device_selection_label": "Kõlar"
  },
  "star_rating_input_label_one": "{{count}} tärni",
@@ -126,9 +121,5 @@
  "unauthenticated_view_eula_caption": "Klõpsides „Jätka“, nõustud sa meie <2>Lõppkasutaja litsentsilepinguga (EULA)</2>",
  "unauthenticated_view_login_button": "Logi oma kontosse sisse",
  "unmute_microphone_button_label": "Lülita mikrofon sisse",
-  "version": "Versioon: {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Sina"
-  },
-  "waiting_for_participants": "Ootame teiste osalejate lisandumist…"
+  "version": "Versioon: {{version}}"
 }
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "بستن",
-    "copy": "رونوشت",
    "go": "رفتن",
    "no": "خیر",
    "register": "ثبت‌نام",
@@ -21,7 +20,6 @@
    "audio": "صدا",
    "avatar": "آواتار",
    "camera": "دوربین",
-    "copied": "کپی شد!",
    "display_name": "نام نمایشی",
    "home": "خانه",
    "loading": "بارگزاری…",
@@ -61,9 +59,7 @@
  "register_auth_links": "<0>از قبل حساب کاربری دارید؟</0><1><0>ورود</0> Or <2>به عنوان یک میهمان وارد شوید</2></1>",
  "register_confirm_password_label": "تایید رمزعبور",
  "return_home_button": "برگشت به صفحه اصلی",
-  "room_auth_view_join_button": "الان به تماس بپیوند",
  "screenshare_button_label": "اشتراک گذاری صفحه نمایش",
-  "select_input_unset_button": "یک گزینه را انتخاب کنید",
  "settings": {
    "developer_tab_title": "توسعه دهنده",
    "feedback_tab_h4": "بازخورد ارائه دهید",
@@ -73,6 +69,5 @@
  },
  "unauthenticated_view_body": "هنوز ثبت‌نام نکرده‌اید؟ <2>ساخت حساب کاربری</2>",
  "unauthenticated_view_login_button": "به حساب کاربری خود وارد شوید",
-  "version": "نسخه: {{نسخه}}",
-  "waiting_for_participants": "در انتظار برای دیگر شرکت‌کنندگان…"
+  "version": "نسخه: {{نسخه}}"
 }
--- a/public/locales/fr/app.json
+++ b/public/locales/fr/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "Fermer",
-    "copy": "Copier",
    "copy_link": "Copier le lien",
    "go": "Commencer",
    "invite": "Inviter",
@@ -15,7 +14,7 @@
    "sign_out": "Déconnexion",
    "submit": "Envoyer"
  },
-  "analytics_notice": "En participant à cette beta, vous consentez à la collecte de données anonymes, qui seront utilisées pour améliorer le produit. Vous trouverez plus d’informations sur les données collectées dans notre <2>Politique de vie privée</2> et notre <6>Politique de cookies</6>.",
+  "analytics_notice": "En participant à cette beta, vous consentez à la collecte de données anonymes, qui seront utilisées pour améliorer le produit. Vous trouverez plus d’informations sur les données collectées dans notre <2>Politique de vie privée</2> et notre <5>Politique de cookies</5>.",
  "app_selection_modal": {
    "continue_in_browser": "Continuer dans le navigateur",
    "open_in_app": "Ouvrir dans l’application",
@@ -37,7 +36,6 @@
  "call_name": "Nom de l’appel",
  "common": {
    "camera": "Caméra",
-    "copied": "Copié !",
    "display_name": "Nom d’affichage",
    "encrypted": "Chiffré",
    "home": "Accueil",
@@ -95,9 +93,7 @@
  "register_confirm_password_label": "Confirmer le mot de passe",
  "return_home_button": "Retour à l’accueil",
  "room_auth_view_eula_caption": "En cliquant sur « Rejoindre l’appel maintenant », vous acceptez notre <2>Contrat de Licence Utilisateur Final (CLUF)</2>",
-  "room_auth_view_join_button": "Rejoindre l’appel maintenant",
  "screenshare_button_label": "Partage d’écran",
-  "select_input_unset_button": "Sélectionnez une option",
  "settings": {
    "developer_settings_label": "Paramètres développeurs",
    "developer_settings_label_description": "Affiche les paramètres développeurs dans la fenêtre des paramètres.",
@@ -110,7 +106,6 @@
    "feedback_tab_title": "Commentaires",
    "more_tab_title": "Plus",
    "opt_in_description": "<0></0><1></1>Vous pouvez retirer votre consentement en décochant cette case. Si vous êtes actuellement en communication, ce paramètre prendra effet à la fin de l’appel.",
-    "show_connection_stats_label": "Afficher les statistiques de la connexion",
    "speaker_device_selection_label": "Intervenant"
  },
  "star_rating_input_label_one": "{{count}} favori",
@@ -124,9 +119,5 @@
  "unauthenticated_view_eula_caption": "En cliquant sur « Commencer », vous acceptez notre <2>Contrat de Licence Utilisateur Final (CLUF)</2>",
  "unauthenticated_view_login_button": "Connectez vous à votre compte",
  "unmute_microphone_button_label": "Allumer le microphone",
-  "version": "Version : {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Vous"
-  },
-  "waiting_for_participants": "En attente d’autres participants…"
+  "version": "Version : {{version}}"
 }
--- a/public/locales/id/app.json
+++ b/public/locales/id/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "Tutup",
-    "copy": "Salin",
    "copy_link": "Salin tautan",
    "go": "Bergabung",
    "invite": "Undang",
@@ -15,7 +14,7 @@
    "sign_out": "Keluar",
    "submit": "Kirim"
  },
-  "analytics_notice": "Dengan bergabung dalam beta ini, Anda mengizinkan kami untuk mengumpulkan data anonim, yang kami gunakan untuk meningkatkan produk ini. Anda dapat mempelajari lebih lanjut tentang data apa yang kami lacak dalam <2>Kebijakan Privasi</2> dan <6>Kebijakan Kuki</6> kami.",
+  "analytics_notice": "Dengan bergabung dalam beta ini, Anda mengizinkan kami untuk mengumpulkan data anonim, yang kami gunakan untuk meningkatkan produk ini. Anda dapat mempelajari lebih lanjut tentang data apa yang kami lacak dalam <2>Kebijakan Privasi</2> dan <5>Kebijakan Kuki</5> kami.",
  "app_selection_modal": {
    "continue_in_browser": "Lanjutkan dalam peramban",
    "open_in_app": "Buka dalam aplikasi",
@@ -37,7 +36,6 @@
  "call_name": "Nama panggilan",
  "common": {
    "camera": "Kamera",
-    "copied": "Disalin!",
    "display_name": "Nama tampilan",
    "encrypted": "Terenkripsi",
    "home": "Beranda",
@@ -96,9 +94,7 @@
  "register_confirm_password_label": "Konfirmasi kata sandi",
  "return_home_button": "Kembali ke layar beranda",
  "room_auth_view_eula_caption": "Dengan mengeklik \"Bergabung ke panggilan sekarang\", Anda menyetujui <2>Perjanjian Lisensi Pengguna Akhir (EULA)</2> kami",
-  "room_auth_view_join_button": "Bergabung ke panggilan sekarang",
  "screenshare_button_label": "Bagikan layar",
-  "select_input_unset_button": "Pilih sebuah opsi",
  "settings": {
    "developer_settings_label": "Pengaturan Pengembang",
    "developer_settings_label_description": "Ekspos pengaturan pengembang dalam jendela pengaturan.",
@@ -111,7 +107,6 @@
    "feedback_tab_title": "Masukan",
    "more_tab_title": "Lainnya",
    "opt_in_description": "<0></0><1></1>Anda dapat mengurungkan kembali izin dengan mencentang kotak ini. Jika Anda saat ini dalam panggilan, pengaturan ini akan diterapkan di akhir panggilan.",
-    "show_connection_stats_label": "Tampilkan statistik koneksi",
    "speaker_device_selection_label": "Pembicara"
  },
  "star_rating_input_label_one": "{{count}} bintang",
@@ -125,9 +120,5 @@
  "unauthenticated_view_eula_caption": "Dengan mengeklik \"Bergabung\", Anda menyetujui <2>Perjanjian Lisensi Pengguna Akhir (EULA)</2>",
  "unauthenticated_view_login_button": "Masuk ke akun Anda",
  "unmute_microphone_button_label": "Nyalakan mikrofon",
-  "version": "Versi: {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Anda"
-  },
-  "waiting_for_participants": "Menunggu peserta lain…"
+  "version": "Versi: {{version}}"
 }
--- a/public/locales/it/app.json
+++ b/public/locales/it/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "Chiudi",
-    "copy": "Copia",
    "copy_link": "Copia collegamento",
    "go": "Vai",
    "invite": "Invita",
@@ -14,7 +13,7 @@
    "sign_out": "Disconnetti",
    "submit": "Invia"
  },
-  "analytics_notice": "Partecipando a questa beta, acconsenti alla raccolta di dati anonimi che usiamo per migliorare il prodotto. Puoi trovare più informazioni su quali dati monitoriamo nella nostra <2>informativa sulla privacy</2> e nell'<6>informativa sui cookie</6>.",
+  "analytics_notice": "Partecipando a questa beta, acconsenti alla raccolta di dati anonimi che usiamo per migliorare il prodotto. Puoi trovare più informazioni su quali dati monitoriamo nella nostra <2>informativa sulla privacy</2> e nell'<5>informativa sui cookie</5>.",
  "app_selection_modal": {
    "continue_in_browser": "Continua nel browser",
    "open_in_app": "Apri nell'app",
@@ -36,7 +35,6 @@
  "call_name": "Nome della chiamata",
  "common": {
    "camera": "Fotocamera",
-    "copied": "Copiato!",
    "display_name": "Il tuo nome",
    "encrypted": "Cifrata",
    "home": "Pagina iniziale",
@@ -94,9 +92,7 @@
  "register_confirm_password_label": "Conferma password",
  "return_home_button": "Torna alla schermata di iniziale",
  "room_auth_view_eula_caption": "Cliccando \"Entra in chiamata ora\", accetti il nostro <2>accordo di licenza con l'utente finale (EULA)</2>",
-  "room_auth_view_join_button": "Entra in chiamata ora",
  "screenshare_button_label": "Condividi schermo",
-  "select_input_unset_button": "Seleziona un'opzione",
  "settings": {
    "developer_settings_label": "Impostazioni per sviluppatori",
    "developer_settings_label_description": "Mostra le impostazioni per sviluppatori nella finestra delle impostazioni.",
@@ -108,7 +104,6 @@
    "feedback_tab_thank_you": "Grazie, abbiamo ricevuto il tuo commento!",
    "more_tab_title": "Altro",
    "opt_in_description": "<0></0><1></1>Puoi revocare il consenso deselezionando questa casella. Se attualmente sei in una chiamata, avrà effetto al termine di essa.",
-    "show_connection_stats_label": "Mostra statistiche connessione",
    "speaker_device_selection_label": "Altoparlante"
  },
  "star_rating_input_label_one": "{{count}} stelle",
@@ -122,9 +117,5 @@
  "unauthenticated_view_eula_caption": "Cliccando \"Vai\", accetti il nostro <2>accordo di licenza con l'utente finale (EULA)</2>",
  "unauthenticated_view_login_button": "Accedi al tuo profilo",
  "unmute_microphone_button_label": "Riaccendi il microfono",
-  "version": "Versione: {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Tu"
-  },
-  "waiting_for_participants": "In attesa di altri partecipanti…"
+  "version": "Versione: {{version}}"
 }
--- a/public/locales/ja/app.json
+++ b/public/locales/ja/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "閉じる",
-    "copy": "コピー",
    "go": "続行",
    "no": "いいえ",
    "register": "登録",
@@ -19,7 +18,6 @@
    "audio": "音声",
    "avatar": "アバター",
    "camera": "カメラ",
-    "copied": "コピーしました！",
    "display_name": "表示名",
    "home": "ホーム",
    "loading": "読み込んでいます…",
@@ -57,9 +55,7 @@
  "register_auth_links": "<0>既にアカウントをお持ちですか？</0><1><0>ログイン</0>または<2>ゲストとしてアクセス</2></1>",
  "register_confirm_password_label": "パスワードを確認",
  "return_home_button": "ホーム画面に戻る",
-  "room_auth_view_join_button": "今すぐ通話に参加",
  "screenshare_button_label": "画面共有",
-  "select_input_unset_button": "オプションを選択",
  "settings": {
    "developer_tab_title": "開発者",
    "feedback_tab_h4": "フィードバックを送信",
@@ -68,6 +64,5 @@
  },
  "unauthenticated_view_body": "アカウントがありませんか？ <2>アカウントを作成</2>",
  "unauthenticated_view_login_button": "アカウントにログイン",
-  "version": "バージョン：{{version}}",
-  "waiting_for_participants": "他の参加者を待機しています…"
+  "version": "バージョン：{{version}}"
 }
--- a/public/locales/lv/app.json
+++ b/public/locales/lv/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "Aizvērt",
-    "copy": "Ievietot starpliktuvē",
    "go": "Aiziet",
    "no": "Nē",
    "register": "Reģistrēties",
@@ -13,7 +12,7 @@
    "sign_out": "Atteikties",
    "submit": "Iesniegt"
  },
-  "analytics_notice": "Piedalīšanās šajā beta apliecina piekrišanu anonīmu datu ievākšanai, ko mēs izmantojam, lai uzlabotu izstrādājumu. Vairāk informācijas par datiem, ko mēs ievācam, var atrast mūsu <2>privātuma nosacījumos</2> un <6>sīkdatņu nosacījumos</6>.",
+  "analytics_notice": "Piedalīšanās šajā beta apliecina piekrišanu anonīmu datu ievākšanai, ko mēs izmantojam, lai uzlabotu izstrādājumu. Vairāk informācijas par datiem, ko mēs ievācam, var atrast mūsu <2>privātuma nosacījumos</2> un <5>sīkdatņu nosacījumos</5>.",
  "call_ended_view": {
    "body": "Tu tiki atvienots no zvana",
    "create_account_button": "Izveidot kontu",
@@ -29,7 +28,6 @@
    "audio": "Skaņa",
    "avatar": "Attēls",
    "camera": "Kamera",
-    "copied": "Ievietots starpliktuvē.",
    "display_name": "Attēlojamais vārds",
    "home": "Sākums",
    "loading": "Lādējas…",
@@ -75,9 +73,7 @@
  "register_confirm_password_label": "Apstiprināt paroli",
  "return_home_button": "Atgriezties sākuma ekrānā",
  "room_auth_view_eula_caption": "Klikšķināšana uz \"Pievienoties zvanam tagad\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
-  "room_auth_view_join_button": "Pievienoties zvanam tagad",
  "screenshare_button_label": "Kopīgot ekrānu",
-  "select_input_unset_button": "Atlasīt iespēju",
  "settings": {
    "developer_settings_label": "Izstrādātāja iestatījumi",
    "developer_settings_label_description": "Izstādīt izstrādātāja iestatījumus iestatījumu logā.",
@@ -90,7 +86,6 @@
    "feedback_tab_title": "Atsauksmes",
    "more_tab_title": "Vairāk",
    "opt_in_description": "<0></0><1></1>Savu piekrišanu var atsaukt ar atzīmes noņemšanu no šīs rūtiņas. Ja pašreiz atrodies zvanā, šis iestatījums stāsies spēkā zvana beigās.",
-    "show_connection_stats_label": "Rādīt savienojuma apkopojumu",
    "speaker_device_selection_label": "Runātājs"
  },
  "star_rating_input_label_one": "{{count}} zvaigzne",
@@ -99,6 +94,5 @@
  "unauthenticated_view_body": "Vēl neesi reģistrējies? <2>Izveidot kontu</2>",
  "unauthenticated_view_eula_caption": "Klikšķināšana uz \"Aiziet\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
  "unauthenticated_view_login_button": "Pieteikties kontā",
-  "version": "Versija: {{version}}",
-  "waiting_for_participants": "Gaida citus dalībniekus…"
+  "version": "Versija: {{version}}"
 }
--- a/public/locales/pl/app.json
+++ b/public/locales/pl/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "Zamknij",
-    "copy": "Kopiuj",
    "copy_link": "Kopiuj link",
    "go": "Przejdź",
    "invite": "Zaproś",
@@ -15,7 +14,7 @@
    "sign_out": "Wyloguj się",
    "submit": "Wyślij"
  },
-  "analytics_notice": "Uczestnicząc w tej becie, upoważniasz nas do zbierania anonimowych danych, które wykorzystamy do ulepszenia produktu. Dowiedz się więcej na temat danych, które zbieramy w naszej <2>Polityce prywatności</2> i <6>Polityce ciasteczek</6>.",
+  "analytics_notice": "Uczestnicząc w tej becie, upoważniasz nas do zbierania anonimowych danych, które wykorzystamy do ulepszenia produktu. Dowiedz się więcej na temat danych, które zbieramy w naszej <2>Polityce prywatności</2> i <5>Polityce ciasteczek</5>.",
  "app_selection_modal": {
    "continue_in_browser": "Kontynuuj w przeglądarce",
    "open_in_app": "Otwórz w aplikacji",
@@ -39,7 +38,6 @@
    "audio": "Dźwięk",
    "avatar": "Awatar",
    "camera": "Kamera",
-    "copied": "Skopiowano!",
    "display_name": "Nazwa wyświetlana",
    "encrypted": "Szyfrowane",
    "home": "Strona domowa",
@@ -99,9 +97,7 @@
  "register_confirm_password_label": "Potwierdź hasło",
  "return_home_button": "Powróć do strony głównej",
  "room_auth_view_eula_caption": "Klikając \"Dołącz teraz do rozmowy\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
-  "room_auth_view_join_button": "Dołącz do połączenia teraz",
  "screenshare_button_label": "Udostępnij ekran",
-  "select_input_unset_button": "Wybierz opcję",
  "settings": {
    "developer_settings_label": "Opcje programisty",
    "developer_settings_label_description": "Wyświetl opcje programisty w oknie ustawień.",
@@ -114,7 +110,6 @@
    "feedback_tab_title": "Opinia użytkownika",
    "more_tab_title": "Więcej",
    "opt_in_description": "<0></0><1></1>Możesz wycofać swoją zgodę poprzez odznaczenie tego pola. Jeśli już jesteś w trakcie rozmowy, opcja zostanie zastosowana po jej zakończeniu.",
-    "show_connection_stats_label": "Pokaż statystyki połączenia",
    "speaker_device_selection_label": "Głośnik"
  },
  "star_rating_input_label_one": "{{count}} gwiazdki",
@@ -128,9 +123,5 @@
  "unauthenticated_view_eula_caption": "Klikając \"Przejdź\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
  "unauthenticated_view_login_button": "Zaloguj się do swojego konta",
  "unmute_microphone_button_label": "Odcisz mikrofon",
-  "version": "Wersja: {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Ty"
-  },
-  "waiting_for_participants": "Oczekiwanie na pozostałych uczestników…"
+  "version": "Wersja: {{version}}"
 }
--- a/public/locales/ru/app.json
+++ b/public/locales/ru/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "Закрыть",
-    "copy": "Копировать",
    "go": "Далее",
    "no": "Нет",
    "register": "Зарегистрироваться",
@@ -13,7 +12,7 @@
    "sign_out": "Выйти",
    "submit": "Отправить"
  },
-  "analytics_notice": "Участвуя в этой бета-версии, вы соглашаетесь на сбор анонимных данных, которые мы используем для улучшения продукта. Более подробную информацию о том, какие данные мы отслеживаем, вы можете найти в нашей <2> Политике конфиденциальности</2> и нашей <6> Политике использования файлов cookie</6>.",
+  "analytics_notice": "Участвуя в этой бета-версии, вы соглашаетесь на сбор анонимных данных, которые мы используем для улучшения продукта. Более подробную информацию о том, какие данные мы отслеживаем, вы можете найти в нашей <2> Политике конфиденциальности</2> и нашей <5> Политике использования файлов cookie</5>.",
  "call_ended_view": {
    "create_account_button": "Создать аккаунт",
    "create_account_prompt": "<0>Почему бы не задать пароль, тем самым сохранив аккаунт?</0><1>Так вы можете оставить своё имя и задать аватар для будущих звонков.</1>",
@@ -27,7 +26,6 @@
    "audio": "Аудио",
    "avatar": "Аватар",
    "camera": "Камера",
-    "copied": "Скопировано!",
    "display_name": "Видимое имя",
    "home": "Начало",
    "loading": "Загрузка…",
@@ -69,9 +67,7 @@
  "register_auth_links": "<0>Уже есть аккаунт?</0><1><0>Войти с ним</0> или <2>Зайти как гость</2></1>",
  "register_confirm_password_label": "Подтвердите пароль",
  "return_home_button": "Вернуться в Начало",
-  "room_auth_view_join_button": "Присоединиться сейчас",
  "screenshare_button_label": "Поделиться экраном",
-  "select_input_unset_button": "Выберите вариант",
  "settings": {
    "developer_settings_label": "Настройки Разработчика",
    "developer_settings_label_description": "Раскрыть настройки разработчика в окне настроек.",
@@ -84,7 +80,6 @@
    "feedback_tab_title": "Отзыв",
    "more_tab_title": "Больше",
    "opt_in_description": "<0></0><1></1>Вы можете отозвать согласие, сняв этот флажок. Если вы в данный момент находитесь в разговоре, эта настройка вступит в силу по окончании разговора.",
-    "show_connection_stats_label": "Показать статистику соединения",
    "speaker_device_selection_label": "Динамик"
  },
  "star_rating_input_label_one": "{{count}} отмечен",
@@ -92,6 +87,5 @@
  "submitting": "Отправляем…",
  "unauthenticated_view_body": "Ещё не зарегистрированы? <2>Создайте аккаунт</2>",
  "unauthenticated_view_login_button": "Войдите в свой аккаунт",
-  "version": "Версия: {{version}}",
-  "waiting_for_participants": "Ожидание других участников…"
+  "version": "Версия: {{version}}"
 }
--- a/public/locales/sk/app.json
+++ b/public/locales/sk/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "Zatvoriť",
-    "copy": "Kopírovať",
    "copy_link": "Kopírovať odkaz",
    "go": "Prejsť",
    "invite": "Pozvať",
@@ -15,7 +14,7 @@
    "sign_out": "Odhlásiť sa",
    "submit": "Odoslať"
  },
-  "analytics_notice": "Účasťou v tejto beta verzii súhlasíte so zhromažďovaním anonymných údajov, ktoré použijeme na zlepšenie produktu. Viac informácií o tom, ktoré údaje sledujeme, nájdete v našich <2>Zásadách ochrany osobných údajov</2> a <6>Zásadách používania súborov cookie</6>.",
+  "analytics_notice": "Účasťou v tejto beta verzii súhlasíte so zhromažďovaním anonymných údajov, ktoré použijeme na zlepšenie produktu. Viac informácií o tom, ktoré údaje sledujeme, nájdete v našich <2>Zásadách ochrany osobných údajov</2> a <5>Zásadách používania súborov cookie</5>.",
  "app_selection_modal": {
    "continue_in_browser": "Pokračovať v prehliadači",
    "open_in_app": "Otvoriť v aplikácii",
@@ -38,7 +37,6 @@
  "common": {
    "avatar": "Obrázok",
    "camera": "Kamera",
-    "copied": "Skopírované!",
    "display_name": "Zobrazované meno",
    "encrypted": "Šifrované",
    "home": "Domov",
@@ -97,9 +95,7 @@
  "register_confirm_password_label": "Potvrdiť heslo",
  "return_home_button": "Návrat na domovskú obrazovku",
  "room_auth_view_eula_caption": "Kliknutím na \"Pripojiť sa k hovoru teraz\" súhlasíte s našou <2>Licenčnou zmluvou s koncovým používateľom (EULA)</2>",
-  "room_auth_view_join_button": "Pripojiť sa k hovoru teraz",
  "screenshare_button_label": "Zdieľať obrazovku",
-  "select_input_unset_button": "Vyberte možnosť",
  "settings": {
    "developer_settings_label": "Nastavenia pre vývojárov",
    "developer_settings_label_description": "Zobraziť nastavenia pre vývojárov v okne nastavení.",
@@ -112,7 +108,6 @@
    "feedback_tab_title": "Spätná väzba",
    "more_tab_title": "Viac",
    "opt_in_description": "<0></0><1></1>Súhlas môžete odvolať zrušením označenia tohto políčka. Ak práve prebieha hovor, toto nastavenie nadobudne platnosť po skončení hovoru.",
-    "show_connection_stats_label": "Zobraziť štatistiky pripojenia",
    "speaker_device_selection_label": "Reproduktor"
  },
  "star_rating_input_label_one": "{{count}} hviezdička",
@@ -126,9 +121,5 @@
  "unauthenticated_view_eula_caption": "Kliknutím na tlačidlo \"Prejsť\" vyjadrujete súhlas s našou <2>Licenčnou zmluvou s koncovým používateľom (EULA)</2>",
  "unauthenticated_view_login_button": "Prihláste sa do svojho konta",
  "unmute_microphone_button_label": "Zrušiť stlmenie mikrofónu",
-  "version": "Verzia: {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Vy"
-  },
-  "waiting_for_participants": "Čaká sa na ďalších účastníkov…"
+  "version": "Verzia: {{version}}"
 }
--- a/public/locales/tr/app.json
+++ b/public/locales/tr/app.json
@@ -16,7 +16,6 @@
  "common": {
    "audio": "Ses",
    "camera": "Kamera",
-    "copied": "Kopyalandı",
    "display_name": "Ekran adı",
    "home": "Ev",
    "loading": "Yükleniyor…",
@@ -49,9 +48,7 @@
  "register_auth_links": "<0>Mevcut hesabınız mı var?</0><1><0>Gir</0> yahut <2>Konuk girişi</2></1>",
  "register_confirm_password_label": "Parolayı tekrar edin",
  "return_home_button": "Ev ekranına geri dön",
-  "room_auth_view_join_button": "Aramaya katıl",
  "screenshare_button_label": "Ekran paylaş",
-  "select_input_unset_button": "Bir seçenek seç",
  "settings": {
    "developer_tab_title": "Geliştirici",
    "feedback_tab_h4": "Geri bildirim ver",
--- a/public/locales/uk/app.json
+++ b/public/locales/uk/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "Закрити",
-    "copy": "Копіювати",
    "copy_link": "Скопіювати посилання",
    "go": "Далі",
    "invite": "Запросити",
@@ -15,7 +14,7 @@
    "sign_out": "Вийти",
    "submit": "Надіслати"
  },
-  "analytics_notice": "Користуючись дочасним доступом, ви даєте згоду на збір анонімних даних, які ми використовуємо для вдосконалення продукту. Ви можете знайти більше інформації про те, які дані ми відстежуємо в нашій <2>Політиці Приватності</2> і нашій <6>Політиці про куки</6>.",
+  "analytics_notice": "Користуючись дочасним доступом, ви даєте згоду на збір анонімних даних, які ми використовуємо для вдосконалення продукту. Ви можете знайти більше інформації про те, які дані ми відстежуємо в нашій <2>Політиці Приватності</2> і нашій <5>Політиці про куки</5>.",
  "app_selection_modal": {
    "continue_in_browser": "Продовжити у браузері",
    "open_in_app": "Відкрити у застосунку",
@@ -39,7 +38,6 @@
    "audio": "Звук",
    "avatar": "Аватар",
    "camera": "Камера",
-    "copied": "Скопійовано!",
    "display_name": "Псевдонім",
    "encrypted": "Зашифровано",
    "home": "Домівка",
@@ -99,9 +97,7 @@
  "register_confirm_password_label": "Підтвердити пароль",
  "return_home_button": "Повернутися на екран домівки",
  "room_auth_view_eula_caption": "Натискаючи \"Приєднатися до виклику зараз\", ви погоджуєтеся з нашою <2>Ліцензійною угодою з кінцевим користувачем (EULA)</2>",
-  "room_auth_view_join_button": "Приєднатися до виклику зараз",
  "screenshare_button_label": "Поділитися екраном",
-  "select_input_unset_button": "Вибрати опцію",
  "settings": {
    "developer_settings_label": "Налаштування розробника",
    "developer_settings_label_description": "Відкрийте налаштування розробника у вікні налаштувань.",
@@ -114,7 +110,6 @@
    "feedback_tab_title": "Відгук",
    "more_tab_title": "Докладніше",
    "opt_in_description": "<0></0><1></1>Ви можете відкликати згоду, прибравши цей прапорець. Якщо ви зараз розмовляєте, це налаштування застосується після завершення виклику.",
-    "show_connection_stats_label": "Показати стан з'єднання",
    "speaker_device_selection_label": "Динамік"
  },
  "star_rating_input_label_one": "{{count}} зірок",
@@ -128,9 +123,5 @@
  "unauthenticated_view_eula_caption": "Натискаючи \"Далі\", ви погоджуєтеся з нашою <2>Ліцензійною угодою з кінцевим користувачем (EULA)</2>",
  "unauthenticated_view_login_button": "Увійдіть до свого облікового запису",
  "unmute_microphone_button_label": "Увімкнути мікрофон",
-  "version": "Версія: {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Ви"
-  },
-  "waiting_for_participants": "Очікування на інших учасників…"
+  "version": "Версія: {{version}}"
 }
--- a/public/locales/vi/app.json
+++ b/public/locales/vi/app.json
@@ -1,7 +1,6 @@
 {
  "action": {
    "close": "Đóng",
-    "copy": "Sao chép",
    "no": "Không",
    "register": "Đăng ký",
    "sign_in": "Đăng nhập",
@@ -19,7 +18,6 @@
    "audio": "Âm thanh",
    "avatar": "Ảnh đại diện",
    "camera": "Máy quay",
-    "copied": "Đã sao chép!",
    "display_name": "Tên hiển thị",
    "loading": "Đang tải…",
    "microphone": "Micrô",
@@ -55,7 +53,6 @@
  },
  "register_auth_links": "<0>Đã có tài khoản?</0><1><0>Đăng nhập</0> Hay <2>Tham gia dưới tên Khách</2></1>",
  "register_confirm_password_label": "Xác nhận mật khẩu",
-  "room_auth_view_join_button": "Tham gia cuộc gọi",
  "screenshare_button_label": "Chia sẻ màn hình",
  "settings": {
    "developer_settings_label": "Cài đặt phát triển",
@@ -70,6 +67,5 @@
  "submitting": "Đang gửi…",
  "unauthenticated_view_body": "Chưa đăng ký? <2>Tạo tài khoản</2>",
  "unauthenticated_view_login_button": "Đăng nhập vào tài khoản của bạn",
-  "version": "Phiên bản: {{version}}",
-  "waiting_for_participants": "Đang đợi những người khác…"
+  "version": "Phiên bản: {{version}}"
 }
--- a/public/locales/zh-Hans/app.json
+++ b/public/locales/zh-Hans/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "关闭",
-    "copy": "复制",
    "go": "开始",
    "no": "否",
    "register": "注册",
@@ -13,7 +12,7 @@
    "sign_out": "登出",
    "submit": "提交"
  },
-  "analytics_notice": "参与测试即表示您同意我们收集匿名数据，用于改进产品。您可以在我们的<2>隐私政策</2>和<6>Cookie政策</6>中找到有关我们跟踪哪些数据以及更多信息。",
+  "analytics_notice": "参与测试即表示您同意我们收集匿名数据，用于改进产品。您可以在我们的<2>隐私政策</2>和<5>Cookie政策</5>中找到有关我们跟踪哪些数据以及更多信息。",
  "app_selection_modal": {
    "continue_in_browser": "在浏览器中继续",
    "open_in_app": "在应用中打开",
@@ -37,7 +36,6 @@
    "audio": "音频",
    "avatar": "头像",
    "camera": "摄像头",
-    "copied": "已复制！",
    "display_name": "显示名称",
    "encrypted": "已加密",
    "home": "主页",
@@ -92,9 +90,7 @@
  "register_confirm_password_label": "确认密码",
  "return_home_button": "返回主页",
  "room_auth_view_eula_caption": "点击 \"加入通话\"，即表示您同意我们的<2>最终用户许可协议 (EULA)</2>",
-  "room_auth_view_join_button": "现在加入通话",
  "screenshare_button_label": "屏幕共享",
-  "select_input_unset_button": "选择一个选项",
  "settings": {
    "developer_settings_label": "开发者设置",
    "developer_settings_label_description": "在设置中显示开发者设置。",
@@ -107,7 +103,6 @@
    "feedback_tab_title": "反馈",
    "more_tab_title": "更多",
    "opt_in_description": "<0></0><1></1>您可以取消选中复选框来撤回同意。如果正在通话中，此设置将在通话结束时生效。",
-    "show_connection_stats_label": "显示连接统计信息",
    "speaker_device_selection_label": "发言人"
  },
  "star_rating_input_label_one": "{{count}} 个星",
@@ -121,9 +116,5 @@
  "unauthenticated_view_eula_caption": "点击 \"开始\"，即表示您同意我们的<2>最终用户许可协议 (EULA)</2>",
  "unauthenticated_view_login_button": "登录你的账户",
  "unmute_microphone_button_label": "取消麦克风静音",
-  "version": "版本：{{version}}",
-  "video_tile": {
-    "sfu_participant_local": "你"
-  },
-  "waiting_for_participants": "等待其他参与者……"
+  "version": "版本：{{version}}"
 }
--- a/public/locales/zh-Hant/app.json
+++ b/public/locales/zh-Hant/app.json
@@ -4,7 +4,6 @@
  },
  "action": {
    "close": "關閉",
-    "copy": "複製",
    "copy_link": "複製連結",
    "go": "前往",
    "invite": "邀請",
@@ -15,7 +14,7 @@
    "sign_out": "登出",
    "submit": "遞交"
  },
-  "analytics_notice": "參與此測試版即表示您同意蒐集匿名資料，我們使用這些資料來改進產品。您可以在我們的<2>隱私政策</2>與我們的 <6>Cookie 政策</6> 中找到關於我們追蹤哪些資料的更多資訊。",
+  "analytics_notice": "參與此測試版即表示您同意蒐集匿名資料，我們使用這些資料來改進產品。您可以在我們的<2>隱私政策</2>與我們的 <5>Cookie 政策</5> 中找到關於我們追蹤哪些資料的更多資訊。",
  "app_selection_modal": {
    "continue_in_browser": "在瀏覽器中繼續",
    "open_in_app": "在應用程式中開啟",
@@ -39,7 +38,6 @@
    "audio": "語音",
    "avatar": "大頭照",
    "camera": "相機",
-    "copied": "已複製！",
    "display_name": "顯示名稱",
    "encrypted": "已加密",
    "home": "首頁",
@@ -99,9 +97,7 @@
  "register_confirm_password_label": "確認密碼",
  "return_home_button": "回到首頁",
  "room_auth_view_eula_caption": "點擊「立刻加入通話」即表示您同意我們的<2>終端使用者授權協議 (EULA)</2>",
-  "room_auth_view_join_button": "現在加入通話",
  "screenshare_button_label": "分享畫面",
-  "select_input_unset_button": "選擇一個選項",
  "settings": {
    "developer_settings_label": "開發者設定",
    "developer_settings_label_description": "在設定視窗中顯示開發者設定。",
@@ -114,7 +110,6 @@
    "feedback_tab_title": "回饋",
    "more_tab_title": "更多",
    "opt_in_description": "<0></0><1></1>您可以透過取消核取此方塊來撤回同意。若您目前正在通話中，此設定將在通話結束時生效。",
-    "show_connection_stats_label": "顯示連線統計資料",
    "speaker_device_selection_label": "發言者"
  },
  "star_rating_input_label_one": "{{count}} 個星星",
@@ -128,9 +123,5 @@
  "unauthenticated_view_eula_caption": "點擊「前往」即表示您同意我們的<2>終端使用者授權協議 (EULA)</2>",
  "unauthenticated_view_login_button": "登入您的帳號",
  "unmute_microphone_button_label": "將麥克風取消靜音",
-  "version": "版本： {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "您"
-  },
-  "waiting_for_participants": "等待其他參加者…"
+  "version": "版本： {{version}}"
 }
--- a/src/button/RaisedHandToggleButton.tsx
+++ b/src/button/RaisedHandToggleButton.tsx
@@ -62,7 +62,7 @@ export function RaiseHandToggleButton({
  client,
  rtcSession,
 }: RaisedHandToggleButtonProps): ReactNode {
-  const { raisedHands, myReactionId } = useReactions();
+  const { raisedHands, lowerHand } = useReactions();
  const [busy, setBusy] = useState(false);
  const userId = client.getUserId()!;
  const isHandRaised = !!raisedHands[userId];
@@ -71,16 +71,9 @@ export function RaiseHandToggleButton({
  const toggleRaisedHand = useCallback(() => {
    const raiseHand = async (): Promise<void> => {
      if (isHandRaised) {
-        if (!myReactionId) {
-          logger.warn(`Hand raised but no reaction event to redact!`);
-          return;
-        }
        try {
          setBusy(true);
-          await client.redactEvent(rtcSession.room.roomId, myReactionId);
-          logger.debug("Redacted raise hand event");
-        } catch (ex) {
-          logger.error("Failed to redact reaction event", myReactionId, ex);
+          await lowerHand();
        } finally {
          setBusy(false);
        }
@@ -118,9 +111,9 @@ export function RaiseHandToggleButton({
    client,
    isHandRaised,
    memberships,
-    myReactionId,
    rtcSession.room.roomId,
    userId,
+    lowerHand,
  ]);

  return (
--- a/src/config/ConfigOptions.ts
+++ b/src/config/ConfigOptions.ts
@@ -122,6 +122,9 @@ export const DEFAULT_CONFIG: ResolvedConfigOptions = {
      server_name: "localhost",
    },
  },
+  features: {
+    feature_use_device_session_member_events: true,
+  },
  eula: "https://static.element.io/legal/online-EULA.pdf",
  media_devices: {
    enable_audio: true,
--- a/src/grid/CallLayout.ts
+++ b/src/grid/CallLayout.ts
@@ -8,8 +8,8 @@ Please see LICENSE in the repository root for full details.
 import { BehaviorSubject, Observable } from "rxjs";
 import { ComponentType } from "react";

-import { MediaViewModel, UserMediaViewModel } from "../state/MediaViewModel";
 import { LayoutProps } from "./Grid";
+import { TileViewModel } from "../state/TileViewModel";

 export interface Bounds {
  width: number;
@@ -42,19 +42,6 @@ export interface CallLayoutInputs {
  pipAlignment: BehaviorSubject<Alignment>;
 }

-export interface GridTileModel {
-  type: "grid";
-  vm: UserMediaViewModel;
-}
-
-export interface SpotlightTileModel {
-  type: "spotlight";
-  vms: MediaViewModel[];
-  maximised: boolean;
-}
-
-export type TileModel = GridTileModel | SpotlightTileModel;
-
 export interface CallLayoutOutputs<Model> {
  /**
   * Whether the scrolling layer of the layout should appear on top.
@@ -63,11 +50,11 @@ export interface CallLayoutOutputs<Model> {
  /**
   * The visually fixed (non-scrolling) layer of the layout.
   */
-  fixed: ComponentType<LayoutProps<Model, TileModel, HTMLDivElement>>;
+  fixed: ComponentType<LayoutProps<Model, TileViewModel, HTMLDivElement>>;
  /**
   * The layer of the layout that can overflow and be scrolled.
   */
-  scrolling: ComponentType<LayoutProps<Model, TileModel, HTMLDivElement>>;
+  scrolling: ComponentType<LayoutProps<Model, TileViewModel, HTMLDivElement>>;
 }

 /**
--- a/src/grid/Grid.tsx
+++ b/src/grid/Grid.tsx
@@ -24,6 +24,7 @@ import {
  createContext,
  forwardRef,
  memo,
+  useCallback,
  useContext,
  useEffect,
  useMemo,
@@ -33,6 +34,8 @@ import {
 import useMeasure from "react-use-measure";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
+import { useObservableEagerState } from "observable-hooks";
+import { fromEvent, map, startWith } from "rxjs";

 import styles from "./Grid.module.css";
 import { useMergedRefs } from "../useMergedRefs";
@@ -51,6 +54,7 @@ interface Tile<Model> {
  id: string;
  model: Model;
  onDrag: DragCallback | undefined;
+  setVisible: (visible: boolean) => void;
 }

 type PlacedTile<Model> = Tile<Model> & Rect;
@@ -84,6 +88,7 @@ interface SlotProps<Model> extends Omit<ComponentProps<"div">, "onDrag"> {
  id: string;
  model: Model;
  onDrag?: DragCallback;
+  onVisibilityChange?: (visible: boolean) => void;
  style?: CSSProperties;
  className?: string;
 }
@@ -131,6 +136,11 @@ export function useUpdateLayout(): void {
  );
 }

+const windowHeightObservable = fromEvent(window, "resize").pipe(
+  startWith(null),
+  map(() => window.innerHeight),
+);
+
 export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
  ref: LegacyRef<R>;
  model: LayoutModel;
@@ -232,6 +242,7 @@ export function Grid<
  const [gridRoot, gridRef2] = useState<HTMLElement | null>(null);
  const gridRef = useMergedRefs<HTMLElement>(gridRef1, gridRef2);

+  const windowHeight = useObservableEagerState(windowHeightObservable);
  const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
  const [generation, setGeneration] = useState<number | null>(null);
  const tiles = useInitial(() => new Map<string, Tile<TileModel>>());
@@ -239,12 +250,34 @@ export function Grid<

  const Slot: FC<SlotProps<TileModel>> = useMemo(
    () =>
-      function Slot({ id, model, onDrag, style, className, ...props }) {
+      function Slot({
+        id,
+        model,
+        onDrag,
+        onVisibilityChange,
+        style,
+        className,
+        ...props
+      }) {
        const ref = useRef<HTMLDivElement | null>(null);
+        const prevVisible = useRef<boolean | null>(null);
+        const setVisible = useCallback(
+          (visible: boolean) => {
+            if (
+              onVisibilityChange !== undefined &&
+              visible !== prevVisible.current
+            ) {
+              onVisibilityChange(visible);
+              prevVisible.current = visible;
+            }
+          },
+          [onVisibilityChange],
+        );
+
        useEffect(() => {
-          tiles.set(id, { id, model, onDrag });
+          tiles.set(id, { id, model, onDrag, setVisible });
          return (): void => void tiles.delete(id);
-        }, [id, model, onDrag]);
+        }, [id, model, onDrag, setVisible]);

        return (
          <div
@@ -302,6 +335,17 @@ export function Grid<
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [gridRoot, layoutRoot, tiles, gridBounds, generation]);

+  // The height of the portion of the grid visible at any given time
+  const visibleHeight = useMemo(
+    () => Math.min(gridBounds.bottom, windowHeight) - gridBounds.top,
+    [gridBounds, windowHeight],
+  );
+
+  useEffect(() => {
+    for (const tile of placedTiles)
+      tile.setVisible(tile.y + tile.height <= visibleHeight);
+  }, [placedTiles, visibleHeight]);
+
  // 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);
--- a/src/grid/GridLayout.tsx
+++ b/src/grid/GridLayout.tsx
@@ -12,12 +12,7 @@ import { useObservableEagerState } from "observable-hooks";
 import { GridLayout as GridLayoutModel } from "../state/CallViewModel";
 import styles from "./GridLayout.module.css";
 import { useInitial } from "../useInitial";
-import {
-  CallLayout,
-  GridTileModel,
-  TileModel,
-  arrangeTiles,
-} from "./CallLayout";
+import { CallLayout, arrangeTiles } from "./CallLayout";
 import { DragCallback, useUpdateLayout } from "./Grid";

 interface GridCSSProperties extends CSSProperties {
@@ -49,15 +44,6 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
        ),
      ),
    );
-    const tileModel: TileModel | undefined = useMemo(
-      () =>
-        model.spotlight && {
-          type: "spotlight",
-          vms: model.spotlight,
-          maximised: false,
-        },
-      [model.spotlight],
-    );

    const onDragSpotlight: DragCallback = useCallback(
      ({ xRatio, yRatio }) =>
@@ -70,11 +56,11 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({

    return (
      <div ref={ref} className={styles.fixed}>
-        {tileModel && (
+        {model.spotlight && (
          <Slot
            className={styles.slot}
            id="spotlight"
-            model={tileModel}
+            model={model.spotlight}
            onDrag={onDragSpotlight}
            data-block-alignment={alignment.block}
            data-inline-alignment={alignment.inline}
@@ -93,11 +79,6 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
      [width, minHeight, model.grid.length],
    );

-    const tileModels: GridTileModel[] = useMemo(
-      () => model.grid.map((vm) => ({ type: "grid", vm })),
-      [model.grid],
-    );
-
    return (
      <div
        ref={ref}
@@ -111,8 +92,14 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
          } as GridCSSProperties
        }
      >
-        {tileModels.map((m) => (
-          <Slot key={m.vm.id} className={styles.slot} id={m.vm.id} model={m} />
+        {model.grid.map((m) => (
+          <Slot
+            key={m.id}
+            className={styles.slot}
+            id={m.id}
+            model={m}
+            onVisibilityChange={m.setVisible}
+          />
        ))}
      </div>
    );
--- a/src/grid/OneOnOneLayout.tsx
+++ b/src/grid/OneOnOneLayout.tsx
@@ -10,7 +10,7 @@ import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";

 import { OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewModel";
-import { CallLayout, GridTileModel, arrangeTiles } from "./CallLayout";
+import { CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneLayout.module.css";
 import { DragCallback, useUpdateLayout } from "./Grid";

@@ -38,15 +38,6 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
      [width, height],
    );

-    const remoteTileModel: GridTileModel = useMemo(
-      () => ({ type: "grid", vm: model.remote }),
-      [model.remote],
-    );
-    const localTileModel: GridTileModel = useMemo(
-      () => ({ type: "grid", vm: model.local }),
-      [model.local],
-    );
-
    const onDragLocalTile: DragCallback = useCallback(
      ({ xRatio, yRatio }) =>
        pipAlignment.next({
@@ -59,16 +50,18 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
    return (
      <div ref={ref} className={styles.layer}>
        <Slot
-          id={remoteTileModel.vm.id}
-          model={remoteTileModel}
+          id={model.remote.id}
+          model={model.remote}
+          onVisibilityChange={model.remote.setVisible}
          className={styles.container}
          style={{ width: tileWidth, height: tileHeight }}
        >
          <Slot
            className={classNames(styles.slot, styles.local)}
-            id={localTileModel.vm.id}
-            model={localTileModel}
+            id={model.local.id}
+            model={model.local}
            onDrag={onDragLocalTile}
+            onVisibilityChange={model.local.setVisible}
            data-block-alignment={pipAlignmentValue.block}
            data-inline-alignment={pipAlignmentValue.inline}
          />
--- a/src/grid/SpotlightExpandedLayout.tsx
+++ b/src/grid/SpotlightExpandedLayout.tsx
@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */

-import { forwardRef, useCallback, useMemo } from "react";
+import { forwardRef, useCallback } from "react";
 import { useObservableEagerState } from "observable-hooks";

 import { SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
-import { CallLayout, GridTileModel, SpotlightTileModel } from "./CallLayout";
+import { CallLayout } from "./CallLayout";
 import { DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";

@@ -27,17 +27,13 @@ export const makeSpotlightExpandedLayout: CallLayout<
    ref,
  ) {
    useUpdateLayout();
-    const spotlightTileModel: SpotlightTileModel = useMemo(
-      () => ({ type: "spotlight", vms: model.spotlight, maximised: true }),
-      [model.spotlight],
-    );

    return (
      <div ref={ref} className={styles.layer}>
        <Slot
          className={styles.spotlight}
          id="spotlight"
-          model={spotlightTileModel}
+          model={model.spotlight}
        />
      </div>
    );
@@ -50,11 +46,6 @@ export const makeSpotlightExpandedLayout: CallLayout<
    useUpdateLayout();
    const pipAlignmentValue = useObservableEagerState(pipAlignment);

-    const pipTileModel: GridTileModel | undefined = useMemo(
-      () => model.pip && { type: "grid", vm: model.pip },
-      [model.pip],
-    );
-
    const onDragPip: DragCallback = useCallback(
      ({ xRatio, yRatio }) =>
        pipAlignment.next({
@@ -66,12 +57,13 @@ export const makeSpotlightExpandedLayout: CallLayout<

    return (
      <div ref={ref} className={styles.layer}>
-        {pipTileModel && (
+        {model.pip && (
          <Slot
            className={styles.pip}
-            id="pip"
-            model={pipTileModel}
+            id={model.pip.id}
+            model={model.pip}
            onDrag={onDragPip}
+            onVisibilityChange={model.pip.setVisible}
            data-block-alignment={pipAlignmentValue.block}
            data-inline-alignment={pipAlignmentValue.inline}
          />
--- a/src/grid/SpotlightLandscapeLayout.tsx
+++ b/src/grid/SpotlightLandscapeLayout.tsx
@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */

-import { forwardRef, useMemo } from "react";
+import { forwardRef } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";

-import { CallLayout, GridTileModel, TileModel } from "./CallLayout";
+import { CallLayout } from "./CallLayout";
 import { SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightLandscapeLayout.module.css";
 import { useUpdateLayout } from "./Grid";
@@ -30,19 +30,15 @@ export const makeSpotlightLandscapeLayout: CallLayout<
  ) {
    useUpdateLayout();
    useObservableEagerState(minBounds);
-    const tileModel: TileModel = useMemo(
-      () => ({
-        type: "spotlight",
-        vms: model.spotlight,
-        maximised: false,
-      }),
-      [model.spotlight],
-    );

    return (
      <div ref={ref} className={styles.layer}>
        <div className={styles.spotlight}>
-          <Slot className={styles.slot} id="spotlight" model={tileModel} />
+          <Slot
+            className={styles.slot}
+            id="spotlight"
+            model={model.spotlight}
+          />
        </div>
        <div className={styles.grid} />
      </div>
@@ -55,25 +51,24 @@ export const makeSpotlightLandscapeLayout: CallLayout<
  ) {
    useUpdateLayout();
    useObservableEagerState(minBounds);
-    const tileModels: GridTileModel[] = useMemo(
-      () => model.grid.map((vm) => ({ type: "grid", vm })),
-      [model.grid],
-    );
+    const withIndicators =
+      useObservableEagerState(model.spotlight.media).length > 1;

    return (
      <div ref={ref} className={styles.layer}>
        <div
          className={classNames(styles.spotlight, {
-            [styles.withIndicators]: model.spotlight.length > 1,
+            [styles.withIndicators]: withIndicators,
          })}
        />
        <div className={styles.grid}>
-          {tileModels.map((m) => (
+          {model.grid.map((m) => (
            <Slot
-              key={m.vm.id}
+              key={m.id}
              className={styles.slot}
-              id={m.vm.id}
+              id={m.id}
              model={m}
+              onVisibilityChange={m.setVisible}
            />
          ))}
        </div>
--- a/src/grid/SpotlightPortraitLayout.tsx
+++ b/src/grid/SpotlightPortraitLayout.tsx
@@ -5,16 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */

-import { CSSProperties, forwardRef, useMemo } from "react";
+import { CSSProperties, forwardRef } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";

-import {
-  CallLayout,
-  GridTileModel,
-  TileModel,
-  arrangeTiles,
-} from "./CallLayout";
+import { CallLayout, arrangeTiles } from "./CallLayout";
 import { SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightPortraitLayout.module.css";
 import { useUpdateLayout } from "./Grid";
@@ -40,19 +35,15 @@ export const makeSpotlightPortraitLayout: CallLayout<
    ref,
  ) {
    useUpdateLayout();
-    const tileModel: TileModel = useMemo(
-      () => ({
-        type: "spotlight",
-        vms: model.spotlight,
-        maximised: true,
-      }),
-      [model.spotlight],
-    );

    return (
      <div ref={ref} className={styles.layer}>
        <div className={styles.spotlight}>
-          <Slot className={styles.slot} id="spotlight" model={tileModel} />
+          <Slot
+            className={styles.slot}
+            id="spotlight"
+            model={model.spotlight}
+          />
        </div>
      </div>
    );
@@ -71,10 +62,8 @@ export const makeSpotlightPortraitLayout: CallLayout<
      width,
      model.grid.length,
    );
-    const tileModels: GridTileModel[] = useMemo(
-      () => model.grid.map((vm) => ({ type: "grid", vm })),
-      [model.grid],
-    );
+    const withIndicators =
+      useObservableEagerState(model.spotlight.media).length > 1;

    return (
      <div
@@ -90,16 +79,17 @@ export const makeSpotlightPortraitLayout: CallLayout<
      >
        <div
          className={classNames(styles.spotlight, {
-            [styles.withIndicators]: model.spotlight.length > 1,
+            [styles.withIndicators]: withIndicators,
          })}
        />
        <div className={styles.grid}>
-          {tileModels.map((m) => (
+          {model.grid.map((m) => (
            <Slot
-              key={m.vm.id}
+              key={m.id}
              className={styles.slot}
-              id={m.vm.id}
+              id={m.id}
              model={m}
+              onVisibilityChange={m.setVisible}
            />
          ))}
        </div>
--- a/src/reactions/RaisedHandIndicator.module.css
+++ b/src/reactions/RaisedHandIndicator.module.css
@@ -5,6 +5,11 @@
  color: var(--cpd-color-icon-secondary);
 }

+.button {
+  display: contents;
+  background: none;
+}
+
 .raisedHandWidget > p {
  padding: none;
  margin-top: auto;
@@ -42,11 +47,11 @@
  height: var(--cpd-space-6x);
  display: inline-block;
  text-align: center;
-  font-size: 16px;
+  font-size: 1.3em;
 }

 .raisedHandLarge > span {
  width: var(--cpd-space-8x);
  height: var(--cpd-space-8x);
-  font-size: 22px;
+  font-size: 1.9em;
 }
--- a/src/reactions/RaisedHandIndicator.test.tsx
+++ b/src/reactions/RaisedHandIndicator.test.tsx
@@ -40,4 +40,16 @@ describe("RaisedHandIndicator", () => {
    );
    expect(container.firstChild).toMatchSnapshot();
  });
+  test("can be clicked", () => {
+    const dateTime = new Date();
+    let wasClicked = false;
+    const { getByRole } = render(
+      <RaisedHandIndicator
+        raisedHandTime={dateTime}
+        onClick={() => (wasClicked = true)}
+      />,
+    );
+    getByRole("button").click();
+    expect(wasClicked).toBe(true);
+  });
 });
--- a/src/reactions/RaisedHandIndicator.tsx
+++ b/src/reactions/RaisedHandIndicator.tsx
@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */

-import { ReactNode, useEffect, useState } from "react";
+import {
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import classNames from "classnames";
 import "@formatjs/intl-durationformat/polyfill";
 import { DurationFormat } from "@formatjs/intl-durationformat";
@@ -23,13 +29,26 @@ export function RaisedHandIndicator({
  raisedHandTime,
  minature,
  showTimer,
+  onClick,
 }: {
  raisedHandTime?: Date;
  minature?: boolean;
  showTimer?: boolean;
+  onClick?: () => void;
 }): ReactNode {
  const [raisedHandDuration, setRaisedHandDuration] = useState("");

+  const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (event) => {
+      if (!onClick) {
+        return;
+      }
+      event.preventDefault();
+      onClick();
+    },
+    [onClick],
+  );
+
  // This effect creates a simple timer effect.
  useEffect(() => {
    if (!raisedHandTime || !showTimer) {
@@ -52,26 +71,40 @@ export function RaisedHandIndicator({
    return (): void => clearInterval(to);
  }, [setRaisedHandDuration, raisedHandTime, showTimer]);

-  if (raisedHandTime) {
-    return (
+  if (!raisedHandTime) {
+    return;
+  }
+
+  const content = (
+    <div
+      className={classNames(styles.raisedHandWidget, {
+        [styles.raisedHandWidgetLarge]: !minature,
+      })}
+    >
      <div
-        className={classNames(styles.raisedHandWidget, {
-          [styles.raisedHandWidgetLarge]: !minature,
+        className={classNames(styles.raisedHand, {
+          [styles.raisedHandLarge]: !minature,
        })}
      >
-        <div
-          className={classNames(styles.raisedHand, {
-            [styles.raisedHandLarge]: !minature,
-          })}
-        >
-          <span role="img" aria-label="raised hand">
-            ✋
-          </span>
-        </div>
-        {showTimer && <p>{raisedHandDuration}</p>}
+        <span role="img" aria-label="raised hand">
+          ✋
+        </span>
      </div>
+      {showTimer && <p>{raisedHandDuration}</p>}
+    </div>
+  );
+
+  if (onClick) {
+    return (
+      <button
+        aria-label="lower raised hand"
+        className={styles.button}
+        onClick={clickCallback}
+      >
+        {content}
+      </button>
    );
  }

-  return null;
+  return content;
 }
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -28,8 +28,8 @@ import {
 import useMeasure from "react-use-measure";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import classNames from "classnames";
-import { BehaviorSubject, of } from "rxjs";
-import { useObservableEagerState } from "observable-hooks";
+import { BehaviorSubject, map } from "rxjs";
+import { useObservable, useObservableEagerState } from "observable-hooks";
 import { logger } from "matrix-js-sdk/src/logger";

 import LogoMark from "../icons/LogoMark.svg?react";
@@ -65,7 +65,6 @@ import { ECConnectionState } from "../livekit/useECConnectionState";
 import { useOpenIDSFU } from "../livekit/openIDSFU";
 import { CallViewModel, GridMode, Layout } from "../state/CallViewModel";
 import { Grid, TileProps } from "../grid/Grid";
-import { useObservable } from "../state/useObservable";
 import { useInitial } from "../useInitial";
 import { SpotlightTile } from "../tile/SpotlightTile";
 import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
@@ -73,7 +72,6 @@ import { E2eeType } from "../e2ee/e2eeType";
 import { makeGridLayout } from "../grid/GridLayout";
 import {
  CallLayoutOutputs,
-  TileModel,
  defaultPipAlignment,
  defaultSpotlightAlignment,
 } from "../grid/CallLayout";
@@ -81,6 +79,7 @@ import { makeOneOnOneLayout } from "../grid/OneOnOneLayout";
 import { makeSpotlightExpandedLayout } from "../grid/SpotlightExpandedLayout";
 import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout";
 import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
+import { GridTileViewModel, TileViewModel } from "../state/TileViewModel";
 import { ReactionsProvider, useReactions } from "../useReactions";
 import handSoundOgg from "../sound/raise_hand.ogg?url";
 import handSoundMp3 from "../sound/raise_hand.mp3?url";
@@ -103,7 +102,10 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
    sfuConfig,
    props.e2eeSystem,
  );
-  const connStateObservable = useObservable(connState);
+  const connStateObservable = useObservable(
+    (inputs) => inputs.pipe(map(([connState]) => connState)),
+    [connState],
+  );
  const [vm, setVm] = useState<CallViewModel | null>(null);

  useEffect(() => {
@@ -304,7 +306,10 @@ export const InCallView: FC<InCallViewProps> = ({
      windowMode,
    ],
  );
-  const gridBoundsObservable = useObservable(gridBounds);
+  const gridBoundsObservable = useObservable(
+    (inputs) => inputs.pipe(map(([gridBounds]) => gridBounds)),
+    [gridBounds],
+  );

  const spotlightAlignment = useInitial(
    () => new BehaviorSubject(defaultSpotlightAlignment),
@@ -375,7 +380,7 @@ export const InCallView: FC<InCallViewProps> = ({
    () =>
      forwardRef<
        HTMLDivElement,
-        PropsWithoutRef<TileProps<TileModel, HTMLDivElement>>
+        PropsWithoutRef<TileProps<TileViewModel, HTMLDivElement>>
      >(function Tile(
        { className, style, targetWidth, targetHeight, model },
        ref,
@@ -384,13 +389,6 @@ export const InCallView: FC<InCallViewProps> = ({
        const onToggleExpanded = useObservableEagerState(
          vm.toggleSpotlightExpanded,
        );
-        const showVideo = useObservableEagerState(
-          useMemo(
-            () =>
-              model.type === "grid" ? vm.showGridVideo(model.vm) : of(true),
-            [model],
-          ),
-        );
        const showSpeakingIndicatorsValue = useObservableEagerState(
          vm.showSpeakingIndicators,
        );
@@ -398,23 +396,21 @@ export const InCallView: FC<InCallViewProps> = ({
          vm.showSpotlightIndicators,
        );

-        return model.type === "grid" ? (
+        return model instanceof GridTileViewModel ? (
          <GridTile
            ref={ref}
-            vm={model.vm}
+            vm={model}
            onOpenProfile={openProfile}
            targetWidth={targetWidth}
            targetHeight={targetHeight}
            className={classNames(className, styles.tile)}
            style={style}
-            showVideo={showVideo}
            showSpeakingIndicators={showSpeakingIndicatorsValue}
          />
        ) : (
          <SpotlightTile
            ref={ref}
-            vms={model.vms}
-            maximised={model.maximised}
+            vm={model}
            expanded={spotlightExpanded}
            onToggleExpanded={onToggleExpanded}
            targetWidth={targetWidth}
@@ -448,8 +444,7 @@ export const InCallView: FC<InCallViewProps> = ({
      return (
        <SpotlightTile
          className={classNames(styles.tile, styles.maximised)}
-          vms={layout.spotlight!}
-          maximised
+          vm={layout.spotlight}
          expanded
          onToggleExpanded={null}
          targetWidth={gridBounds.height}
--- a/src/rtcSessionHelper.test.ts
+++ b/src/rtcSessionHelper.test.ts
@@ -81,6 +81,9 @@ test("It joins the correct Session", async () => {
      focus_selection: "oldest_membership",
      type: "livekit",
    },
-    { manageMediaKeys: false },
+    {
+      manageMediaKeys: false,
+      useLegacyMemberEvents: false,
+    },
  );
 });
--- a/src/state/CallViewModel.test.ts
+++ b/src/state/CallViewModel.test.ts
@@ -6,19 +6,25 @@ Please see LICENSE in the repository root for full details.
 */

 import { test, vi, onTestFinished } from "vitest";
-import { map, Observable, of } from "rxjs";
+import {
+  combineLatest,
+  debounceTime,
+  distinctUntilChanged,
+  map,
+  Observable,
+  of,
+  switchMap,
+} from "rxjs";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import {
  ConnectionState,
  LocalParticipant,
+  Participant,
  RemoteParticipant,
 } from "livekit-client";
 import * as ComponentsCore from "@livekit/components-core";
-import {
-  CallMembership,
-  MatrixRTCSession,
-  MatrixRTCSessionEvent,
-} from "matrix-js-sdk/src/matrixrtc";
+import { isEqual } from "lodash";
+import { CallMembership, MatrixRTCSession, MatrixRTCSessionEvent } from "matrix-js-sdk/src/matrixrtc";

 import { CallViewModel, Layout } from "./CallViewModel";
 import {
@@ -27,7 +33,6 @@ import {
  mockMatrixRoom,
  mockRoomMember,
  mockRemoteParticipant,
-  OurRunHelpers,
  withTestScheduler,
  mockMembership,
 } from "../utils/test";
@@ -40,41 +45,40 @@ import { MockRoom, MockRTCSession } from "../useReactions.test";

 vi.mock("@livekit/components-core");

-const carolId = "@carol:example.org";
-const carolDev = "CCCC";
-const aliceId = "@alice:example.org";
+const alice = mockRoomMember({ userId: "@alice:example.org" });
+const bob = mockRoomMember({ userId: "@bob:example.org" });
+const carol = mockRoomMember({ userId: "@carol:example.org" });
+const dave = mockRoomMember({ userId: "@dave:example.org" });
+
 const aliceDev = "AAAA";
-const aliceRTCId = aliceId + ":" + aliceDev;
-
-const bobId = "@bob:example.org";
 const bobDev = "BBBB";
-const bobRTCId = bobId + ":" + bobDev;
-
-const alice = mockRoomMember({ userId: aliceId });
-const bob = mockRoomMember({ userId: bobId });
-const carol = mockRoomMember({ userId: carolId });
+const carolDev = "CCCC";
+const daveDev = "DDDD";
+const aliceId = `${alice.userId}:${aliceDev}`;
+const bobId = `${bob.userId}:${bobDev}`;
+const carolId = `${carol.userId}:${carolDev}`;
+const daveId = `${dave.userId}:${daveDev}`;

 const localParticipant = mockLocalParticipant({ identity: "" });
-const aliceParticipant = mockRemoteParticipant({ identity: aliceRTCId });
+
+const aliceParticipant = mockRemoteParticipant({ identity: aliceId });
 const aliceSharingScreen = mockRemoteParticipant({
-  identity: aliceRTCId,
+  identity: aliceId,
  isScreenShareEnabled: true,
 });
-const bobParticipant = mockRemoteParticipant({ identity: bobRTCId });
+const bobParticipant = mockRemoteParticipant({ identity: bobId });
 const bobSharingScreen = mockRemoteParticipant({
-  identity: bobRTCId,
+  identity: bobId,
  isScreenShareEnabled: true,
 });
+const daveParticipant = mockRemoteParticipant({ identity: daveId });

-const members = new Map([
-  [alice.userId, alice],
-  [bob.userId, bob],
-  [carol.userId, carol],
-]);
+const members = new Map([alice, bob, carol, dave].map((p) => [p.userId, p]));

-const rtcMemberAlice = mockMembership(aliceId, aliceDev);
-const rtcMemberBob = mockMembership(bobId, bobDev);
-const rtcMemberCarol = mockMembership(carolId, carolDev);
+const aliceRtcMember = mockMembership(aliceId, aliceDev);
+const bobRtcMember = mockMembership(bobId, bobDev);
+const carolRtcMember = mockMembership(carolId, carolDev);
+const daveRtcMember = mockMembership(daveId, daveDev);

 export interface GridLayoutSummary {
  type: "grid";
@@ -119,39 +123,72 @@ export type LayoutSummary =
  | OneOnOneLayoutSummary
  | PipLayoutSummary;

-function summarizeLayout(l: Layout): LayoutSummary {
-  switch (l.type) {
-    case "grid":
-      return {
-        type: l.type,
-        spotlight: l.spotlight?.map((vm) => vm.id),
-        grid: l.grid.map((vm) => vm.id),
-      };
-    case "spotlight-landscape":
-    case "spotlight-portrait":
-      return {
-        type: l.type,
-        spotlight: l.spotlight.map((vm) => vm.id),
-        grid: l.grid.map((vm) => vm.id),
-      };
-    case "spotlight-expanded":
-      return {
-        type: l.type,
-        spotlight: l.spotlight.map((vm) => vm.id),
-        pip: l.pip?.id,
-      };
-    case "one-on-one":
-      return { type: l.type, local: l.local.id, remote: l.remote.id };
-    case "pip":
-      return { type: l.type, spotlight: l.spotlight.map((vm) => vm.id) };
-  }
+function summarizeLayout(l: Observable<Layout>): Observable<LayoutSummary> {
+  return l.pipe(
+    switchMap((l) => {
+      switch (l.type) {
+        case "grid":
+          return combineLatest(
+            [
+              l.spotlight?.media ?? of(undefined),
+              ...l.grid.map((vm) => vm.media),
+            ],
+            (spotlight, ...grid) => ({
+              type: l.type,
+              spotlight: spotlight?.map((vm) => vm.id),
+              grid: grid.map((vm) => vm.id),
+            }),
+          );
+        case "spotlight-landscape":
+        case "spotlight-portrait":
+          return combineLatest(
+            [l.spotlight.media, ...l.grid.map((vm) => vm.media)],
+            (spotlight, ...grid) => ({
+              type: l.type,
+              spotlight: spotlight.map((vm) => vm.id),
+              grid: grid.map((vm) => vm.id),
+            }),
+          );
+        case "spotlight-expanded":
+          return combineLatest(
+            [l.spotlight.media, l.pip?.media ?? of(undefined)],
+            (spotlight, pip) => ({
+              type: l.type,
+              spotlight: spotlight.map((vm) => vm.id),
+              pip: pip?.id,
+            }),
+          );
+        case "one-on-one":
+          return combineLatest(
+            [l.local.media, l.remote.media],
+            (local, remote) => ({
+              type: l.type,
+              local: local.id,
+              remote: remote.id,
+            }),
+          );
+        case "pip":
+          return l.spotlight.media.pipe(
+            map((spotlight) => ({
+              type: l.type,
+              spotlight: spotlight.map((vm) => vm.id),
+            })),
+          );
+      }
+    }),
+    // Sometimes there can be multiple (synchronous) updates per frame. We only
+    // care about the most recent value for each time step, so discard these
+    // extra values.
+    debounceTime(0),
+    distinctUntilChanged(isEqual),
+  );
 }

 function withCallViewModel(
-  { cold }: OurRunHelpers,
  remoteParticipants: Observable<RemoteParticipant[]>,
  rtcMembers: Observable<Partial<CallMembership>[]>,
  connectionState: Observable<ECConnectionState>,
+  speaking: Map<Participant, Observable<boolean>>,
  continuation: (vm: CallViewModel) => void,
 ): void {
  const room = mockMatrixRoom({
@@ -172,19 +209,30 @@ function withCallViewModel(
  const mediaSpy = vi
    .spyOn(ComponentsCore, "observeParticipantMedia")
    .mockImplementation((p) =>
-      cold("a", {
-        a: { participant: p } as Partial<
-          ComponentsCore.ParticipantMedia<LocalParticipant>
-        > as ComponentsCore.ParticipantMedia<LocalParticipant>,
-      }),
+      of({ participant: p } as Partial<
+        ComponentsCore.ParticipantMedia<LocalParticipant>
+      > as ComponentsCore.ParticipantMedia<LocalParticipant>),
    );
  const eventsSpy = vi
    .spyOn(ComponentsCore, "observeParticipantEvents")
-    .mockImplementation((p) => cold("a", { a: p }));
+    .mockImplementation((p) =>
+      (speaking.get(p) ?? of(false)).pipe(
+        map((s) => ({ ...p, isSpeaking: s }) as Participant),
+      ),
+    );
+
+  const roomEventSelectorSpy = vi
+    .spyOn(ComponentsCore, "roomEventSelector")
+    .mockImplementation((room, eventType) => of());
+
+  const liveKitRoom = mockLivekitRoom(
+    { localParticipant },
+    { remoteParticipants },
+  );

  const vm = new CallViewModel(
    rtcSession as unknown as MatrixRTCSession,
-    mockLivekitRoom({ localParticipant }),
+    liveKitRoom,
    {
      kind: E2eeType.PER_PARTICIPANT,
    },
@@ -196,115 +244,316 @@ function withCallViewModel(
    participantsSpy!.mockRestore();
    mediaSpy!.mockRestore();
    eventsSpy!.mockRestore();
+    roomEventSelectorSpy!.mockRestore();
  });

  continuation(vm);
 }

 test("participants are retained during a focus switch", () => {
-  withTestScheduler((helpers) => {
-    const { hot, expectObservable } = helpers;
+  withTestScheduler(({ cold, expectObservable }) => {
    // Participants disappear on frame 2 and come back on frame 3
-    const partMarbles = "a-ba";
-    // The RTC members never disappear
-    const rtcMemberMarbles = "a---";
+    const participantMarbles = "a-ba";
    // Start switching focus on frame 1 and reconnect on frame 3
-    const connMarbles = "ab-a";
+    const connectionMarbles = " cs-c";
    // The visible participants should remain the same throughout the switch
-    const laytMarbles = "aaaa 2997ms a 56998ms a";
+    const layoutMarbles = "     a";

    withCallViewModel(
-      helpers,
-      hot(partMarbles, {
+      cold(participantMarbles, {
        a: [aliceParticipant, bobParticipant],
        b: [],
      }),
-      hot(rtcMemberMarbles, {
-        a: [rtcMemberAlice, rtcMemberBob, rtcMemberCarol],
-      }),
-      hot(connMarbles, {
-        a: ConnectionState.Connected,
-        b: ECAddonConnectionState.ECSwitchingFocus,
+      of([aliceRtcMember, bobRtcMember]),
+      cold(connectionMarbles, {
+        c: ConnectionState.Connected,
+        s: ECAddonConnectionState.ECSwitchingFocus,
      }),
+      new Map(),
      (vm) => {
-        expectObservable(vm.layout.pipe(map(summarizeLayout))).toBe(
-          laytMarbles,
-          {
-            a: {
-              type: "grid",
-              spotlight: undefined,
-              grid: ["local:0", `${aliceRTCId}:0`, `${bobRTCId}:0`],
-            },
+        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
+          a: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
          },
-        );
+        });
      },
    );
  });
 });

 test("screen sharing activates spotlight layout", () => {
-  withTestScheduler((helpers) => {
-    const { hot, schedule, expectObservable } = helpers;
+  withTestScheduler(({ cold, schedule, expectObservable }) => {
    // Start with no screen shares, then have Alice and Bob share their screens,
    // then return to no screen shares, then have just Alice share for a bit
-    const partMarbles = "abc---d---a-b---a";
+    const participantMarbles = " abcda-ba";
    // While there are no screen shares, switch to spotlight manually, and then
    // switch back to grid at the end
-    const modeMarbles = "-----------a--------b";
+    const modeMarbles = "        -----s--g";
    // We should automatically enter spotlight for the first round of screen
    // sharing, then return to grid, then manually go into spotlight, and
    // remain in spotlight until we manually go back to grid
-    const laytMarbles = "ab(cc)(dd)ae(bb)(ee)a 59979ms a";
-
+    const layoutMarbles = "      abcdaefeg";
+    const showSpeakingMarbles = "y----nyny";
    withCallViewModel(
-      helpers,
-      hot(partMarbles, {
+      cold(participantMarbles, {
        a: [aliceParticipant, bobParticipant],
        b: [aliceSharingScreen, bobParticipant],
        c: [aliceSharingScreen, bobSharingScreen],
        d: [aliceParticipant, bobSharingScreen],
      }),
-      of([rtcMemberAlice, rtcMemberAlice]),
-      hot("a", { a: ConnectionState.Connected }),
+      of([aliceRtcMember, bobRtcMember]),
+      of(ConnectionState.Connected),
+      new Map(),
      (vm) => {
        schedule(modeMarbles, {
-          a: () => vm.setGridMode("spotlight"),
-          b: () => vm.setGridMode("grid"),
+          s: () => vm.setGridMode("spotlight"),
+          g: () => vm.setGridMode("grid"),
        });

-        expectObservable(vm.layout.pipe(map(summarizeLayout))).toBe(
-          laytMarbles,
-          {
-            a: {
-              type: "grid",
-              spotlight: undefined,
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-            },
-            b: {
-              type: "spotlight-landscape",
-              spotlight: [`${aliceId}:0:screen-share`],
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-            },
-            c: {
-              type: "spotlight-landscape",
-              spotlight: [
-                `${aliceId}:0:screen-share`,
-                `${bobId}:0:screen-share`,
-              ],
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-            },
-            d: {
-              type: "spotlight-landscape",
-              spotlight: [`${bobId}:0:screen-share`],
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-            },
-            e: {
-              type: "spotlight-landscape",
-              spotlight: [`${aliceId}:0`],
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-            },
+        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
+          a: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
          },
-        );
+          b: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0:screen-share`],
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+          },
+          c: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0:screen-share`, `${bobId}:0:screen-share`],
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+          },
+          d: {
+            type: "spotlight-landscape",
+            spotlight: [`${bobId}:0:screen-share`],
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+          },
+          e: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0`],
+            grid: ["local:0", `${bobId}:0`],
+          },
+          f: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0:screen-share`],
+            grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
+          },
+          g: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
+          },
+        });
+        expectObservable(vm.showSpeakingIndicators).toBe(showSpeakingMarbles, {
+          y: true,
+          n: false,
+        });
+      },
+    );
+  });
+});
+
+test("participants stay in the same order unless to appear/disappear", () => {
+  withTestScheduler(({ cold, schedule, expectObservable }) => {
+    const modeMarbles = "a";
+    // First Bob speaks, then Dave, then Alice
+    const aSpeakingMarbles = "n- 1998ms - 1999ms y";
+    const bSpeakingMarbles = "ny 1998ms n 1999ms ";
+    const dSpeakingMarbles = "n- 1998ms y 1999ms n";
+    // Nothing should change when Bob speaks, because Bob is already on screen.
+    // When Dave speaks he should switch with Alice because she's the one who
+    // hasn't spoken at all. Then when Alice speaks, she should return to her
+    // place at the top.
+    const layoutMarbles = "   a  1999ms b 1999ms a 57999ms c 1999ms a";
+
+    withCallViewModel(
+      of([aliceParticipant, bobParticipant, daveParticipant]),
+      of([aliceRtcMember, bobRtcMember, daveRtcMember]),
+      of(ConnectionState.Connected),
+      new Map([
+        [aliceParticipant, cold(aSpeakingMarbles, { y: true, n: false })],
+        [bobParticipant, cold(bSpeakingMarbles, { y: true, n: false })],
+        [daveParticipant, cold(dSpeakingMarbles, { y: true, n: false })],
+      ]),
+      (vm) => {
+        schedule(modeMarbles, {
+          a: () => {
+            // We imagine that only three tiles (the first three) will be visible
+            // on screen at a time
+            vm.layout.subscribe((layout) => {
+              if (layout.type === "grid") {
+                for (let i = 0; i < layout.grid.length; i++)
+                  layout.grid[i].setVisible(i < 3);
+              }
+            });
+          },
+        });
+
+        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
+          a: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`, `${daveId}:0`],
+          },
+          b: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${daveId}:0`, `${bobId}:0`, `${aliceId}:0`],
+          },
+          c: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${aliceId}:0`, `${daveId}:0`, `${bobId}:0`],
+          },
+        });
+      },
+    );
+  });
+});
+
+test("spotlight speakers swap places", () => {
+  withTestScheduler(({ cold, schedule, expectObservable }) => {
+    // Go immediately into spotlight mode for the test
+    const modeMarbles = "     s";
+    // First Bob speaks, then Dave, then Alice
+    const aSpeakingMarbles = "n--y";
+    const bSpeakingMarbles = "nyn";
+    const dSpeakingMarbles = "n-yn";
+    // Alice should start in the spotlight, then Bob, then Dave, then Alice
+    // again. However, the positions of Dave and Bob in the grid should be
+    // reversed by the end because they've been swapped in and out of the
+    // spotlight.
+    const layoutMarbles = "   abcd";
+
+    withCallViewModel(
+      of([aliceParticipant, bobParticipant, daveParticipant]),
+      of([aliceRtcMember, bobRtcMember, daveRtcMember]),
+      of(ConnectionState.Connected),
+      new Map([
+        [aliceParticipant, cold(aSpeakingMarbles, { y: true, n: false })],
+        [bobParticipant, cold(bSpeakingMarbles, { y: true, n: false })],
+        [daveParticipant, cold(dSpeakingMarbles, { y: true, n: false })],
+      ]),
+      (vm) => {
+        schedule(modeMarbles, { s: () => vm.setGridMode("spotlight") });
+
+        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
+          a: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0`],
+            grid: ["local:0", `${bobId}:0`, `${daveId}:0`],
+          },
+          b: {
+            type: "spotlight-landscape",
+            spotlight: [`${bobId}:0`],
+            grid: ["local:0", `${aliceId}:0`, `${daveId}:0`],
+          },
+          c: {
+            type: "spotlight-landscape",
+            spotlight: [`${daveId}:0`],
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+          },
+          d: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0`],
+            grid: ["local:0", `${daveId}:0`, `${bobId}:0`],
+          },
+        });
+      },
+    );
+  });
+});
+
+test("layout enters picture-in-picture mode when requested", () => {
+  withTestScheduler(({ schedule, expectObservable }) => {
+    // Enable then disable picture-in-picture
+    const pipControlMarbles = "-ed";
+    // Should go into picture-in-picture layout then back to grid
+    const layoutMarbles = "    aba";
+
+    withCallViewModel(
+      of([aliceParticipant, bobParticipant]),
+      of([aliceRtcMember, bobRtcMember]),
+      of(ConnectionState.Connected),
+      new Map(),
+      (vm) => {
+        schedule(pipControlMarbles, {
+          e: () => window.controls.enablePip(),
+          d: () => window.controls.disablePip(),
+        });
+
+        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
+          a: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+          },
+          b: {
+            type: "pip",
+            spotlight: [`${aliceId}:0`],
+          },
+        });
+      },
+    );
+  });
+});
+
+test("spotlight remembers whether it's expanded", () => {
+  withTestScheduler(({ schedule, expectObservable }) => {
+    // Start in spotlight mode, then switch to grid and back to spotlight a
+    // couple times
+    const modeMarbles = "  s-gs-gs";
+    // Expand and collapse the spotlight
+    const expandMarbles = "-a--a";
+    // Spotlight should stay expanded during the first mode switch, and stay
+    // collapsed during the second mode switch
+    const layoutMarbles = "abcbada";
+
+    withCallViewModel(
+      of([aliceParticipant, bobParticipant]),
+      of([aliceRtcMember, bobRtcMember]),
+      of(ConnectionState.Connected),
+      new Map(),
+      (vm) => {
+        schedule(modeMarbles, {
+          s: () => vm.setGridMode("spotlight"),
+          g: () => vm.setGridMode("grid"),
+        });
+        schedule(expandMarbles, {
+          a: () => {
+            let toggle: () => void;
+            vm.toggleSpotlightExpanded.subscribe((val) => (toggle = val!));
+            toggle!();
+          },
+        });
+
+        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
+          a: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0`],
+            grid: ["local:0", `${bobId}:0`],
+          },
+          b: {
+            type: "spotlight-expanded",
+            spotlight: [`${aliceId}:0`],
+            pip: "local:0",
+          },
+          c: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+          },
+          d: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
+          },
+        });
      },
    );
  });
--- a/src/state/CallViewModel.ts
+++ b/src/state/CallViewModel.ts
@@ -71,6 +71,12 @@ import { ObservableScope } from "./ObservableScope";
 import { duplicateTiles, nonMemberTiles } from "../settings/settings";
 import { isFirefox } from "../Platform";
 import { setPipEnabled } from "../controls";
+import { GridTileViewModel, SpotlightTileViewModel } from "./TileViewModel";
+import { TileStore } from "./TileStore";
+import { gridLikeLayout } from "./GridLikeLayout";
+import { spotlightExpandedLayout } from "./SpotlightExpandedLayout";
+import { oneOnOneLayout } from "./OneOnOneLayout";
+import { pipLayout } from "./PipLayout";
 import { EncryptionSystem } from "../e2ee/sharedKeyManagement";

 // How long we wait after a focus switch before showing the real participant
@@ -81,39 +87,82 @@ const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
 // on mobile. No spotlight tile should be shown below this threshold.
 const smallMobileCallThreshold = 3;

-export interface GridLayout {
+export interface GridLayoutMedia {
  type: "grid";
  spotlight?: MediaViewModel[];
  grid: UserMediaViewModel[];
 }

-export interface SpotlightLandscapeLayout {
+export interface SpotlightLandscapeLayoutMedia {
  type: "spotlight-landscape";
  spotlight: MediaViewModel[];
  grid: UserMediaViewModel[];
 }

-export interface SpotlightPortraitLayout {
+export interface SpotlightPortraitLayoutMedia {
  type: "spotlight-portrait";
  spotlight: MediaViewModel[];
  grid: UserMediaViewModel[];
 }

-export interface SpotlightExpandedLayout {
+export interface SpotlightExpandedLayoutMedia {
  type: "spotlight-expanded";
  spotlight: MediaViewModel[];
  pip?: UserMediaViewModel;
 }

+export interface OneOnOneLayoutMedia {
+  type: "one-on-one";
+  local: UserMediaViewModel;
+  remote: UserMediaViewModel;
+}
+
+export interface PipLayoutMedia {
+  type: "pip";
+  spotlight: MediaViewModel[];
+}
+
+export type LayoutMedia =
+  | GridLayoutMedia
+  | SpotlightLandscapeLayoutMedia
+  | SpotlightPortraitLayoutMedia
+  | SpotlightExpandedLayoutMedia
+  | OneOnOneLayoutMedia
+  | PipLayoutMedia;
+
+export interface GridLayout {
+  type: "grid";
+  spotlight?: SpotlightTileViewModel;
+  grid: GridTileViewModel[];
+}
+
+export interface SpotlightLandscapeLayout {
+  type: "spotlight-landscape";
+  spotlight: SpotlightTileViewModel;
+  grid: GridTileViewModel[];
+}
+
+export interface SpotlightPortraitLayout {
+  type: "spotlight-portrait";
+  spotlight: SpotlightTileViewModel;
+  grid: GridTileViewModel[];
+}
+
+export interface SpotlightExpandedLayout {
+  type: "spotlight-expanded";
+  spotlight: SpotlightTileViewModel;
+  pip?: GridTileViewModel;
+}
+
 export interface OneOnOneLayout {
  type: "one-on-one";
-  local: LocalUserMediaViewModel;
-  remote: RemoteUserMediaViewModel;
+  local: GridTileViewModel;
+  remote: GridTileViewModel;
 }

 export interface PipLayout {
  type: "pip";
-  spotlight: MediaViewModel[];
+  spotlight: SpotlightTileViewModel;
 }

 /**
@@ -162,6 +211,12 @@ enum SortingBin {
  SelfNotAlwaysShown,
 }

+interface LayoutScanState {
+  layout: Layout | null;
+  tiles: TileStore;
+  visibleTiles: Set<GridTileViewModel>;
+}
+
 class UserMedia {
  private readonly scope = new ObservableScope();
  public readonly vm: UserMediaViewModel;
@@ -176,6 +231,7 @@ class UserMedia {
    member: RoomMember | undefined,
    participant: LocalParticipant | RemoteParticipant | undefined,
    encryptionSystem: EncryptionSystem,
+    livekitRoom: LivekitRoom,
  ) {
    this.participant = new BehaviorSubject(participant);

@@ -185,6 +241,7 @@ class UserMedia {
        member,
        this.participant.asObservable() as Observable<LocalParticipant>,
        encryptionSystem,
+        livekitRoom,
      );
    } else {
      this.vm = new RemoteUserMediaViewModel(
@@ -194,6 +251,7 @@ class UserMedia {
          RemoteParticipant | undefined
        >,
        encryptionSystem,
+        livekitRoom,
      );
    }

@@ -247,6 +305,7 @@ class ScreenShare {
    member: RoomMember | undefined,
    participant: LocalParticipant | RemoteParticipant,
    encryptionSystem: EncryptionSystem,
+    liveKitRoom: LivekitRoom,
  ) {
    this.participant = new BehaviorSubject(participant);

@@ -255,6 +314,7 @@ class ScreenShare {
      member,
      this.participant.asObservable(),
      encryptionSystem,
+      liveKitRoom,
    );
  }

@@ -437,6 +497,7 @@ export class CallViewModel extends ViewModel {
                      member,
                      participant,
                      this.encryptionSystem,
+                      this.livekitRoom
                    ),
                ];
              }
@@ -450,6 +511,7 @@ export class CallViewModel extends ViewModel {
                      member,
                      participant,
                      this.encryptionSystem,
+                      this.livekitRoom,
                    ),
                ];
              }
@@ -662,6 +724,14 @@ export class CallViewModel extends ViewModel {
      this.scope.state(),
    );

+  private readonly hasRemoteScreenShares: Observable<boolean> =
+    this.spotlight.pipe(
+      map((spotlight) =>
+        spotlight.some((vm) => !vm.local && vm instanceof ScreenShareViewModel),
+      ),
+      distinctUntilChanged(),
+    );
+
  private readonly pip: Observable<UserMediaViewModel | null> =
    this.spotlightAndPip.pipe(switchMap(([, pip]) => pip));

@@ -742,7 +812,7 @@ export class CallViewModel extends ViewModel {
      screenShares.length === 0,
  );

-  private readonly gridLayout: Observable<Layout> = combineLatest(
+  private readonly gridLayout: Observable<LayoutMedia> = combineLatest(
    [this.grid, this.spotlight],
    (grid, spotlight) => ({
      type: "grid",
@@ -753,38 +823,44 @@ export class CallViewModel extends ViewModel {
    }),
  );

-  private readonly spotlightLandscapeLayout: Observable<Layout> = combineLatest(
-    [this.grid, this.spotlight],
-    (grid, spotlight) => ({ type: "spotlight-landscape", spotlight, grid }),
-  );
+  private readonly spotlightLandscapeLayout: Observable<LayoutMedia> =
+    combineLatest([this.grid, this.spotlight], (grid, spotlight) => ({
+      type: "spotlight-landscape",
+      spotlight,
+      grid,
+    }));

-  private readonly spotlightPortraitLayout: Observable<Layout> = combineLatest(
-    [this.grid, this.spotlight],
-    (grid, spotlight) => ({ type: "spotlight-portrait", spotlight, grid }),
-  );
+  private readonly spotlightPortraitLayout: Observable<LayoutMedia> =
+    combineLatest([this.grid, this.spotlight], (grid, spotlight) => ({
+      type: "spotlight-portrait",
+      spotlight,
+      grid,
+    }));

-  private readonly spotlightExpandedLayout: Observable<Layout> = combineLatest(
-    [this.spotlight, this.pip],
-    (spotlight, pip) => ({
+  private readonly spotlightExpandedLayout: Observable<LayoutMedia> =
+    combineLatest([this.spotlight, this.pip], (spotlight, pip) => ({
      type: "spotlight-expanded",
      spotlight,
      pip: pip ?? undefined,
-    }),
-  );
+    }));

-  private readonly oneOnOneLayout: Observable<Layout> = this.grid.pipe(
-    map((grid) => ({
-      type: "one-on-one",
-      local: grid.find((vm) => vm.local) as LocalUserMediaViewModel,
-      remote: grid.find((vm) => !vm.local) as RemoteUserMediaViewModel,
-    })),
-  );
+  private readonly oneOnOneLayout: Observable<LayoutMedia> =
+    this.mediaItems.pipe(
+      map((grid) => ({
+        type: "one-on-one",
+        local: grid.find((vm) => vm.vm.local)!.vm as LocalUserMediaViewModel,
+        remote: grid.find((vm) => !vm.vm.local)!.vm as RemoteUserMediaViewModel,
+      })),
+    );

-  private readonly pipLayout: Observable<Layout> = this.spotlight.pipe(
+  private readonly pipLayout: Observable<LayoutMedia> = this.spotlight.pipe(
    map((spotlight) => ({ type: "pip", spotlight })),
  );

-  public readonly layout: Observable<Layout> = this.windowMode.pipe(
+  /**
+   * The media to be used to produce a layout.
+   */
+  private readonly layoutMedia: Observable<LayoutMedia> = this.windowMode.pipe(
    switchMap((windowMode) => {
      switch (windowMode) {
        case "normal":
@@ -845,32 +921,97 @@ export class CallViewModel extends ViewModel {
    this.scope.state(),
  );

+  /**
+   * The layout of tiles in the call interface.
+   */
+  public readonly layout: Observable<Layout> = this.layoutMedia.pipe(
+    // Each layout will produce a set of tiles, and these tiles have an
+    // observable indicating whether they're visible. We loop this information
+    // back into the layout process by using switchScan.
+    switchScan<
+      LayoutMedia,
+      LayoutScanState,
+      Observable<LayoutScanState & { layout: Layout }>
+    >(
+      ({ tiles: prevTiles, visibleTiles }, media) => {
+        let layout: Layout;
+        let newTiles: TileStore;
+        switch (media.type) {
+          case "grid":
+          case "spotlight-landscape":
+          case "spotlight-portrait":
+            [layout, newTiles] = gridLikeLayout(media, visibleTiles, prevTiles);
+            break;
+          case "spotlight-expanded":
+            [layout, newTiles] = spotlightExpandedLayout(
+              media,
+              visibleTiles,
+              prevTiles,
+            );
+            break;
+          case "one-on-one":
+            [layout, newTiles] = oneOnOneLayout(media, visibleTiles, prevTiles);
+            break;
+          case "pip":
+            [layout, newTiles] = pipLayout(media, visibleTiles, prevTiles);
+            break;
+        }
+
+        // Take all of the 'visible' observables and combine them into one big
+        // observable array
+        const visibilities =
+          newTiles.gridTiles.length === 0
+            ? of([])
+            : combineLatest(newTiles.gridTiles.map((tile) => tile.visible));
+        return visibilities.pipe(
+          map((visibilities) => ({
+            layout: layout,
+            tiles: newTiles,
+            visibleTiles: new Set(
+              newTiles.gridTiles.filter((_tile, i) => visibilities[i]),
+            ),
+          })),
+        );
+      },
+      {
+        layout: null,
+        tiles: TileStore.empty(),
+        visibleTiles: new Set(),
+      },
+    ),
+    map(({ layout }) => layout),
+    this.scope.state(),
+  );
+
  public showSpotlightIndicators: Observable<boolean> = this.layout.pipe(
    map((l) => l.type !== "grid"),
    this.scope.state(),
  );

-  /**
-   * Determines whether video should be shown for a certain piece of media
-   * appearing in the grid.
-   */
-  public showGridVideo(vm: MediaViewModel): Observable<boolean> {
-    return this.layout.pipe(
-      map(
-        (l) =>
-          !(
-            (l.type === "spotlight-landscape" ||
-              l.type === "spotlight-portrait") &&
-            // This media is already visible in the spotlight; avoid duplication
-            l.spotlight.some((spotlightVm) => spotlightVm === vm)
-          ),
-      ),
-      distinctUntilChanged(),
-    );
-  }
-
  public showSpeakingIndicators: Observable<boolean> = this.layout.pipe(
-    map((l) => l.type !== "one-on-one" && !l.type.startsWith("spotlight-")),
+    switchMap((l) => {
+      switch (l.type) {
+        case "spotlight-landscape":
+        case "spotlight-portrait":
+          // If the spotlight is showing the active speaker, we can do without
+          // speaking indicators as they're a redundant visual cue. But if
+          // screen sharing feeds are in the spotlight we still need them.
+          return l.spotlight.media.pipe(
+            map((models: MediaViewModel[]) =>
+              models.some((m) => m instanceof ScreenShareViewModel),
+            ),
+          );
+        // In expanded spotlight layout, the active speaker is always shown in
+        // the picture-in-picture tile so there is no need for speaking
+        // indicators. And in one-on-one layout there's no question as to who is
+        // speaking.
+        case "spotlight-expanded":
+        case "one-on-one":
+          return of(false);
+        default:
+          return of(true);
+      }
+    }),
    this.scope.state(),
  );

--- a/src/state/GridLikeLayout.ts
+++ b/src/state/GridLikeLayout.ts
@@ -0,0 +1,43 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { Layout, LayoutMedia } from "./CallViewModel";
+import { TileStore } from "./TileStore";
+import { GridTileViewModel } from "./TileViewModel";
+
+export type GridLikeLayoutType =
+  | "grid"
+  | "spotlight-landscape"
+  | "spotlight-portrait";
+
+/**
+ * Produces a grid-like layout (any layout with a grid and possibly a spotlight)
+ * with the given media.
+ */
+export function gridLikeLayout(
+  media: LayoutMedia & { type: GridLikeLayoutType },
+  visibleTiles: Set<GridTileViewModel>,
+  prevTiles: TileStore,
+): [Layout & { type: GridLikeLayoutType }, TileStore] {
+  const update = prevTiles.from(visibleTiles);
+  if (media.spotlight !== undefined)
+    update.registerSpotlight(
+      media.spotlight,
+      media.type === "spotlight-portrait",
+    );
+  for (const mediaVm of media.grid) update.registerGridTile(mediaVm);
+  const tiles = update.build();
+
+  return [
+    {
+      type: media.type,
+      spotlight: tiles.spotlightTile,
+      grid: tiles.gridTiles,
+    } as Layout & { type: GridLikeLayoutType },
+    tiles,
+  ];
+}
--- a/src/state/MediaViewModel.ts
+++ b/src/state/MediaViewModel.ts
@@ -11,6 +11,7 @@ import {
  VideoSource,
  observeParticipantEvents,
  observeParticipantMedia,
+  roomEventSelector,
 } from "@livekit/components-core";
 import {
  LocalParticipant,
@@ -21,6 +22,9 @@ import {
  Track,
  TrackEvent,
  facingModeFromLocalTrack,
+  Room as LivekitRoom,
+  RoomEvent as LivekitRoomEvent,
+  RemoteTrack,
 } from "livekit-client";
 import { RoomMember, RoomMemberEvent } from "matrix-js-sdk/src/matrix";
 import {
@@ -28,13 +32,18 @@ import {
  Observable,
  Subject,
  combineLatest,
+  distinctUntilChanged,
  distinctUntilKeyChanged,
+  filter,
  fromEvent,
+  interval,
  map,
  merge,
  of,
+  shareReplay,
  startWith,
  switchMap,
+  throttleTime,
 } from "rxjs";
 import { useEffect } from "react";

@@ -90,6 +99,115 @@ export function observeTrackReference(
  return obs;
 }

+function observeRemoteTrackReceivingOkay(
+  participant: Participant,
+  source: Track.Source,
+): Observable<boolean | undefined> {
+  let lastStats: {
+    framesDecoded: number | undefined;
+    framesDropped: number | undefined;
+    framesReceived: number | undefined;
+  } = {
+    framesDecoded: undefined,
+    framesDropped: undefined,
+    framesReceived: undefined,
+  };
+
+  return combineLatest([
+    observeTrackReference(participant, source),
+    interval(1000).pipe(startWith(0)),
+  ]).pipe(
+    switchMap(async ([trackReference]) => {
+      const track = trackReference.publication?.track;
+      if (!track || !(track instanceof RemoteTrack)) {
+        return undefined;
+      }
+      const report = await track.getRTCStatsReport();
+      if (!report) {
+        return undefined;
+      }
+
+      for (const v of report.values()) {
+        if (v.type === "inbound-rtp") {
+          const { framesDecoded, framesDropped, framesReceived } =
+            v as RTCInboundRtpStreamStats;
+          return {
+            framesDecoded,
+            framesDropped,
+            framesReceived,
+          };
+        }
+      }
+
+      return undefined;
+    }),
+    filter((newStats) => !!newStats),
+    map((newStats): boolean | undefined => {
+      const oldStats = lastStats;
+      lastStats = newStats;
+      if (
+        typeof newStats.framesReceived === "number" &&
+        typeof oldStats.framesReceived === "number" &&
+        typeof newStats.framesDecoded === "number" &&
+        typeof oldStats.framesDecoded === "number"
+      ) {
+        const framesReceivedDelta =
+          newStats.framesReceived - oldStats.framesReceived;
+        const framesDecodedDelta =
+          newStats.framesDecoded - oldStats.framesDecoded;
+
+        // if we received >0 frames and managed to decode >0 frames then we treat that as success
+
+        if (framesReceivedDelta > 0) {
+          return framesDecodedDelta > 0;
+        }
+      }
+
+      // no change
+      return undefined;
+    }),
+    filter((x) => typeof x === "boolean"),
+    startWith(undefined),
+  );
+}
+
+function encryptionErrorObservable(
+  room: LivekitRoom,
+  participant: Participant,
+  encryptionSystem: EncryptionSystem,
+  criteria: string,
+): Observable<boolean> {
+  return roomEventSelector(room, LivekitRoomEvent.EncryptionError).pipe(
+    map((e) => {
+      const [err] = e;
+      if (encryptionSystem.kind === E2eeType.PER_PARTICIPANT) {
+        return (
+          // Ideally we would pull the participant identity from the field on the error.
+          // However, it gets lost in the serialization process between workers.
+          // So, instead we do a string match
+          (err?.message.includes(participant.identity) &&
+            err?.message.includes(criteria)) ??
+          false
+        );
+      } else if (encryptionSystem.kind === E2eeType.SHARED_KEY) {
+        return !!err?.message.includes(criteria);
+      }
+
+      return false;
+    }),
+    throttleTime(1000), // Throttle to avoid spamming the UI
+    startWith(false),
+  );
+}
+
+export enum EncryptionStatus {
+  Connecting,
+  Okay,
+  KeyMissing,
+  KeyInvalid,
+  PasswordInvalid,
+}
+
 abstract class BaseMediaViewModel extends ViewModel {
  /**
   * Whether the media belongs to the local user.
@@ -112,6 +230,8 @@ abstract class BaseMediaViewModel extends ViewModel {
    map((p) => !!p),
  );

+  public readonly encryptionStatus: Observable<EncryptionStatus>;
+
  public constructor(
    /**
     * An opaque identifier for this media.
@@ -132,6 +252,7 @@ abstract class BaseMediaViewModel extends ViewModel {
    encryptionSystem: EncryptionSystem,
    audioSource: AudioSource,
    videoSource: VideoSource,
+    livekitRoom: LivekitRoom,
  ) {
    super();
    const audio = observeTrackReference(participant, audioSource).pipe(
@@ -146,7 +267,64 @@ abstract class BaseMediaViewModel extends ViewModel {
        encryptionSystem.kind !== E2eeType.NONE &&
        (a?.publication?.isEncrypted === false ||
          v?.publication?.isEncrypted === false),
-    ).pipe(this.scope.state());
+        ).pipe(this.scope.state());
+
+    if (participant.isLocal || encryptionSystem.kind === E2eeType.NONE) {
+      this.encryptionStatus = of(EncryptionStatus.Okay).pipe(
+        this.scope.state(),
+      );
+    } else if (encryptionSystem.kind === E2eeType.PER_PARTICIPANT) {
+      this.encryptionStatus = combineLatest([
+        encryptionErrorObservable(
+          livekitRoom,
+          participant,
+          encryptionSystem,
+          "MissingKey",
+        ),
+        encryptionErrorObservable(
+          livekitRoom,
+          participant,
+          encryptionSystem,
+          "InvalidKey",
+        ),
+        observeRemoteTrackReceivingOkay(participant, audioSource),
+        observeRemoteTrackReceivingOkay(participant, videoSource),
+      ]).pipe(
+        map(([keyMissing, keyInvalid, audioOkay, videoOkay]) => {
+          if (keyMissing) return EncryptionStatus.KeyMissing;
+          if (keyInvalid) return EncryptionStatus.KeyInvalid;
+          if (audioOkay || videoOkay) return EncryptionStatus.Okay;
+          return undefined; // no change
+        }),
+        filter((x) => !!x),
+        startWith(EncryptionStatus.Connecting),
+        this.scope.state(),
+      );
+    } else {
+      this.encryptionStatus = combineLatest([
+        encryptionErrorObservable(
+          livekitRoom,
+          participant,
+          encryptionSystem,
+          "InvalidKey",
+        ),
+        observeRemoteTrackReceivingOkay(participant, audioSource),
+        observeRemoteTrackReceivingOkay(participant, videoSource),
+      ]).pipe(
+        map(
+          ([keyInvalid, audioOkay, videoOkay]):
+            | EncryptionStatus
+            | undefined => {
+            if (keyInvalid) return EncryptionStatus.PasswordInvalid;
+            if (audioOkay || videoOkay) return EncryptionStatus.Okay;
+            return undefined; // no change
+          },
+        ),
+        filter((x) => !!x),
+        startWith(EncryptionStatus.Connecting),
+        this.scope.state(),
+      );
+    }
  }
 }

@@ -201,6 +379,7 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
    member: RoomMember | undefined,
    participant: Observable<LocalParticipant | RemoteParticipant | undefined>,
    encryptionSystem: EncryptionSystem,
+    livekitRoom: LivekitRoom,
  ) {
    super(
      id,
@@ -209,6 +388,7 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
      encryptionSystem,
      Track.Source.Microphone,
      Track.Source.Camera,
+      livekitRoom,
    );

    const media = participant.pipe(
@@ -261,8 +441,9 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
    member: RoomMember | undefined,
    participant: Observable<LocalParticipant | undefined>,
    encryptionSystem: EncryptionSystem,
+    livekitRoom: LivekitRoom,
  ) {
-    super(id, member, participant, encryptionSystem);
+    super(id, member, participant, encryptionSystem, livekitRoom);
  }
 }

@@ -321,8 +502,9 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
    member: RoomMember | undefined,
    participant: Observable<RemoteParticipant | undefined>,
    encryptionSystem: EncryptionSystem,
+    livekitRoom: LivekitRoom,
  ) {
-    super(id, member, participant, encryptionSystem);
+    super(id, member, participant, encryptionSystem, livekitRoom);

    // Sync the local volume with LiveKit
    combineLatest([
@@ -353,6 +535,7 @@ export class ScreenShareViewModel extends BaseMediaViewModel {
    member: RoomMember | undefined,
    participant: Observable<LocalParticipant | RemoteParticipant>,
    encryptionSystem: EncryptionSystem,
+    livekitRoom: LivekitRoom,
  ) {
    super(
      id,
@@ -361,6 +544,7 @@ export class ScreenShareViewModel extends BaseMediaViewModel {
      encryptionSystem,
      Track.Source.ScreenShareAudio,
      Track.Source.ScreenShare,
+      livekitRoom,
    );
  }
 }
--- a/src/state/OneOnOneLayout.ts
+++ b/src/state/OneOnOneLayout.ts
@@ -0,0 +1,32 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { OneOnOneLayout, OneOnOneLayoutMedia } from "./CallViewModel";
+import { TileStore } from "./TileStore";
+import { GridTileViewModel } from "./TileViewModel";
+
+/**
+ * Produces a one-on-one layout with the given media.
+ */
+export function oneOnOneLayout(
+  media: OneOnOneLayoutMedia,
+  visibleTiles: Set<GridTileViewModel>,
+  prevTiles: TileStore,
+): [OneOnOneLayout, TileStore] {
+  const update = prevTiles.from(visibleTiles);
+  update.registerGridTile(media.local);
+  update.registerGridTile(media.remote);
+  const tiles = update.build();
+  return [
+    {
+      type: media.type,
+      local: tiles.gridTilesByMedia.get(media.local)!,
+      remote: tiles.gridTilesByMedia.get(media.remote)!,
+    },
+    tiles,
+  ];
+}
--- a/src/state/PipLayout.ts
+++ b/src/state/PipLayout.ts
@@ -0,0 +1,30 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { PipLayout, PipLayoutMedia } from "./CallViewModel";
+import { TileStore } from "./TileStore";
+import { GridTileViewModel } from "./TileViewModel";
+
+/**
+ * Produces a picture-in-picture layout with the given media.
+ */
+export function pipLayout(
+  media: PipLayoutMedia,
+  visibleTiles: Set<GridTileViewModel>,
+  prevTiles: TileStore,
+): [PipLayout, TileStore] {
+  const update = prevTiles.from(visibleTiles);
+  update.registerSpotlight(media.spotlight, true);
+  const tiles = update.build();
+  return [
+    {
+      type: media.type,
+      spotlight: tiles.spotlightTile!,
+    },
+    tiles,
+  ];
+}
--- a/src/state/SpotlightExpandedLayout.ts
+++ b/src/state/SpotlightExpandedLayout.ts
@@ -0,0 +1,36 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  SpotlightExpandedLayout,
+  SpotlightExpandedLayoutMedia,
+} from "./CallViewModel";
+import { TileStore } from "./TileStore";
+import { GridTileViewModel } from "./TileViewModel";
+
+/**
+ * Produces an expanded spotlight layout with the given media.
+ */
+export function spotlightExpandedLayout(
+  media: SpotlightExpandedLayoutMedia,
+  visibleTiles: Set<GridTileViewModel>,
+  prevTiles: TileStore,
+): [SpotlightExpandedLayout, TileStore] {
+  const update = prevTiles.from(visibleTiles);
+  update.registerSpotlight(media.spotlight, true);
+  if (media.pip !== undefined) update.registerGridTile(media.pip);
+  const tiles = update.build();
+
+  return [
+    {
+      type: media.type,
+      spotlight: tiles.spotlightTile!,
+      pip: tiles.gridTiles[0],
+    },
+    tiles,
+  ];
+}
--- a/src/state/TileStore.ts
+++ b/src/state/TileStore.ts
@@ -0,0 +1,259 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { BehaviorSubject } from "rxjs";
+
+import { MediaViewModel, UserMediaViewModel } from "./MediaViewModel";
+import { GridTileViewModel, SpotlightTileViewModel } from "./TileViewModel";
+import { fillGaps } from "../utils/iter";
+
+class SpotlightTileData {
+  private readonly media_: BehaviorSubject<MediaViewModel[]>;
+  public get media(): MediaViewModel[] {
+    return this.media_.value;
+  }
+  public set media(value: MediaViewModel[]) {
+    this.media_.next(value);
+  }
+
+  private readonly maximised_: BehaviorSubject<boolean>;
+  public get maximised(): boolean {
+    return this.maximised_.value;
+  }
+  public set maximised(value: boolean) {
+    this.maximised_.next(value);
+  }
+
+  public readonly vm: SpotlightTileViewModel;
+
+  public constructor(media: MediaViewModel[], maximised: boolean) {
+    this.media_ = new BehaviorSubject(media);
+    this.maximised_ = new BehaviorSubject(maximised);
+    this.vm = new SpotlightTileViewModel(this.media_, this.maximised_);
+  }
+
+  public destroy(): void {
+    this.vm.destroy();
+  }
+}
+
+class GridTileData {
+  private readonly media_: BehaviorSubject<UserMediaViewModel>;
+  public get media(): UserMediaViewModel {
+    return this.media_.value;
+  }
+  public set media(value: UserMediaViewModel) {
+    this.media_.next(value);
+  }
+
+  public readonly vm: GridTileViewModel;
+
+  public constructor(media: UserMediaViewModel) {
+    this.media_ = new BehaviorSubject(media);
+    this.vm = new GridTileViewModel(this.media_);
+  }
+
+  public destroy(): void {
+    this.vm.destroy();
+  }
+}
+
+/**
+ * A collection of tiles to be mapped to a layout.
+ */
+export class TileStore {
+  private constructor(
+    private readonly spotlight: SpotlightTileData | null,
+    private readonly grid: GridTileData[],
+  ) {}
+
+  public readonly spotlightTile = this.spotlight?.vm;
+  public readonly gridTiles = this.grid.map(({ vm }) => vm);
+  public readonly gridTilesByMedia = new Map(
+    this.grid.map(({ vm, media }) => [media, vm]),
+  );
+
+  /**
+   * Creates an an empty collection of tiles.
+   */
+  public static empty(): TileStore {
+    return new TileStore(null, []);
+  }
+
+  /**
+   * Creates a builder which can be used to update the collection, passing
+   * ownership of the tiles to the updated collection.
+   */
+  public from(visibleTiles: Set<GridTileViewModel>): TileStoreBuilder {
+    return new TileStoreBuilder(
+      this.spotlight,
+      this.grid,
+      (spotlight, grid) => new TileStore(spotlight, grid),
+      visibleTiles,
+    );
+  }
+}
+
+/**
+ * A builder for a new collection of tiles. Will reuse tiles and destroy unused
+ * tiles from a previous collection where appropriate.
+ */
+export class TileStoreBuilder {
+  private spotlight: SpotlightTileData | null = null;
+  private readonly prevSpotlightSpeaker =
+    this.prevSpotlight?.media.length === 1 &&
+    "speaking" in this.prevSpotlight.media[0] &&
+    this.prevSpotlight.media[0];
+
+  private readonly prevGridByMedia = new Map(
+    this.prevGrid.map((entry, i) => [entry.media, [entry, i]] as const),
+  );
+
+  // The total number of grid entries that we have so far
+  private numGridEntries = 0;
+  // A sparse array of grid entries which should be kept in the same spots as
+  // which they appeared in the previous grid
+  private readonly stationaryGridEntries: GridTileData[] = new Array(
+    this.prevGrid.length,
+  );
+  // Grid entries which should now enter the visible section of the grid
+  private readonly visibleGridEntries: GridTileData[] = [];
+  // Grid entries which should now enter the invisible section of the grid
+  private readonly invisibleGridEntries: GridTileData[] = [];
+
+  public constructor(
+    private readonly prevSpotlight: SpotlightTileData | null,
+    private readonly prevGrid: GridTileData[],
+    private readonly construct: (
+      spotlight: SpotlightTileData | null,
+      grid: GridTileData[],
+    ) => TileStore,
+    private readonly visibleTiles: Set<GridTileViewModel>,
+  ) {}
+
+  /**
+   * Sets the contents of the spotlight tile. If this is never called, there
+   * will be no spotlight tile.
+   */
+  public registerSpotlight(media: MediaViewModel[], maximised: boolean): void {
+    if (this.spotlight !== null) throw new Error("Spotlight already set");
+    if (this.numGridEntries > 0)
+      throw new Error("Spotlight must be registered before grid tiles");
+
+    // Reuse the previous spotlight tile if it exists
+    if (this.prevSpotlight === null) {
+      this.spotlight = new SpotlightTileData(media, maximised);
+    } else {
+      this.spotlight = this.prevSpotlight;
+      this.spotlight.media = media;
+      this.spotlight.maximised = maximised;
+    }
+  }
+
+  /**
+   * Sets up a grid tile for the given media. If this is never called for some
+   * media, then that media will have no grid tile.
+   */
+  public registerGridTile(media: UserMediaViewModel): void {
+    if (this.spotlight !== null) {
+      // We actually *don't* want spotlight speakers to appear in both the
+      // spotlight and the grid, so they're filtered out here
+      if (!media.local && this.spotlight.media.includes(media)) return;
+      // When the spotlight speaker changes, we would see one grid tile appear
+      // and another grid tile disappear. This would be an undesirable layout
+      // shift, so instead what we do is take the speaker's grid tile and swap
+      // the media out, so it can remain where it is in the layout.
+      if (
+        media === this.prevSpotlightSpeaker &&
+        this.spotlight.media.length === 1 &&
+        "speaking" in this.spotlight.media[0] &&
+        this.prevSpotlightSpeaker !== this.spotlight.media[0]
+      ) {
+        const prev = this.prevGridByMedia.get(this.spotlight.media[0]);
+        if (prev !== undefined) {
+          const [entry, prevIndex] = prev;
+          const previouslyVisible = this.visibleTiles.has(entry.vm);
+          const nowVisible = this.visibleTiles.has(
+            this.prevGrid[this.numGridEntries]?.vm,
+          );
+
+          // If it doesn't need to move between the visible/invisible sections of
+          // the grid, then we can keep it where it was and swap the media
+          if (previouslyVisible === nowVisible) {
+            this.stationaryGridEntries[prevIndex] = entry;
+            // Do the media swap
+            entry.media = media;
+            this.prevGridByMedia.delete(this.spotlight.media[0]);
+            this.prevGridByMedia.set(media, prev);
+          } else {
+            // Create a new tile; this will cause a layout shift but I'm not
+            // sure there's any other straightforward option in this case
+            (nowVisible
+              ? this.visibleGridEntries
+              : this.invisibleGridEntries
+            ).push(new GridTileData(media));
+          }
+
+          this.numGridEntries++;
+          return;
+        }
+      }
+    }
+
+    // Was there previously a tile with this same media?
+    const prev = this.prevGridByMedia.get(media);
+    if (prev === undefined) {
+      // Create a new tile
+      (this.visibleTiles.has(this.prevGrid[this.numGridEntries]?.vm)
+        ? this.visibleGridEntries
+        : this.invisibleGridEntries
+      ).push(new GridTileData(media));
+    } else {
+      // Reuse the existing tile
+      const [entry, prevIndex] = prev;
+      const previouslyVisible = this.visibleTiles.has(entry.vm);
+      const nowVisible = this.visibleTiles.has(
+        this.prevGrid[this.numGridEntries]?.vm,
+      );
+      // If it doesn't need to move between the visible/invisible sections of
+      // the grid, then we can keep it exactly where it was previously
+      if (previouslyVisible === nowVisible)
+        this.stationaryGridEntries[prevIndex] = entry;
+      // Otherwise, queue this tile to be moved
+      else
+        (nowVisible ? this.visibleGridEntries : this.invisibleGridEntries).push(
+          entry,
+        );
+    }
+
+    this.numGridEntries++;
+  }
+
+  /**
+   * Constructs a new collection of all registered tiles, transferring ownership
+   * of the tiles to the new collection. Any tiles present in the previous
+   * collection but not the new collection will be destroyed.
+   */
+  public build(): TileStore {
+    // Piece together the grid
+    const grid = [
+      ...fillGaps(this.stationaryGridEntries, [
+        ...this.visibleGridEntries,
+        ...this.invisibleGridEntries,
+      ]),
+    ];
+
+    // Destroy unused tiles
+    if (this.spotlight === null && this.prevSpotlight !== null)
+      this.prevSpotlight.destroy();
+    const gridEntries = new Set(grid);
+    for (const entry of this.prevGrid)
+      if (!gridEntries.has(entry)) entry.destroy();
+
+    return this.construct(this.spotlight, grid);
+  }
+}
--- a/src/state/TileViewModel.ts
+++ b/src/state/TileViewModel.ts
@@ -0,0 +1,43 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { BehaviorSubject, Observable } from "rxjs";
+
+import { ViewModel } from "./ViewModel";
+import { MediaViewModel, UserMediaViewModel } from "./MediaViewModel";
+
+let nextId = 0;
+function createId(): string {
+  return (nextId++).toString();
+}
+
+export class GridTileViewModel extends ViewModel {
+  public readonly id = createId();
+
+  private readonly visible_ = new BehaviorSubject(false);
+  /**
+   * Whether the tile is visible within the current viewport.
+   */
+  public readonly visible: Observable<boolean> = this.visible_;
+
+  public setVisible = (value: boolean): void => this.visible_.next(value);
+
+  public constructor(public readonly media: Observable<UserMediaViewModel>) {
+    super();
+  }
+}
+
+export class SpotlightTileViewModel extends ViewModel {
+  public constructor(
+    public readonly media: Observable<MediaViewModel[]>,
+    public readonly maximised: Observable<boolean>,
+  ) {
+    super();
+  }
+}
+
+export type TileViewModel = GridTileViewModel | SpotlightTileViewModel;
--- a/src/state/useObservable.ts
+++ b/src/state/useObservable.ts
@@ -1,34 +0,0 @@
-/*
-Copyright 2023, 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only
-Please see LICENSE in the repository root for full details.
-*/
-
-import { Ref, useCallback, useRef } from "react";
-import { BehaviorSubject, Observable } from "rxjs";
-
-import { useInitial } from "../useInitial";
-
-/**
- * React hook that creates an Observable from a changing value. The Observable
- * replays its current value upon subscription and emits whenever the value
- * changes.
- */
-export function useObservable<T>(value: T): Observable<T> {
-  const subject = useRef<BehaviorSubject<T>>();
-  subject.current ??= new BehaviorSubject(value);
-  if (value !== subject.current.value) subject.current.next(value);
-  return subject.current;
-}
-
-/**
- * React hook that creates a ref and an Observable that emits any values
- * stored in the ref. The Observable replays the value currently stored in the
- * ref upon subscription.
- */
-export function useObservableRef<T>(initialValue: T): [Observable<T>, Ref<T>] {
-  const subject = useInitial(() => new BehaviorSubject(initialValue));
-  const ref = useCallback((value: T) => subject.next(value), [subject]);
-  return [subject, ref];
-}
--- a/src/tile/GridTile.test.tsx
+++ b/src/tile/GridTile.test.tsx
@@ -9,12 +9,20 @@ import { RemoteTrackPublication } from "livekit-client";
 import { test, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
+import { of } from "rxjs";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";

 import { GridTile } from "./GridTile";
 import { withRemoteMedia } from "../utils/test";
+import { GridTileViewModel } from "../state/TileViewModel";
 import { ReactionsProvider } from "../useReactions";

+global.IntersectionObserver = class MockIntersectionObserver {
+  public observe(): void {}
+  public unobserve(): void {}
+  public disconnect(): void {}
+} as unknown as typeof IntersectionObserver;
+
 test("GridTile is accessible", async () => {
  await withRemoteMedia(
    {
@@ -42,11 +50,10 @@ test("GridTile is accessible", async () => {
      const { container } = render(
        <ReactionsProvider rtcSession={fakeRtcSession}>
          <GridTile
-            vm={vm}
+            vm={new GridTileViewModel(of(vm))}
            onOpenProfile={() => {}}
            targetWidth={300}
            targetHeight={200}
-            showVideo
            showSpeakingIndicators
          />
        </ReactionsProvider>,
--- a/src/tile/GridTile.tsx
+++ b/src/tile/GridTile.tsx
@@ -10,6 +10,7 @@ import {
  ReactNode,
  forwardRef,
  useCallback,
+  useRef,
  useState,
 } from "react";
 import { animated } from "@react-spring/web";
@@ -44,6 +45,8 @@ import {
 import { Slider } from "../Slider";
 import { MediaView } from "./MediaView";
 import { useLatest } from "../useLatest";
+import { GridTileViewModel } from "../state/TileViewModel";
+import { useMergedRefs } from "../useMergedRefs";
 import { useReactions } from "../useReactions";

 interface TileProps {
@@ -52,7 +55,6 @@ interface TileProps {
  targetWidth: number;
  targetHeight: number;
  displayName: string;
-  showVideo: boolean;
  showSpeakingIndicators: boolean;
 }

@@ -67,7 +69,6 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
  (
    {
      vm,
-      showVideo,
      showSpeakingIndicators,
      menuStart,
      menuEnd,
@@ -80,6 +81,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
    const { t } = useTranslation();
    const video = useObservableEagerState(vm.video);
    const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning);
+    const encryptionStatus = useObservableEagerState(vm.encryptionStatus);
    const audioEnabled = useObservableEagerState(vm.audioEnabled);
    const videoEnabled = useObservableEagerState(vm.videoEnabled);
    const speaking = useObservableEagerState(vm.speaking);
@@ -94,7 +96,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
      },
      [vm],
    );
-    const { raisedHands } = useReactions();
+    const { raisedHands, lowerHand } = useReactions();

    const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;

@@ -113,6 +115,8 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
    );

    const handRaised: Date | undefined = raisedHands[vm.member?.userId ?? ""];
+    const raisedHandOnClick =
+      vm.local && handRaised ? (): void => void lowerHand() : undefined;

    const showSpeaking = showSpeakingIndicators && speaking;

@@ -122,7 +126,8 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
        video={video}
        member={vm.member}
        unencryptedWarning={unencryptedWarning}
-        videoEnabled={videoEnabled && showVideo}
+        encryptionStatus={encryptionStatus}
+        videoEnabled={videoEnabled}
        videoFit={cropVideo ? "cover" : "contain"}
        className={classNames(className, styles.tile, {
          [styles.speaking]: showSpeaking,
@@ -158,6 +163,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
          </Menu>
        }
        raisedHandTime={handRaised}
+        raisedHandOnClick={raisedHandOnClick}
        {...props}
      />
    );
@@ -287,25 +293,27 @@ const RemoteUserMediaTile = forwardRef<
 RemoteUserMediaTile.displayName = "RemoteUserMediaTile";

 interface GridTileProps {
-  vm: UserMediaViewModel;
+  vm: GridTileViewModel;
  onOpenProfile: (() => void) | null;
  targetWidth: number;
  targetHeight: number;
  className?: string;
  style?: ComponentProps<typeof animated.div>["style"];
-  showVideo: boolean;
  showSpeakingIndicators: boolean;
 }

 export const GridTile = forwardRef<HTMLDivElement, GridTileProps>(
-  ({ vm, onOpenProfile, ...props }, ref) => {
-    const displayName = useDisplayName(vm);
+  ({ vm, onOpenProfile, ...props }, theirRef) => {
+    const ourRef = useRef<HTMLDivElement | null>(null);
+    const ref = useMergedRefs(ourRef, theirRef);
+    const media = useObservableEagerState(vm.media);
+    const displayName = useDisplayName(media);

-    if (vm instanceof LocalUserMediaViewModel) {
+    if (media instanceof LocalUserMediaViewModel) {
      return (
        <LocalUserMediaTile
          ref={ref}
-          vm={vm}
+          vm={media}
          onOpenProfile={onOpenProfile}
          displayName={displayName}
          {...props}
@@ -315,7 +323,7 @@ export const GridTile = forwardRef<HTMLDivElement, GridTileProps>(
      return (
        <RemoteUserMediaTile
          ref={ref}
-          vm={vm}
+          vm={media}
          displayName={displayName}
          {...props}
        />
--- a/src/tile/MediaView.module.css
+++ b/src/tile/MediaView.module.css
@@ -85,7 +85,7 @@ unconditionally select the container so we can use cqmin units */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
-  grid-template-areas: ". ." "nameTag button";
+  grid-template-areas: "status status" "nameTag button";
  gap: var(--cpd-space-1x);
  place-items: start;
 }
@@ -106,6 +106,25 @@ unconditionally select the container so we can use cqmin units */
  max-inline-size: 100%;
 }

+.status {
+  grid-area: status;
+  justify-self: center;
+  align-self: start;
+  padding: var(--cpd-space-1x);
+  padding-block: var(--cpd-space-1x);
+  color: var(--cpd-color-text-primary);
+  background-color: var(--cpd-color-bg-canvas-default);
+  display: flex;
+  align-items: center;
+  border-radius: var(--cpd-radius-pill-effect);
+  user-select: none;
+  overflow: hidden;
+  box-shadow: var(--small-drop-shadow);
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  text-align: center;
+}
+
 .nameTag > svg,
 .nameTag > span {
  flex-shrink: 0;
--- a/src/tile/MediaView.tsx
+++ b/src/tile/MediaView.tsx
@@ -17,6 +17,7 @@ import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
+import { EncryptionStatus } from "../state/MediaViewModel";
 import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
 import { showHandRaisedTimer, useSetting } from "../settings/settings";

@@ -31,10 +32,12 @@ interface Props extends ComponentProps<typeof animated.div> {
  member: RoomMember | undefined;
  videoEnabled: boolean;
  unencryptedWarning: boolean;
+  encryptionStatus: EncryptionStatus;
  nameTagLeadingIcon?: ReactNode;
  displayName: string;
  primaryButton?: ReactNode;
  raisedHandTime?: Date;
+  raisedHandOnClick?: () => void;
 }

 export const MediaView = forwardRef<HTMLDivElement, Props>(
@@ -53,7 +56,9 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
      nameTagLeadingIcon,
      displayName,
      primaryButton,
+      encryptionStatus,
      raisedHandTime,
+      raisedHandOnClick,
      ...props
    },
    ref,
@@ -67,7 +72,11 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
      <animated.div
        className={classNames(styles.media, className, {
          [styles.mirror]: mirror,
-          [styles.videoMuted]: !videoEnabled,
+          [styles.videoMuted]:
+            !videoEnabled ||
+            ![EncryptionStatus.Connecting, EncryptionStatus.Okay].includes(
+              encryptionStatus,
+            ),
        })}
        style={style}
        ref={ref}
@@ -93,10 +102,25 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
          )}
        </div>
        <div className={styles.fg}>
+          {encryptionStatus !== EncryptionStatus.Okay && (
+            <div className={styles.status}>
+              <Text as="span" size="sm" weight="medium" className={styles.name}>
+                {encryptionStatus === EncryptionStatus.Connecting &&
+                  t("e2ee_encryption_status.connecting")}
+                {encryptionStatus === EncryptionStatus.KeyMissing &&
+                  t("e2ee_encryption_status.key_missing")}
+                {encryptionStatus === EncryptionStatus.KeyInvalid &&
+                  t("e2ee_encryption_status.key_invalid")}
+                {encryptionStatus === EncryptionStatus.PasswordInvalid &&
+                  t("e2ee_encryption_status.password_invalid")}
+              </Text>
+            </div>
+          )}
          <RaisedHandIndicator
            raisedHandTime={raisedHandTime}
            minature={avatarSize < 96}
            showTimer={handRaiseTimerVisible}
+            onClick={raisedHandOnClick}
          />
          {/* {keys &&
            keys.map(({ index, key }) => (
--- a/src/tile/SpotlightTile.test.tsx
+++ b/src/tile/SpotlightTile.test.tsx
@@ -9,9 +9,11 @@ import { test, expect, vi } from "vitest";
 import { isInaccessible, render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
 import userEvent from "@testing-library/user-event";
+import { of } from "rxjs";

 import { SpotlightTile } from "./SpotlightTile";
 import { withLocalMedia, withRemoteMedia } from "../utils/test";
+import { SpotlightTileViewModel } from "../state/TileViewModel";

 global.IntersectionObserver = class MockIntersectionObserver {
  public observe(): void {}
@@ -36,10 +38,9 @@ test("SpotlightTile is accessible", async () => {
          const toggleExpanded = vi.fn();
          const { container } = render(
            <SpotlightTile
-              vms={[vm1, vm2]}
+              vm={new SpotlightTileViewModel(of([vm1, vm2]), of(false))}
              targetWidth={300}
              targetHeight={200}
-              maximised={false}
              expanded={false}
              onToggleExpanded={toggleExpanded}
              showIndicators
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -22,7 +22,7 @@ import {
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { animated } from "@react-spring/web";
 import { Observable, map } from "rxjs";
-import { useObservableEagerState } from "observable-hooks";
+import { useObservableEagerState, useObservableRef } from "observable-hooks";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { TrackReferenceOrPlaceholder } from "@livekit/components-core";
@@ -31,6 +31,7 @@ import { RoomMember } from "matrix-js-sdk/src/matrix";
 import { MediaView } from "./MediaView";
 import styles from "./SpotlightTile.module.css";
 import {
+  EncryptionStatus,
  LocalUserMediaViewModel,
  MediaViewModel,
  ScreenShareViewModel,
@@ -39,9 +40,9 @@ import {
 } from "../state/MediaViewModel";
 import { useInitial } from "../useInitial";
 import { useMergedRefs } from "../useMergedRefs";
-import { useObservableRef } from "../state/useObservable";
 import { useReactiveState } from "../useReactiveState";
 import { useLatest } from "../useLatest";
+import { SpotlightTileViewModel } from "../state/TileViewModel";

 interface SpotlightItemBaseProps {
  className?: string;
@@ -51,6 +52,7 @@ interface SpotlightItemBaseProps {
  video: TrackReferenceOrPlaceholder | undefined;
  member: RoomMember | undefined;
  unencryptedWarning: boolean;
+  encryptionStatus: EncryptionStatus;
  displayName: string;
  "aria-hidden"?: boolean;
 }
@@ -86,14 +88,16 @@ const SpotlightUserMediaItem = forwardRef<
  const videoEnabled = useObservableEagerState(vm.videoEnabled);
  const cropVideo = useObservableEagerState(vm.cropVideo);

-  const baseProps: SpotlightUserMediaItemBaseProps = {
+  const baseProps: SpotlightUserMediaItemBaseProps &
+    RefAttributes<HTMLDivElement> = {
+    ref,
    videoEnabled,
    videoFit: cropVideo ? "cover" : "contain",
    ...props,
  };

  return vm instanceof LocalUserMediaViewModel ? (
-    <SpotlightLocalUserMediaItem ref={ref} vm={vm} {...baseProps} />
+    <SpotlightLocalUserMediaItem vm={vm} {...baseProps} />
  ) : (
    <MediaView mirror={false} {...baseProps} />
  );
@@ -130,6 +134,7 @@ const SpotlightItem = forwardRef<HTMLDivElement, SpotlightItemProps>(
    const displayName = useDisplayName(vm);
    const video = useObservableEagerState(vm.video);
    const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning);
+    const encryptionStatus = useObservableEagerState(vm.encryptionStatus);

    // Hook this item up to the intersection observer
    useEffect(() => {
@@ -156,6 +161,7 @@ const SpotlightItem = forwardRef<HTMLDivElement, SpotlightItemProps>(
      member: vm.member,
      unencryptedWarning,
      displayName,
+      encryptionStatus,
      "aria-hidden": ariaHidden,
    };

@@ -175,8 +181,7 @@ const SpotlightItem = forwardRef<HTMLDivElement, SpotlightItemProps>(
 SpotlightItem.displayName = "SpotlightItem";

 interface Props {
-  vms: MediaViewModel[];
-  maximised: boolean;
+  vm: SpotlightTileViewModel;
  expanded: boolean;
  onToggleExpanded: (() => void) | null;
  targetWidth: number;
@@ -189,8 +194,7 @@ interface Props {
 export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
  (
    {
-      vms,
-      maximised,
+      vm,
      expanded,
      onToggleExpanded,
      targetWidth,
@@ -202,14 +206,16 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
    theirRef,
  ) => {
    const { t } = useTranslation();
-    const [root, ourRef] = useObservableRef<HTMLDivElement | null>(null);
+    const [ourRef, root] = useObservableRef<HTMLDivElement | null>(null);
    const ref = useMergedRefs(ourRef, theirRef);
-    const [visibleId, setVisibleId] = useState(vms[0].id);
-    const latestVms = useLatest(vms);
+    const maximised = useObservableEagerState(vm.maximised);
+    const media = useObservableEagerState(vm.media);
+    const [visibleId, setVisibleId] = useState(media[0].id);
+    const latestMedia = useLatest(media);
    const latestVisibleId = useLatest(visibleId);
-    const visibleIndex = vms.findIndex((vm) => vm.id === visibleId);
+    const visibleIndex = media.findIndex((vm) => vm.id === visibleId);
    const canGoBack = visibleIndex > 0;
-    const canGoToNext = visibleIndex !== -1 && visibleIndex < vms.length - 1;
+    const canGoToNext = visibleIndex !== -1 && visibleIndex < media.length - 1;

    // To keep track of which item is visible, we need an intersection observer
    // hooked up to the root element and the items. Because the items will run
@@ -234,28 +240,30 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(

    const [scrollToId, setScrollToId] = useReactiveState<string | null>(
      (prev) =>
-        prev == null || prev === visibleId || vms.every((vm) => vm.id !== prev)
+        prev == null ||
+        prev === visibleId ||
+        media.every((vm) => vm.id !== prev)
          ? null
          : prev,
      [visibleId],
    );

    const onBackClick = useCallback(() => {
-      const vms = latestVms.current;
-      const visibleIndex = vms.findIndex(
+      const media = latestMedia.current;
+      const visibleIndex = media.findIndex(
        (vm) => vm.id === latestVisibleId.current,
      );
-      if (visibleIndex > 0) setScrollToId(vms[visibleIndex - 1].id);
-    }, [latestVisibleId, latestVms, setScrollToId]);
+      if (visibleIndex > 0) setScrollToId(media[visibleIndex - 1].id);
+    }, [latestVisibleId, latestMedia, setScrollToId]);

    const onNextClick = useCallback(() => {
-      const vms = latestVms.current;
-      const visibleIndex = vms.findIndex(
+      const media = latestMedia.current;
+      const visibleIndex = media.findIndex(
        (vm) => vm.id === latestVisibleId.current,
      );
-      if (visibleIndex !== -1 && visibleIndex !== vms.length - 1)
-        setScrollToId(vms[visibleIndex + 1].id);
-    }, [latestVisibleId, latestVms, setScrollToId]);
+      if (visibleIndex !== -1 && visibleIndex !== media.length - 1)
+        setScrollToId(media[visibleIndex + 1].id);
+    }, [latestVisibleId, latestMedia, setScrollToId]);

    const ToggleExpandIcon = expanded ? CollapseIcon : ExpandIcon;

@@ -277,7 +285,7 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
          </button>
        )}
        <div className={styles.contents}>
-          {vms.map((vm) => (
+          {media.map((vm) => (
            <SpotlightItem
              key={vm.id}
              vm={vm}
@@ -316,10 +324,10 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
        {!expanded && (
          <div
            className={classNames(styles.indicators, {
-              [styles.show]: showIndicators && vms.length > 1,
+              [styles.show]: showIndicators && media.length > 1,
            })}
          >
-            {vms.map((vm) => (
+            {media.map((vm) => (
              <div
                key={vm.id}
                className={styles.item}
--- a/src/useReactions.test.tsx
+++ b/src/useReactions.test.tsx
@@ -46,7 +46,7 @@ const membership: Record<string, string> = {
 };

 const TestComponent: FC = () => {
-  const { raisedHands, myReactionId } = useReactions();
+  const { raisedHands } = useReactions();
  return (
    <div>
      <ul>
@@ -57,7 +57,6 @@ const TestComponent: FC = () => {
          </li>
        ))}
      </ul>
-      <p>{myReactionId ? "Local reaction" : "No local reaction"}</p>
    </div>
  );
 };
@@ -175,15 +174,6 @@ describe("useReactions", () => {
    );
    expect(queryByRole("list")?.children).to.have.lengthOf(0);
  });
-  test("handles own raised hand", async () => {
-    const room = new MockRoom();
-    const rtcSession = new MockRTCSession(room);
-    const { queryByText } = render(
-      <TestComponentWrapper rtcSession={rtcSession} />,
-    );
-    await act(() => room.testSendReaction(memberEventAlice));
-    expect(queryByText("Local reaction")).toBeTruthy();
-  });
  test("handles incoming raised hand", async () => {
    const room = new MockRoom();
    const rtcSession = new MockRTCSession(room);
--- a/src/useReactions.tsx
+++ b/src/useReactions.tsx
@@ -30,7 +30,7 @@ import { useClientState } from "./ClientContext";
 interface ReactionsContextType {
  raisedHands: Record<string, Date>;
  supportsReactions: boolean;
-  myReactionId: string | null;
+  lowerHand: () => Promise<void>;
 }

 const ReactionsContext = createContext<ReactionsContextType | undefined>(
@@ -80,13 +80,6 @@ export const ReactionsProvider = ({
  const room = rtcSession.room;
  const myUserId = room.client.getUserId();

-  // Calculate our own reaction event.
-  const myReactionId = useMemo(
-    (): string | null =>
-      (myUserId && raisedHands[myUserId]?.reactionEventId) ?? null,
-    [raisedHands, myUserId],
-  );
-
  // Reduce the data down for the consumers.
  const resultRaisedHands = useMemo(
    () =>
@@ -235,12 +228,37 @@ export const ReactionsProvider = ({
    };
  }, [room, addRaisedHand, removeRaisedHand, memberships, raisedHands]);

+  const lowerHand = useCallback(async () => {
+    if (
+      !myUserId ||
+      clientState?.state !== "valid" ||
+      !clientState.authenticated ||
+      !raisedHands[myUserId]
+    ) {
+      return;
+    }
+    const myReactionId = raisedHands[myUserId].reactionEventId;
+    if (!myReactionId) {
+      logger.warn(`Hand raised but no reaction event to redact!`);
+      return;
+    }
+    try {
+      await clientState.authenticated.client.redactEvent(
+        rtcSession.room.roomId,
+        myReactionId,
+      );
+      logger.debug("Redacted raise hand event");
+    } catch (ex) {
+      logger.error("Failed to redact reaction event", myReactionId, ex);
+    }
+  }, [myUserId, raisedHands, clientState, rtcSession]);
+
  return (
    <ReactionsContext.Provider
      value={{
        raisedHands: resultRaisedHands,
        supportsReactions,
-        myReactionId,
+        lowerHand,
      }}
    >
      {children}
--- a/src/utils/iter.test.ts
+++ b/src/utils/iter.test.ts
@@ -0,0 +1,22 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { test, expect } from "vitest";
+
+import { fillGaps } from "./iter";
+
+test("fillGaps filters out gaps", () => {
+  expect([
+    ...fillGaps([1, undefined, undefined, undefined, 3], [2]),
+  ]).toStrictEqual([1, 2, 3]);
+});
+
+test("fillGaps adds extra filler elements to the end", () => {
+  expect([
+    ...fillGaps([1, undefined, 3, undefined], [2, 4, 5, 6]),
+  ]).toStrictEqual([1, 2, 3, 4, 5, 6]);
+});
--- a/src/utils/iter.ts
+++ b/src/utils/iter.ts
@@ -0,0 +1,36 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * Fills in the 'undefined' gaps in a collection by drawing items from a second
+ * collection, or simply filtering out the gap if no items are left. If filler
+ * items remain at the end, they will be appended to the resulting collection.
+ */
+export function fillGaps<A>(
+  gappy: Iterable<A | undefined>,
+  filler: Iterable<A>,
+): Iterable<A> {
+  return {
+    [Symbol.iterator](): Iterator<A> {
+      const gappyIter = gappy[Symbol.iterator]();
+      const fillerIter = filler[Symbol.iterator]();
+      return {
+        next(): IteratorResult<A> {
+          let gappyItem: IteratorResult<A | undefined>;
+          do {
+            gappyItem = gappyIter.next();
+            if (!gappyItem.done && gappyItem.value !== undefined)
+              return gappyItem as IteratorYieldResult<A>;
+            const fillerItem = fillerIter.next();
+            if (!fillerItem.done) return fillerItem;
+          } while (!gappyItem.done);
+          return gappyItem;
+        },
+      };
+    },
+  };
+}
--- a/src/utils/test.ts
+++ b/src/utils/test.ts
@@ -4,7 +4,7 @@ Copyright 2023, 2024 New Vector Ltd.
 SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
-import { map, of } from "rxjs";
+import { map, Observable, of } from "rxjs";
 import { RunHelpers, TestScheduler } from "rxjs/testing";
 import { expect, vi } from "vitest";
 import {
@@ -130,8 +130,27 @@ export function mockMatrixRoom(room: Partial<MatrixRoom>): MatrixRoom {
  return { ...mockEmitter(), ...room } as Partial<MatrixRoom> as MatrixRoom;
 }

-export function mockLivekitRoom(room: Partial<LivekitRoom>): LivekitRoom {
-  return { ...mockEmitter(), ...room } as Partial<LivekitRoom> as LivekitRoom;
+export function mockLivekitRoom(
+  room: Partial<LivekitRoom>,
+  {
+    remoteParticipants,
+  }: { remoteParticipants?: Observable<RemoteParticipant[]> } = {},
+): LivekitRoom {
+  const livekitRoom = {
+    ...mockEmitter(),
+    ...room,
+  } as Partial<LivekitRoom> as LivekitRoom;
+  if (remoteParticipants) {
+    livekitRoom.remoteParticipants = new Map();
+    remoteParticipants.subscribe((newRemoteParticipants) => {
+      livekitRoom.remoteParticipants.clear();
+      newRemoteParticipants.forEach((p) => {
+        livekitRoom.remoteParticipants.set(p.identity, p);
+      });
+    });
+  }
+
+  return livekitRoom;
 }

 export function mockLocalParticipant(
@@ -150,13 +169,15 @@ export async function withLocalMedia(
  member: Partial<RoomMember>,
  continuation: (vm: LocalUserMediaViewModel) => void | Promise<void>,
 ): Promise<void> {
+  const localParticipant = mockLocalParticipant({});
  const vm = new LocalUserMediaViewModel(
    "local",
    mockRoomMember(member),
-    of(mockLocalParticipant({})),
+    of(localParticipant),
    {
      kind: E2eeType.PER_PARTICIPANT,
    },
+    mockLivekitRoom({ localParticipant }),
  );
  try {
    await continuation(vm);
@@ -183,13 +204,15 @@ export async function withRemoteMedia(
  participant: Partial<RemoteParticipant>,
  continuation: (vm: RemoteUserMediaViewModel) => void | Promise<void>,
 ): Promise<void> {
+  const remoteParticipant = mockRemoteParticipant(participant);
  const vm = new RemoteUserMediaViewModel(
    "remote",
    mockRoomMember(member),
-    of(mockRemoteParticipant(participant)),
+    of(remoteParticipant),
    {
      kind: E2eeType.PER_PARTICIPANT,
    },
+    mockLivekitRoom({}, { remoteParticipants: of([remoteParticipant]) }),
  );
  try {
    await continuation(vm);
--- a/yarn.lock
+++ b/yarn.lock