Precompress assets and set the right cache headers

* Load the Intl.Segmenter polyfill only if needed

* Also polyfill Intl.DurationFormat only if needed

* Polyfill Intl.* in tests

* Load the default translations in tests

* Instanciate the Intl.DurationFormat in the component

.eslintrc.cjs

@@ -8,12 +8,13 @@ Please see LICENSE in the repository root for full details.
 `;
 
 module.exports = {
-  plugins: ["matrix-org"],
+  plugins: ["matrix-org", "rxjs"],
   extends: [
     "plugin:matrix-org/react",
     "plugin:matrix-org/a11y",
     "plugin:matrix-org/typescript",
     "prettier",
+    "plugin:rxjs/recommended",
   ],
   parserOptions: {
     ecmaVersion: "latest",

.github/workflows/build.yaml

@@ -23,3 +23,4 @@ jobs:
       SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
       SENTRY_URL: ${{ secrets.SENTRY_URL }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/element-call.yaml

@@ -14,6 +14,8 @@ on:
         required: true
       SENTRY_AUTH_TOKEN:
         required: true
+      CODECOV_TOKEN:
+        required: false
 
 jobs:
   build:
@@ -36,6 +38,7 @@ jobs:
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
           SENTRY_URL: ${{ secrets.SENTRY_URL }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
           VITE_APP_VERSION: ${{ inputs.vite_app_version }}
           NODE_OPTIONS: "--max-old-space-size=4096"
       - name: Upload Artifact

Dockerfile

@@ -2,9 +2,3 @@ FROM nginxinc/nginx-unprivileged:alpine
 
 COPY ./dist /app
 COPY config/nginx.conf /etc/nginx/conf.d/default.conf
-
-USER root
-
-RUN rm -rf /usr/share/nginx/html
-
-USER 101

README.md

@@ -106,7 +106,7 @@ rc_message:
 
 MSC3266 allows to request a room summary of rooms you are not joined. The
 summary contains the room join rules. We need that to decide if the user gets
-prompted with the option to knock ("ask to join"), a cannot join error or the
+prompted with the option to knock ("Request to join call"), a cannot join error or the
 join view.
 
 Element Call requires a Livekit SFU alongside a [Livekit JWT

config/nginx.conf

@@ -3,23 +3,16 @@ server {
     server_name  localhost;
 
     root   /app;
+    gzip_static on;
 
     location / {
-        # disable cache entriely by default (apart from Etag which is accurate enough)
-        add_header Cache-Control 'private no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
-        if_modified_since off;
-        expires off;
-        # also turn off last-modified since they are just the timestamps of the file in the docker image
-        # and may or may not bear any resemblance to when the resource changed
-        add_header Last-Modified "";
-
-        try_files $uri /$uri /index.html;
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
     }
 
     # assets can be cached because they have hashed filenames
     location /assets {
-        expires 1w;
-        add_header Cache-Control "public, no-transform";
+        add_header Cache-Control "public, immutable, max-age=31536000";
     }
 
     location /apple-app-site-association {

package.json

@@ -24,7 +24,11 @@
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.0",
+    "@codecov/vite-plugin": "^1.3.0",
+    "@fontsource/inconsolata": "^5.1.0",
+    "@fontsource/inter": "^5.1.0",
     "@formatjs/intl-durationformat": "^0.6.1",
+    "@formatjs/intl-segmenter": "^11.7.3",
     "@livekit/components-core": "^0.11.0",
     "@livekit/components-react": "^2.0.0",
     "@opentelemetry/api": "^1.4.0",
@@ -47,8 +51,9 @@
     "@types/content-type": "^1.1.5",
     "@types/grecaptcha": "^3.0.9",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash": "^4.14.199",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.0.0",
+    "@types/pako": "^2.0.3",
     "@types/qrcode": "^1.5.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
@@ -57,8 +62,8 @@
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^1.0.0",
-    "@vector-im/compound-web": "^6.0.0",
+    "@vector-im/compound-design-tokens": "^1.9.1",
+    "@vector-im/compound-web": "^7.2.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitest/coverage-v8": "^2.0.5",
@@ -73,6 +78,7 @@
     "eslint-plugin-matrix-org": "^1.2.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-rxjs": "^5.0.3",
     "eslint-plugin-unicorn": "^56.0.0",
     "global-jsdom": "^25.0.0",
     "history": "^4.0.0",
@@ -83,10 +89,10 @@
     "jsdom": "^25.0.0",
     "knip": "^5.27.2",
     "livekit-client": "^2.5.7",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#0a29063bc9e61ee70ca43820d4bb91f6a27f1237",
-    "matrix-widget-api": "^1.8.2",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#8e9a04cdec0f88fc876bbbf406db55b0677f005d",
+    "matrix-widget-api": "^1.10.0",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
     "pako": "^2.0.4",
@@ -106,8 +112,9 @@
     "typescript": "^5.1.6",
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
-    "vaul": "^0.9.0",
+    "vaul": "^1.0.0",
     "vite": "^5.0.0",
+    "vite-plugin-compression2": "^1.3.1",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^4.0.0",
     "vitest": "^2.0.0",

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}}"
 }

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}}"
 }

public/locales/de/app.json

@@ -4,16 +4,23 @@
   },
   "action": {
     "close": "Schließen",
-    "copy": "Kopieren",
+    "close_search": "Suche beenden",
     "copy_link": "Link kopieren",
+    "edit": "Bearbeiten",
     "go": "Los geht’s",
     "invite": "Einladen",
+    "lower_hand": "Handmeldung zurücknehmen",
     "no": "Nein",
+    "open_search": "Suchen",
+    "pick_reaction": "Reaktion auswählen",
+    "raise_hand": "Handmeldung",
+    "raise_hand_or_send_reaction": "Handmeldung oder Reaktion senden",
     "register": "Registrieren",
     "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 +45,46 @@
   },
   "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",
+    "reaction": "Reaktion",
+    "search": "Suche",
     "settings": "Einstellungen",
+    "something_went_wrong": "Etwas ist schief gelaufen",
     "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 Teilnahmeanfrage wurde abgelehnt.",
+    "knock_reject_heading": "Zugriff verweigert",
+    "reason": "Grund"
+  },
   "hangup_button_label": "Anruf beenden",
   "header_label": "Element Call-Startseite",
   "header_participants_label": "Teilnehmende",
@@ -71,10 +98,13 @@
     "title": "An bestehendem Anruf teilnehmen?"
   },
   "layout_grid_label": "Raster",
-  "layout_spotlight_label": "Rampenlicht",
+  "layout_spotlight_label": "Fokus",
   "lobby": {
+    "ask_to_join": "Teilnahmeanfrage senden",
+    "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! Warten auf Teilnahmefreigabe …"
   },
   "log_in": "Anmelden",
   "logging_in": "Anmelden …",
@@ -82,9 +112,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",
+  "mute_microphone_button_label": "Mikrofon stumm schalten",
+  "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.",
@@ -94,6 +128,7 @@
   "rageshake_sending": "Senden …",
   "rageshake_sending_logs": "Sende Debug-Protokolle …",
   "rageshake_sent": "Danke!",
+  "reaction_search": "Reaktionen suchen...",
   "recaptcha_caption": "Diese Seite wird durch reCAPTCHA geschützt und es gelten Googles <2>Datenschutzerklärung</2> und <6>Nutzungsbedingungen</6>. <9></9>Mit einem Klick auf „Registrieren“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
   "recaptcha_dismissed": "Recaptcha abgelehnt",
   "recaptcha_not_loaded": "Recaptcha nicht geladen",
@@ -103,25 +138,40 @@
   },
   "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": {
+    "audio_tab": {
+      "effect_volume_description": "Lautstärke anpassen, mit der Reaktionen und Handmeldungen abgespielt werden",
+      "effect_volume_label": "Lautstärke der Soundeffekte"
+    },
     "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",
-    "feedback_tab_send_logs_label": "Debug-Protokolle einschließen",
+    "feedback_tab_send_logs_label": "Debug-Protokolle anhängen",
     "feedback_tab_thank_you": "Danke, wir haben deine Rückmeldung erhalten!",
     "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": {
+      "reactions_play_sound_description": "Einen Soundeffekt abspielen, wenn jemand eine Reaktion sendet",
+      "reactions_play_sound_label": "Reaktionstöne abspielen",
+      "reactions_show_description": "Reaktionen anzeigen",
+      "reactions_show_label": "Zeige eine Animation, wenn jemand eine Reaktion sendet.",
+      "reactions_title": "Reaktionen"
+    },
+    "preferences_tab_body": "Hier können zusätzliche Optionen für individuelle Anforderungen eingestellt werden",
+    "preferences_tab_h4": "Einstellungen",
+    "preferences_tab_show_hand_raised_timer_description": "Einen Timer zur Handmeldung anzeigen",
+    "preferences_tab_show_hand_raised_timer_label": "Dauer der Handmeldung anzeigen",
+    "speaker_device_selection_label": "Lautsprecher"
   },
   "star_rating_input_label_one": "{{count}} Stern",
   "star_rating_input_label_other": "{{count}} Sterne",
@@ -130,13 +180,19 @@
   "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}}",
+  "unmute_microphone_button_label": "Mikrofon einschalten",
+  "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 stumm schalten",
+    "muted_for_me": "Für mich stumm geschaltet",
+    "volume": "Lautstärke"
+  }
 }

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}}"
 }

public/locales/en-GB/app.json

@@ -4,11 +4,17 @@
   },
   "action": {
     "close": "Close",
+    "close_search": "Close search",
     "copy_link": "Copy link",
     "edit": "Edit",
     "go": "Go",
     "invite": "Invite",
+    "lower_hand": "Lower hand",
     "no": "No",
+    "open_search": "Open search",
+    "pick_reaction": "Pick reaction",
+    "raise_hand": "Raise hand",
+    "raise_hand_or_send_reaction": "Raise hand or send reaction",
     "register": "Register",
     "remove": "Remove",
     "sign_in": "Sign in",
@@ -55,8 +61,10 @@
     "password": "Password",
     "preferences": "Preferences",
     "profile": "Profile",
-    "raise_hand": "Raise hand",
+    "reaction": "Reaction",
+    "search": "Search",
     "settings": "Settings",
+    "something_went_wrong": "Something went wrong",
     "unencrypted": "Not encrypted",
     "username": "Username",
     "video": "Video"
@@ -73,8 +81,8 @@
     "call_ended_heading": "Call ended",
     "failed_heading": "Failed to join",
     "failed_text": "Call not found or is not accessible.",
-    "knock_reject_body": "The room members declined your request to join.",
-    "knock_reject_heading": "Not allowed to join",
+    "knock_reject_body": "Your request to join was declined.",
+    "knock_reject_heading": "Access denied",
     "reason": "Reason"
   },
   "hangup_button_label": "End call",
@@ -92,11 +100,11 @@
   "layout_grid_label": "Grid",
   "layout_spotlight_label": "Spotlight",
   "lobby": {
-    "ask_to_join": "Ask to join call",
+    "ask_to_join": "Request to join call",
     "join_as_guest": "Join as guest",
     "join_button": "Join call",
     "leave_button": "Back to recents",
-    "waiting_for_invite": "Request sent"
+    "waiting_for_invite": "Request sent! Waiting for permission to join…"
   },
   "log_in": "Log In",
   "logging_in": "Logging in…",
@@ -120,6 +128,7 @@
   "rageshake_sending": "Sending…",
   "rageshake_sending_logs": "Sending debug logs…",
   "rageshake_sent": "Thanks!",
+  "reaction_search": "Search reactions…",
   "recaptcha_caption": "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>",
   "recaptcha_dismissed": "Recaptcha dismissed",
   "recaptcha_not_loaded": "Recaptcha not loaded",
@@ -135,6 +144,10 @@
   "room_auth_view_eula_caption": "By clicking \"Continue\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "screenshare_button_label": "Share screen",
   "settings": {
+    "audio_tab": {
+      "effect_volume_description": "Adjust the volume at which reactions and hand raised effects play",
+      "effect_volume_label": "Sound effect volume"
+    },
     "developer_settings_label": "Developer Settings",
     "developer_settings_label_description": "Expose developer settings in the settings window.",
     "developer_tab_title": "Developer",
@@ -147,6 +160,13 @@
     "feedback_tab_title": "Feedback",
     "more_tab_title": "More",
     "opt_in_description": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
+    "preferences_tab": {
+      "reactions_play_sound_description": "Play a sound effect when anyone sends a reaction into a call.",
+      "reactions_play_sound_label": "Play reaction sounds",
+      "reactions_show_description": "Show reactions",
+      "reactions_show_label": "Show an animation when anyone sends a reaction.",
+      "reactions_title": "Reactions"
+    },
     "preferences_tab_body": "Here you can configure extra options for an improved experience",
     "preferences_tab_h4": "Preferences",
     "preferences_tab_show_hand_raised_timer_description": "Show a timer when a participant raises their hand",
@@ -172,6 +192,7 @@
     "collapse": "Collapse",
     "expand": "Expand",
     "mute_for_me": "Mute for me",
+    "muted_for_me": "Muted for me",
     "volume": "Volume"
   }
 }

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}}"
 }

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}}"
 }

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": "نسخه: {{نسخه}}"
 }

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}}"
 }

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}}"
 }

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}}"
 }

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}}"
 }

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}}"
 }

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}}"
 }

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}}"
 }

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}}"
 }

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",

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}}"
 }

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}}"
 }

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}}"
 }

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}}"
 }

src/@types/global.d.ts

@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import "matrix-js-sdk/src/@types/global";
+import type { DurationFormat as PolyfillDurationFormat } from "@formatjs/intl-durationformat";
 import { Controls } from "../controls";
 
 declare global {
@@ -23,4 +24,9 @@ declare global {
     // Safari only supports this prefixed, so tell the type system about it
     webkitRequestFullscreen: () => void;
   }
+
+  namespace Intl {
+    // Add DurationFormat as part of the Intl namespace because we polyfill it
+    const DurationFormat: typeof PolyfillDurationFormat;
+  }
 }

src/@types/matrix-js-sdk.d.ts

@@ -0,0 +1,18 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  ElementCallReactionEventType,
+  ECallReactionEventContent,
+} from "../reactions";
+
+// Extend Matrix JS SDK types via Typescript declaration merging to support unspecced event fields and types
+declare module "matrix-js-sdk/src/types" {
+  export interface TimelineEvents {
+    [ElementCallReactionEventType]: ECallReactionEventContent;
+  }
+}

src/ClientContext.tsx

@@ -16,19 +16,13 @@ import {
   useMemo,
 } from "react";
 import { useHistory } from "react-router-dom";
-import {
-  ClientEvent,
-  ICreateClientOpts,
-  MatrixClient,
-} from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
-import { MatrixError } from "matrix-js-sdk/src/matrix";
-import { WidgetApi } from "matrix-widget-api";
+import { ClientEvent, type MatrixClient } from "matrix-js-sdk/src/client";
 
+import type { WidgetApi } from "matrix-widget-api";
 import { ErrorView } from "./FullScreenView";
-import { fallbackICEServerAllowed, initClient } from "./utils/matrix";
 import { widget } from "./widget";
 import {
   PosthogAnalytics,
@@ -36,7 +30,6 @@ import {
 } from "./analytics/PosthogAnalytics";
 import { translatedError } from "./TranslatedError";
 import { useEventTarget } from "./useEvents";
-import { Config } from "./config/Config";
 
 declare global {
   interface Window {
@@ -359,7 +352,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   );
 };
 
-type InitResult = {
+export type InitResult = {
   widgetApi: WidgetApi | null;
   client: MatrixClient;
   passwordlessUser: boolean;
@@ -376,50 +369,8 @@ async function loadClient(): Promise<InitResult | null> {
       passwordlessUser: false,
     };
   } else {
-    // We're running as a standalone application
-    try {
-      const session = loadSession();
-      if (!session) {
-        logger.log("No session stored; continuing without a client");
-        return null;
-      }
-
-      logger.log("Using a standalone client");
-
-      /* eslint-disable camelcase */
-      const { user_id, device_id, access_token, passwordlessUser } = session;
-      const initClientParams: ICreateClientOpts = {
-        baseUrl: Config.defaultHomeserverUrl()!,
-        accessToken: access_token,
-        userId: user_id,
-        deviceId: device_id,
-        fallbackICEServerAllowed: fallbackICEServerAllowed,
-        livekitServiceURL: Config.get().livekit?.livekit_service_url,
-      };
-
-      try {
-        const client = await initClient(initClientParams, true);
-        return {
-          widgetApi: null,
-          client,
-          passwordlessUser,
-        };
-      } catch (err) {
-        if (err instanceof MatrixError && err.errcode === "M_UNKNOWN_TOKEN") {
-          // We can't use this session anymore, so let's log it out
-          logger.log(
-            "The session from local store is invalid; continuing without a client",
-          );
-          clearSession();
-          // returning null = "no client` pls register" (undefined = "loading" which is the current value when reaching this line)
-          return null;
-        }
-        throw err;
-      }
-    } catch (err) {
-      clearSession();
-      throw err;
-    }
+    const { initSPA } = await import("./utils/spa");
+    return initSPA(loadSession, clearSession);
   }
 }
 

src/Modal.test.tsx

@@ -0,0 +1,73 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test } from "vitest";
+import { render } from "@testing-library/react";
+import { ReactNode, useState } from "react";
+import { afterEach } from "node:test";
+import userEvent from "@testing-library/user-event";
+
+import { Modal } from "./Modal";
+
+const originalMatchMedia = window.matchMedia;
+afterEach(() => {
+  window.matchMedia = originalMatchMedia;
+});
+
+test("that nothing is rendered when the modal is closed", () => {
+  const { queryByRole } = render(
+    <Modal title="My modal" open={false}>
+      <p>This is the content.</p>
+    </Modal>,
+  );
+  expect(queryByRole("dialog")).toBeNull();
+});
+
+test("the content is rendered when the modal is open", () => {
+  const { queryByRole } = render(
+    <Modal title="My modal" open={true}>
+      <p>This is the content.</p>
+    </Modal>,
+  );
+  expect(queryByRole("dialog")).toMatchSnapshot();
+});
+
+test("the modal can be closed by clicking the close button", async () => {
+  function ModalFn(): ReactNode {
+    const [isOpen, setOpen] = useState(true);
+    return (
+      <Modal title="My modal" open={isOpen} onDismiss={() => setOpen(false)}>
+        <p>This is the content.</p>
+      </Modal>
+    );
+  }
+  const user = userEvent.setup();
+  const { queryByRole, getByRole } = render(<ModalFn />);
+  await user.click(getByRole("button", { name: "action.close" }));
+  expect(queryByRole("dialog")).toBeNull();
+});
+
+test("the modal renders as a drawer in mobile viewports", () => {
+  window.matchMedia = function (query): MediaQueryList {
+    return {
+      matches: query.includes("hover: none"),
+      addEventListener(): MediaQueryList {
+        return this as MediaQueryList;
+      },
+      removeEventListener(): MediaQueryList {
+        return this as MediaQueryList;
+      },
+    } as unknown as MediaQueryList;
+  };
+
+  const { queryByRole } = render(
+    <Modal title="My modal" open={true}>
+      <p>This is the content.</p>
+    </Modal>,
+  );
+  expect(queryByRole("dialog")).toMatchSnapshot();
+});

src/Modal.tsx

@@ -27,8 +27,21 @@ import { useMediaQuery } from "./useMediaQuery";
 
 export interface Props {
   title: string;
+  /**
+   * Hide the modal header. Used for smaller popups where the context is readily apparent.
+   * A title should still be specified for users using assistive technology.
+   */
+  hideHeader?: boolean;
   children: ReactNode;
   className?: string;
+  /**
+   * Class name to be used when in drawer mode (touchscreen).
+   */
+  classNameDrawer?: string;
+  /**
+   * Class name to be used when in modal mode (desktop).
+   */
+  classNameModal?: string;
   /**
    * The controlled open state of the modal.
    */
@@ -54,8 +67,11 @@ export interface Props {
  */
 export const Modal: FC<Props> = ({
   title,
+  hideHeader,
   children,
   className,
+  classNameDrawer,
+  classNameModal,
   open,
   onDismiss,
   tabbed,
@@ -84,11 +100,13 @@ export const Modal: FC<Props> = ({
           <Drawer.Content
             className={classNames(
               className,
+              classNameDrawer,
               overlayStyles.overlay,
               styles.modal,
               styles.drawer,
               { [styles.tabbed]: tabbed },
             )}
+            role="dialog"
             // Suppress the warning about there being no description; the modal
             // has an accessible title
             aria-describedby={undefined}
@@ -108,18 +126,46 @@ export const Modal: FC<Props> = ({
       </Drawer.Root>
     );
   } else {
+    const titleNode = (
+      <DialogTitle asChild>
+        <Heading as="h2" weight="semibold" size="md">
+          {title}
+        </Heading>
+      </DialogTitle>
+    );
+    const header = (
+      <div className={styles.header}>
+        {titleNode}
+        {onDismiss !== undefined && (
+          <DialogClose
+            className={styles.close}
+            data-testid="modal_close"
+            aria-label={t("action.close")}
+          >
+            <CloseIcon width={20} height={20} />
+          </DialogClose>
+        )}
+      </div>
+    );
+
     return (
       <DialogRoot open={open} onOpenChange={onOpenChange}>
         <DialogPortal>
           <DialogOverlay
             className={classNames(overlayStyles.bg, overlayStyles.animate)}
           />
-          {/* Suppress the warning about there being no description; the modal
-          has an accessible title */}
-          <DialogContent asChild aria-describedby={undefined} {...rest}>
+          <DialogContent
+            asChild
+            // Suppress the warning about there being no description; the modal
+            // has an accessible title
+            aria-describedby={undefined}
+            role="dialog"
+            {...rest}
+          >
             <Glass
               className={classNames(
                 className,
+                classNameModal,
                 overlayStyles.overlay,
                 overlayStyles.animate,
                 styles.modal,
@@ -128,22 +174,10 @@ export const Modal: FC<Props> = ({
               )}
             >
               <div className={styles.content}>
-                <div className={styles.header}>
-                  <DialogTitle asChild>
-                    <Heading as="h2" weight="semibold" size="md">
-                      {title}
-                    </Heading>
-                  </DialogTitle>
-                  {onDismiss !== undefined && (
-                    <DialogClose
-                      className={styles.close}
-                      data-testid="modal_close"
-                      aria-label={t("action.close")}
-                    >
-                      <CloseIcon width={20} height={20} />
-                    </DialogClose>
-                  )}
-                </div>
+                {!hideHeader ? header : null}
+                {hideHeader ? (
+                  <VisuallyHidden asChild>{titleNode}</VisuallyHidden>
+                ) : null}
                 <div className={styles.body}>{children}</div>
               </div>
             </Glass>

src/Slider.tsx

@@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { FC, useCallback } from "react";
 import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
 import classNames from "classnames";
+import { Tooltip } from "@vector-im/compound-web";
 
 import styles from "./Slider.module.css";
 
@@ -66,7 +67,10 @@ export const Slider: FC<Props> = ({
       <Track className={styles.track}>
         <Range className={styles.highlight} />
       </Track>
-      <Thumb className={styles.handle} aria-label={label} />
+      {/* Note: This is expected not to be visible on mobile.*/}
+      <Tooltip placement="top" label={Math.round(value * 100).toString() + "%"}>
+        <Thumb className={styles.handle} aria-label={label} />
+      </Tooltip>
     </Root>
   );
 };

src/__snapshots__/Modal.test.tsx.snap

@@ -0,0 +1,78 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`the content is rendered when the modal is open 1`] = `
+<div
+  aria-labelledby="radix-:r4:"
+  class="overlay animate modal dialog _glass_1x9g9_17"
+  data-state="open"
+  id="radix-:r3:"
+  role="dialog"
+  style="pointer-events: auto;"
+  tabindex="-1"
+>
+  <div
+    class="content"
+  >
+    <div
+      class="header"
+    >
+      <h2
+        class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+        id="radix-:r4:"
+      >
+        My modal
+      </h2>
+    </div>
+    <div
+      class="body"
+    >
+      <p>
+        This is the content.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`the modal renders as a drawer in mobile viewports 1`] = `
+<div
+  aria-labelledby="radix-:ra:"
+  class="overlay modal drawer"
+  data-state="open"
+  data-vaul-animate="true"
+  data-vaul-custom-container="false"
+  data-vaul-delayed-snap-points="false"
+  data-vaul-drawer=""
+  data-vaul-drawer-direction="bottom"
+  data-vaul-snap-points="false"
+  id="radix-:r9:"
+  role="dialog"
+  style="pointer-events: auto;"
+  tabindex="-1"
+>
+  <div
+    class="content"
+  >
+    <div
+      class="header"
+    >
+      <div
+        class="handle"
+      />
+      <h2
+        id="radix-:ra:"
+        style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
+      >
+        My modal
+      </h2>
+    </div>
+    <div
+      class="body"
+    >
+      <p>
+        This is the content.
+      </p>
+    </div>
+  </div>
+</div>
+`;

src/button/RaisedHandToggleButton.tsx

@@ -1,133 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only
-Please see LICENSE in the repository root for full details.
-*/
-
-import { Button as CpdButton, Tooltip } from "@vector-im/compound-web";
-import {
-  ComponentPropsWithoutRef,
-  FC,
-  ReactNode,
-  useCallback,
-  useState,
-} from "react";
-import { useTranslation } from "react-i18next";
-import { logger } from "matrix-js-sdk/src/logger";
-import { EventType, RelationType } from "matrix-js-sdk/src/matrix";
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
-
-import { useReactions } from "../useReactions";
-import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
-
-interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
-  raised: boolean;
-}
-
-const InnerButton: FC<InnerButtonProps> = ({ raised, ...props }) => {
-  const { t } = useTranslation();
-
-  return (
-    <Tooltip label={t("common.raise_hand")}>
-      <CpdButton
-        kind={raised ? "primary" : "secondary"}
-        {...props}
-        style={{ paddingLeft: 8, paddingRight: 8 }}
-      >
-        <p
-          role="img"
-          aria-hidden
-          style={{
-            width: "30px",
-            height: "0px",
-            display: "inline-block",
-            fontSize: "22px",
-          }}
-        >
-          ✋
-        </p>
-      </CpdButton>
-    </Tooltip>
-  );
-};
-
-interface RaisedHandToggleButtonProps {
-  rtcSession: MatrixRTCSession;
-  client: MatrixClient;
-}
-
-export function RaiseHandToggleButton({
-  client,
-  rtcSession,
-}: RaisedHandToggleButtonProps): ReactNode {
-  const { raisedHands, myReactionId } = useReactions();
-  const [busy, setBusy] = useState(false);
-  const userId = client.getUserId()!;
-  const isHandRaised = !!raisedHands[userId];
-  const memberships = useMatrixRTCSessionMemberships(rtcSession);
-
-  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);
-        } finally {
-          setBusy(false);
-        }
-      } else {
-        const myMembership = memberships.find((m) => m.sender === userId);
-        if (!myMembership?.eventId) {
-          logger.error("Cannot find own membership event");
-          return;
-        }
-        const parentEventId = myMembership.eventId;
-        try {
-          setBusy(true);
-          const reaction = await client.sendEvent(
-            rtcSession.room.roomId,
-            EventType.Reaction,
-            {
-              "m.relates_to": {
-                rel_type: RelationType.Annotation,
-                event_id: parentEventId,
-                key: "🖐️",
-              },
-            },
-          );
-          logger.debug("Sent raise hand event", reaction.event_id);
-        } catch (ex) {
-          logger.error("Failed to send reaction event", ex);
-        } finally {
-          setBusy(false);
-        }
-      }
-    };
-
-    void raiseHand();
-  }, [
-    client,
-    isHandRaised,
-    memberships,
-    myReactionId,
-    rtcSession.room.roomId,
-    userId,
-  ]);
-
-  return (
-    <InnerButton
-      disabled={busy}
-      onClick={toggleRaisedHand}
-      raised={isHandRaised}
-    />
-  );
-}

src/button/ReactionToggleButton.module.css

@@ -0,0 +1,92 @@
+.raisedButton > svg {
+  color: var(--cpd-color-icon-on-solid-primary);
+}
+
+.reactionPopupMenu {
+  display: flex;
+}
+
+.reactionPopupMenuModal {
+  width: fit-content !important;
+  top: 82vh !important;
+}
+
+.reactionPopupMenuModal > div > div {
+  padding-inline: var(--cpd-space-6x) !important;
+  padding-block: var(--cpd-space-6x) var(--cpd-space-8x) !important;
+}
+
+.reactionPopupMenu menu {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cpd-separator-spacing);
+}
+
+.reactionPopupMenu section {
+  height: fit-content;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.reactionPopupMenuItem {
+  list-style: none;
+}
+
+.reactionsMenu {
+  min-height: 3em;
+}
+
+.reactionButton {
+  padding: 1em;
+  font-size: 1.6em;
+  width: 1.4em;
+  height: 1.4em;
+  border-radius: var(--cpd-radius-pill-effect);
+}
+
+@media (max-width: 800px) {
+  .reactionButton {
+    padding: 1em;
+    font-size: 1em;
+    width: 1em;
+    height: 1em;
+    min-block-size: unset;
+  }
+}
+
+.verticalSeperator {
+  background-color: var(--cpd-color-gray-800);
+  width: 1px;
+  height: auto;
+  margin-left: var(--cpd-separator-spacing);
+  margin-right: var(--cpd-separator-spacing);
+}
+
+.searchForm {
+  display: flex;
+  flex-direction: row;
+  gap: var(--cpd-separator-spacing);
+  margin-bottom: var(--cpd-space-3x);
+}
+
+.searchForm > label {
+  flex: auto;
+}
+
+.alert {
+  margin-bottom: var(--cpd-space-3x);
+  animation: grow-in 200ms;
+  height: 2.5em;
+}
+
+@keyframes grow-in {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: 2.5em;
+  }
+}

src/button/ReactionToggleButton.test.tsx

@@ -0,0 +1,214 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { fireEvent, render } from "@testing-library/react";
+import { act } from "react";
+import { expect, test } from "vitest";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
+import { TooltipProvider } from "@vector-im/compound-web";
+import { userEvent } from "@testing-library/user-event";
+import { ReactNode } from "react";
+
+import {
+  MockRoom,
+  MockRTCSession,
+  TestReactionsWrapper,
+} from "../utils/testReactions";
+import { ReactionToggleButton } from "./ReactionToggleButton";
+import { ElementCallReactionEventType } from "../reactions";
+
+const memberUserIdAlice = "@alice:example.org";
+const memberEventAlice = "$membership-alice:example.org";
+
+const membership: Record<string, string> = {
+  [memberEventAlice]: memberUserIdAlice,
+};
+
+function TestComponent({
+  rtcSession,
+  room,
+}: {
+  rtcSession: MockRTCSession;
+  room: MockRoom;
+}): ReactNode {
+  return (
+    <TooltipProvider>
+      <TestReactionsWrapper rtcSession={rtcSession}>
+        <ReactionToggleButton
+          rtcSession={rtcSession as unknown as MatrixRTCSession}
+          client={room.client}
+        />
+      </TestReactionsWrapper>
+    </TooltipProvider>
+  );
+}
+
+test("Can open menu", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, container } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  expect(container).toMatchSnapshot();
+});
+
+test("Can raise hand", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, container } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.raise_hand"));
+  expect(room.testSentEvents).toEqual([
+    [
+      undefined,
+      "m.reaction",
+      {
+        "m.relates_to": {
+          event_id: memberEventAlice,
+          key: "🖐️",
+          rel_type: "m.annotation",
+        },
+      },
+    ],
+  ]);
+  expect(container).toMatchSnapshot();
+});
+
+test("Can lower hand", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, container } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  const reactionEvent = room.testSendHandRaise(memberEventAlice, membership);
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.lower_hand"));
+  expect(room.testRedactedEvents).toEqual([[undefined, reactionEvent]]);
+  expect(container).toMatchSnapshot();
+});
+
+test("Can react with emoji", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, getByText } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByText("🐶"));
+  expect(room.testSentEvents).toEqual([
+    [
+      undefined,
+      ElementCallReactionEventType,
+      {
+        "m.relates_to": {
+          event_id: memberEventAlice,
+          rel_type: "m.reference",
+        },
+        name: "dog",
+        emoji: "🐶",
+      },
+    ],
+  ]);
+});
+
+test("Can search for and send emoji", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByText, container, getByLabelText } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.open_search"));
+  // Search should autofocus.
+  await user.keyboard("crickets");
+  expect(container).toMatchSnapshot();
+  await user.click(getByText("🦗"));
+
+  expect(room.testSentEvents).toEqual([
+    [
+      undefined,
+      ElementCallReactionEventType,
+      {
+        "m.relates_to": {
+          event_id: memberEventAlice,
+          rel_type: "m.reference",
+        },
+        name: "crickets",
+        emoji: "🦗",
+      },
+    ],
+  ]);
+});
+
+test("Can search for and send emoji with the keyboard", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, getByPlaceholderText, container } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.open_search"));
+  const searchField = getByPlaceholderText("reaction_search");
+  // Search should autofocus.
+  await user.keyboard("crickets");
+  expect(container).toMatchSnapshot();
+  act(() => {
+    fireEvent.keyDown(searchField, { key: "Enter" });
+  });
+  expect(room.testSentEvents).toEqual([
+    [
+      undefined,
+      ElementCallReactionEventType,
+      {
+        "m.relates_to": {
+          event_id: memberEventAlice,
+          rel_type: "m.reference",
+        },
+        name: "crickets",
+        emoji: "🦗",
+      },
+    ],
+  ]);
+});
+
+test("Can close search", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, container } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.open_search"));
+  await user.click(getByLabelText("action.close_search"));
+  expect(container).toMatchSnapshot();
+});
+
+test("Can close search with the escape key", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, container, getByPlaceholderText } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.open_search"));
+  const searchField = getByPlaceholderText("reaction_search");
+  act(() => {
+    fireEvent.keyDown(searchField, { key: "Escape" });
+  });
+  expect(container).toMatchSnapshot();
+});

src/button/ReactionToggleButton.tsx

@@ -0,0 +1,350 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  Button as CpdButton,
+  Tooltip,
+  Search,
+  Form,
+  Alert,
+} from "@vector-im/compound-web";
+import {
+  SearchIcon,
+  CloseIcon,
+  RaisedHandSolidIcon,
+  ReactionIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import {
+  ChangeEventHandler,
+  ComponentPropsWithoutRef,
+  FC,
+  KeyboardEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { logger } from "matrix-js-sdk/src/logger";
+import { EventType, RelationType } from "matrix-js-sdk/src/matrix";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import classNames from "classnames";
+
+import { useReactions } from "../useReactions";
+import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
+import styles from "./ReactionToggleButton.module.css";
+import {
+  ReactionOption,
+  ReactionSet,
+  ElementCallReactionEventType,
+} from "../reactions";
+import { Modal } from "../Modal";
+
+interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
+  raised: boolean;
+  open: boolean;
+}
+
+const InnerButton: FC<InnerButtonProps> = ({ raised, open, ...props }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip label={t("action.raise_hand_or_send_reaction")}>
+      <CpdButton
+        className={classNames(raised && styles.raisedButton)}
+        aria-expanded={open}
+        aria-haspopup
+        aria-label={t("action.raise_hand_or_send_reaction")}
+        kind={raised || open ? "primary" : "secondary"}
+        iconOnly
+        Icon={raised ? RaisedHandSolidIcon : ReactionIcon}
+        {...props}
+      />
+    </Tooltip>
+  );
+};
+
+export function ReactionPopupMenu({
+  sendReaction,
+  toggleRaisedHand,
+  isHandRaised,
+  canReact,
+  errorText,
+}: {
+  sendReaction: (reaction: ReactionOption) => void;
+  toggleRaisedHand: () => void;
+  errorText?: string;
+  isHandRaised: boolean;
+  canReact: boolean;
+}): ReactNode {
+  const { t } = useTranslation();
+  const [searchText, setSearchText] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const onSearch = useCallback<ChangeEventHandler<HTMLInputElement>>((ev) => {
+    ev.preventDefault();
+    setSearchText(ev.target.value.trim().toLocaleLowerCase());
+  }, []);
+
+  const filteredReactionSet = useMemo(
+    () =>
+      ReactionSet.filter(
+        (reaction) =>
+          !isSearching ||
+          (!!searchText &&
+            (reaction.name.startsWith(searchText) ||
+              reaction.alias?.some((a) => a.startsWith(searchText)))),
+      ).slice(0, 6),
+    [searchText, isSearching],
+  );
+
+  const onSearchKeyDown = useCallback<KeyboardEventHandler<never>>(
+    (ev) => {
+      if (ev.key === "Enter") {
+        ev.preventDefault();
+        if (!canReact) {
+          return;
+        }
+        if (filteredReactionSet.length !== 1) {
+          return;
+        }
+        sendReaction(filteredReactionSet[0]);
+        setIsSearching(false);
+      } else if (ev.key === "Escape") {
+        ev.preventDefault();
+        setIsSearching(false);
+      }
+    },
+    [sendReaction, filteredReactionSet, canReact, setIsSearching],
+  );
+  const label = isHandRaised ? t("action.lower_hand") : t("action.raise_hand");
+  return (
+    <>
+      {errorText && (
+        <Alert
+          className={styles.alert}
+          type="critical"
+          title={t("common.something_went_wrong")}
+        >
+          {errorText}
+        </Alert>
+      )}
+      <div className={styles.reactionPopupMenu}>
+        <section className={styles.handRaiseSection}>
+          <Tooltip label={label}>
+            <CpdButton
+              kind={isHandRaised ? "primary" : "secondary"}
+              aria-pressed={isHandRaised}
+              aria-label={label}
+              onClick={() => toggleRaisedHand()}
+              iconOnly
+              Icon={RaisedHandSolidIcon}
+            />
+          </Tooltip>
+        </section>
+        <div className={styles.verticalSeperator} />
+        <section>
+          {isSearching ? (
+            <>
+              <Form.Root className={styles.searchForm}>
+                <Search
+                  required
+                  value={searchText}
+                  name="reactionSearch"
+                  placeholder={t("reaction_search")}
+                  onChange={onSearch}
+                  onKeyDown={onSearchKeyDown}
+                  // This is a reasonable use of autofocus, we are focusing when
+                  // the search button is clicked (which matches the Element Web reaction picker)
+                  // eslint-disable-next-line jsx-a11y/no-autofocus
+                  autoFocus
+                />
+                <CpdButton
+                  Icon={CloseIcon}
+                  aria-label={t("action.close_search")}
+                  size="sm"
+                  kind="destructive"
+                  onClick={() => setIsSearching(false)}
+                />
+              </Form.Root>
+            </>
+          ) : null}
+          <menu className={styles.reactionsMenu}>
+            {filteredReactionSet.map((reaction) => (
+              <li className={styles.reactionPopupMenuItem} key={reaction.name}>
+                <Tooltip label={reaction.name}>
+                  <CpdButton
+                    kind="secondary"
+                    className={styles.reactionButton}
+                    disabled={!canReact}
+                    onClick={() => sendReaction(reaction)}
+                  >
+                    {reaction.emoji}
+                  </CpdButton>
+                </Tooltip>
+              </li>
+            ))}
+          </menu>
+        </section>
+        {!isSearching ? (
+          <section style={{ marginLeft: "var(--cpd-separator-spacing)" }}>
+            <li key="search" className={styles.reactionPopupMenuItem}>
+              <Tooltip label={t("common.search")}>
+                <CpdButton
+                  iconOnly
+                  aria-label={t("action.open_search")}
+                  Icon={SearchIcon}
+                  kind="tertiary"
+                  onClick={() => setIsSearching(true)}
+                />
+              </Tooltip>
+            </li>
+          </section>
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+interface ReactionToggleButtonProps extends ComponentPropsWithoutRef<"button"> {
+  rtcSession: MatrixRTCSession;
+  client: MatrixClient;
+}
+
+export function ReactionToggleButton({
+  client,
+  rtcSession,
+  ...props
+}: ReactionToggleButtonProps): ReactNode {
+  const { t } = useTranslation();
+  const { raisedHands, lowerHand, reactions } = useReactions();
+  const [busy, setBusy] = useState(false);
+  const userId = client.getUserId()!;
+  const isHandRaised = !!raisedHands[userId];
+  const memberships = useMatrixRTCSessionMemberships(rtcSession);
+  const [showReactionsMenu, setShowReactionsMenu] = useState(false);
+  const [errorText, setErrorText] = useState<string>();
+
+  useEffect(() => {
+    // Clear whenever the reactions menu state changes.
+    setErrorText(undefined);
+  }, [showReactionsMenu]);
+
+  const canReact = !reactions[userId];
+
+  const sendRelation = useCallback(
+    async (reaction: ReactionOption) => {
+      try {
+        const myMembership = memberships.find((m) => m.sender === userId);
+        if (!myMembership?.eventId) {
+          throw new Error("Cannot find own membership event");
+        }
+        const parentEventId = myMembership.eventId;
+        setBusy(true);
+        await client.sendEvent(
+          rtcSession.room.roomId,
+          ElementCallReactionEventType,
+          {
+            "m.relates_to": {
+              rel_type: RelationType.Reference,
+              event_id: parentEventId,
+            },
+            emoji: reaction.emoji,
+            name: reaction.name,
+          },
+        );
+        setErrorText(undefined);
+        setShowReactionsMenu(false);
+      } catch (ex) {
+        setErrorText(ex instanceof Error ? ex.message : "Unknown error");
+        logger.error("Failed to send reaction", ex);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [memberships, client, userId, rtcSession],
+  );
+
+  const toggleRaisedHand = useCallback(() => {
+    const raiseHand = async (): Promise<void> => {
+      if (isHandRaised) {
+        try {
+          setBusy(true);
+          await lowerHand();
+          setShowReactionsMenu(false);
+        } finally {
+          setBusy(false);
+        }
+      } else {
+        try {
+          const myMembership = memberships.find((m) => m.sender === userId);
+          if (!myMembership?.eventId) {
+            throw new Error("Cannot find own membership event");
+          }
+          const parentEventId = myMembership.eventId;
+          setBusy(true);
+          const reaction = await client.sendEvent(
+            rtcSession.room.roomId,
+            EventType.Reaction,
+            {
+              "m.relates_to": {
+                rel_type: RelationType.Annotation,
+                event_id: parentEventId,
+                key: "🖐️",
+              },
+            },
+          );
+          logger.debug("Sent raise hand event", reaction.event_id);
+          setErrorText(undefined);
+          setShowReactionsMenu(false);
+        } catch (ex) {
+          setErrorText(ex instanceof Error ? ex.message : "Unknown error");
+          logger.error("Failed to raise hand", ex);
+        } finally {
+          setBusy(false);
+        }
+      }
+    };
+
+    void raiseHand();
+  }, [
+    client,
+    isHandRaised,
+    memberships,
+    lowerHand,
+    rtcSession.room.roomId,
+    userId,
+  ]);
+
+  return (
+    <>
+      <InnerButton
+        disabled={busy}
+        onClick={() => setShowReactionsMenu((show) => !show)}
+        raised={isHandRaised}
+        open={showReactionsMenu}
+        {...props}
+      />
+      <Modal
+        open={showReactionsMenu}
+        title={t("action.pick_reaction")}
+        hideHeader
+        classNameModal={styles.reactionPopupMenuModal}
+        onDismiss={() => setShowReactionsMenu(false)}
+      >
+        <ReactionPopupMenu
+          errorText={errorText}
+          isHandRaised={isHandRaised}
+          canReact={canReact}
+          sendReaction={(reaction) => void sendRelation(reaction)}
+          toggleRaisedHand={toggleRaisedHand}
+        />
+      </Modal>
+    </>
+  );
+}

src/button/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -0,0 +1,241 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Can close search 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <button
+    aria-disabled="false"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":rec:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="primary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can close search with the escape key 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":rhh:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="secondary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can lower hand 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":r3i:"
+    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="primary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can open menu 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <button
+    aria-disabled="false"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":r0:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="primary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can raise hand 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":r1p:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="secondary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can search for and send emoji 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <button
+    aria-disabled="false"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":r74:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="primary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can search for and send emoji with the keyboard 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <button
+    aria-disabled="false"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":ra3:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="primary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+      />
+    </svg>
+  </button>
+</div>
+`;

src/button/index.ts

@@ -7,4 +7,4 @@ Please see LICENSE in the repository root for full details.
 
 export * from "./Button";
 export * from "./LinkButton";
-export * from "./RaisedHandToggleButton";
+export * from "./ReactionToggleButton";

src/config/Config.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { merge } from "lodash";
+import { merge } from "lodash-es";
 
 import { getUrlParams } from "../UrlParams";
 import {

src/config/ConfigOptions.ts

@@ -96,6 +96,30 @@ export interface ConfigOptions {
    * Note that this can additionally be disabled by the app's URL parameters.
    */
   app_prompt?: boolean;
+
+  /**
+   * These are low level options that are used to configure the MatrixRTC session.
+   * Take care when changing these options.
+   */
+  matrix_rtc_session?: {
+    /**
+     * How long (in milliseconds) to wait before rotating end-to-end media encryption keys
+     * when someone leaves a call.
+     */
+    key_rotation_on_leave_delay?: number;
+
+    /**
+     * How often (in milliseconds) keep-alive messages should be sent to the server for
+     * the MatrixRTC membership event.
+     */
+    membership_keep_alive_period?: number;
+
+    /**
+     * How long (in milliseconds) after the last keep-alive the server should expire the
+     * MatrixRTC membership event.
+     */
+    membership_server_side_expiry_timeout?: number;
+  };
 }
 
 // Overrides members from ConfigOptions that are always provided by the
@@ -121,6 +145,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,

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>>;
 }
 
 /**

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);

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>
     );

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}
           />

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}
           />

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>

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>

src/index.css

@@ -5,14 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-/* Inter unexpectedly contains various codepoints which collide with emoji, even
-   when variation-16 is applied to request the emoji variant.  From eyeballing
-   the emoji picker, these are: 20e3, 23cf, 24c2, 25a0-25c1, 2665, 2764, 2b06, 2b1c.
-   Therefore we define a unicode-range to load which excludes the glyphs
-   (to avoid having to maintain a fork of Inter). */
-
 @layer normalize, compound-legacy, compound;
 
+@import url("@fontsource/inter/400.css");
+@import url("@fontsource/inter/500.css");
+@import url("@fontsource/inter/600.css");
+@import url("@fontsource/inter/700.css");
+@import url("@fontsource/inconsolata/400.css");
+@import url("@fontsource/inconsolata/700.css");
+
 @import url("normalize.css/normalize.css") layer(normalize);
 @import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css")
 layer(compound);
@@ -52,94 +53,6 @@ layer(compound);
   --stopgap-background-85: rgba(16, 19, 23, 0.85);
 }
 
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-Regular.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-Regular.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-Italic.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-Italic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-Medium.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-Medium.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: italic;
-  font-weight: 500;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-MediumItalic.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-MediumItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-SemiBold.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-SemiBold.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: italic;
-  font-weight: 600;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-SemiBoldItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-Bold.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-Bold.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-BoldItalic.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-BoldItalic.woff") format("woff");
-}
-
 body {
   background-color: var(--cpd-color-bg-canvas-default);
   background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
@@ -185,10 +98,6 @@ body[data-platform="ios"] {
   --cpd-font-family-sans: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
 }
 
-body[data-platform="desktop"] {
-  --cpd-font-family-sans: "Inter", sans-serif;
-}
-
 @layer compound-legacy {
   h1,
   h2,

src/initializer.test.ts

@@ -9,9 +9,9 @@ import { expect, test } from "vitest";
 
 import { Initializer } from "../src/initializer";
 
-test("initBeforeReact sets font family from URL param", () => {
+test("initBeforeReact sets font family from URL param", async () => {
   window.location.hash = "#?font=DejaVu Sans";
-  Initializer.initBeforeReact();
+  await Initializer.initBeforeReact();
   expect(
     getComputedStyle(document.documentElement).getPropertyValue(
       "--font-family",
@@ -19,9 +19,9 @@ test("initBeforeReact sets font family from URL param", () => {
   ).toBe('"DejaVu Sans"');
 });
 
-test("initBeforeReact sets font scale from URL param", () => {
+test("initBeforeReact sets font scale from URL param", async () => {
   window.location.hash = "#?fontScale=1.2";
-  Initializer.initBeforeReact();
+  await Initializer.initBeforeReact();
   expect(
     getComputedStyle(document.documentElement).getPropertyValue("--font-scale"),
   ).toBe("1.2");

src/initializer.tsx

@@ -11,6 +11,8 @@ import LanguageDetector from "i18next-browser-languagedetector";
 import Backend from "i18next-http-backend";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/src/logger";
+import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
+import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill";
 
 import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
@@ -41,10 +43,17 @@ export class Initializer {
     return Initializer.internalInstance?.isInitialized;
   }
 
-  public static initBeforeReact(): void {
-    // this maybe also needs to return a promise in the future,
-    // if we have to do async inits before showing the loading screen
-    // but this should be avoided if possible
+  public static async initBeforeReact(): Promise<void> {
+    const polyfills: Promise<unknown>[] = [];
+    if (shouldPolyfillSegmenter()) {
+      polyfills.push(import("@formatjs/intl-segmenter/polyfill-force"));
+    }
+
+    if (shouldPolyfillDurationFormat()) {
+      polyfills.push(import("@formatjs/intl-durationformat/polyfill-force"));
+    }
+
+    await Promise.all(polyfills);
 
     //i18n
     const languageDetector = new LanguageDetector();
@@ -54,7 +63,7 @@ export class Initializer {
       lookup: () => getUrlParams().lang ?? undefined,
     });
 
-    i18n
+    await i18n
       .use(Backend)
       .use(languageDetector)
       .use(initReactI18next)
@@ -74,9 +83,6 @@ export class Initializer {
           order: ["urlFragment", "navigator"],
           caches: [],
         },
-      })
-      .catch((e) => {
-        logger.error("Failed to initialize i18n", e);
       });
 
     // Custom Themeing

src/main.tsx

@@ -55,12 +55,17 @@ if (fatalError !== null) {
   throw fatalError; // Stop the app early
 }
 
-Initializer.initBeforeReact();
+Initializer.initBeforeReact()
+  .then(() => {
+    const history = createBrowserHistory();
 
-const history = createBrowserHistory();
-
-root.render(
-  <StrictMode>
-    <App history={history} />
-  </StrictMode>,
-);
+    root.render(
+      <StrictMode>
+        <App history={history} />
+      </StrictMode>,
+    );
+  })
+  .catch((e) => {
+    logger.error("Failed to initialize app", e);
+    root.render(e.message);
+  });

src/reactions/RaisedHandIndicator.test.tsx

@@ -33,11 +33,23 @@ describe("RaisedHandIndicator", () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
-  test("renders a smaller indicator when minature is specified", () => {
+  test("renders a smaller indicator when miniature is specified", () => {
     const dateTime = new Date();
     const { container } = render(
-      <RaisedHandIndicator raisedHandTime={dateTime} minature showTimer />,
+      <RaisedHandIndicator raisedHandTime={dateTime} miniature showTimer />,
     );
     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);
+  });
 });

src/reactions/RaisedHandIndicator.tsx

@@ -5,31 +5,54 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useEffect, useState } from "react";
-import classNames from "classnames";
-import "@formatjs/intl-durationformat/polyfill";
-import { DurationFormat } from "@formatjs/intl-durationformat";
+import {
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+  useMemo,
+} from "react";
+import { useTranslation } from "react-i18next";
 
-import styles from "./RaisedHandIndicator.module.css";
-
-const durationFormatter = new DurationFormat(undefined, {
-  minutesDisplay: "always",
-  secondsDisplay: "always",
-  hoursDisplay: "auto",
-  style: "digital",
-});
+import { ReactionIndicator } from "./ReactionIndicator";
 
 export function RaisedHandIndicator({
   raisedHandTime,
-  minature,
+  miniature,
   showTimer,
+  onClick,
 }: {
   raisedHandTime?: Date;
-  minature?: boolean;
+  miniature?: boolean;
   showTimer?: boolean;
+  onClick?: () => void;
 }): ReactNode {
+  const { t } = useTranslation();
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
 
+  const durationFormatter = useMemo(
+    () =>
+      new Intl.DurationFormat(undefined, {
+        minutesDisplay: "always",
+        secondsDisplay: "always",
+        hoursDisplay: "auto",
+        style: "digital",
+      }),
+    [],
+  );
+
+  const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (event) => {
+      if (!onClick) {
+        return;
+      }
+      event.preventDefault();
+      onClick();
+    },
+    [onClick],
+  );
+
   // This effect creates a simple timer effect.
   useEffect(() => {
     if (!raisedHandTime || !showTimer) {
@@ -50,28 +73,32 @@ export function RaisedHandIndicator({
     calculateTime();
     const to = setInterval(calculateTime, 1000);
     return (): void => clearInterval(to);
-  }, [setRaisedHandDuration, raisedHandTime, showTimer]);
+  }, [setRaisedHandDuration, raisedHandTime, showTimer, durationFormatter]);
 
-  if (raisedHandTime) {
+  if (!raisedHandTime) {
+    return;
+  }
+
+  const content = (
+    <ReactionIndicator emoji="✋" miniature={miniature}>
+      {showTimer && <p>{raisedHandDuration}</p>}
+    </ReactionIndicator>
+  );
+
+  if (onClick) {
     return (
-      <div
-        className={classNames(styles.raisedHandWidget, {
-          [styles.raisedHandWidgetLarge]: !minature,
-        })}
+      <button
+        aria-label={t("action.lower_hand")}
+        style={{
+          display: "contents",
+          background: "none",
+        }}
+        onClick={clickCallback}
       >
-        <div
-          className={classNames(styles.raisedHand, {
-            [styles.raisedHandLarge]: !minature,
-          })}
-        >
-          <span role="img" aria-label="raised hand">
-            ✋
-          </span>
-        </div>
-        {showTimer && <p>{raisedHandDuration}</p>}
-      </div>
+        {content}
+      </button>
     );
   }
 
-  return null;
+  return content;
 }

src/reactions/ReactionIndicator.module.css

@@ -1,28 +1,28 @@
-.raisedHandWidget {
+.reactionIndicatorWidget {
   display: flex;
   background-color: var(--cpd-color-bg-subtle-primary);
   border-radius: var(--cpd-radius-pill-effect);
   color: var(--cpd-color-icon-secondary);
 }
 
-.raisedHandWidget > p {
+.reactionIndicatorWidget > p {
   padding: none;
   margin-top: auto;
   margin-bottom: auto;
   width: 4em;
 }
 
-.raisedHandWidgetLarge > p {
+.reactionIndicatorWidgetLarge > p {
   padding: var(--cpd-space-2x);
 }
 
-.raisedHandLarge {
+.reactionLarge {
   margin: var(--cpd-space-2x);
-  padding: var(--cpd-space-2x);
-  padding-block: var(--cpd-space-2x);
+  padding: var(--cpd-space-4x);
+  padding-block: var(--cpd-space-4x);
 }
 
-.raisedHand {
+.reaction {
   margin: var(--cpd-space-1x);
   color: var(--cpd-color-icon-secondary);
   background-color: var(--cpd-color-icon-secondary);
@@ -35,18 +35,22 @@
   box-sizing: border-box;
   max-inline-size: 100%;
   max-width: fit-content;
+  padding: var(--cpd-space-1x);
+  padding-block: var(--cpd-space-1x);
 }
 
-.raisedHand > span {
+.reaction > span {
   width: var(--cpd-space-6x);
   height: var(--cpd-space-6x);
   display: inline-block;
   text-align: center;
-  font-size: 16px;
+  font-size: 1.2em;
+  /* Centralise */
+  line-height: 1.2;
 }
 
-.raisedHandLarge > span {
-  width: var(--cpd-space-8x);
-  height: var(--cpd-space-8x);
-  font-size: 22px;
+.reactionLarge > span {
+  width: 30px;
+  height: 30px;
+  font-size: 25px;
 }

src/reactions/ReactionIndicator.tsx

@@ -0,0 +1,41 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { PropsWithChildren, ReactNode } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+
+import styles from "./ReactionIndicator.module.css";
+
+export function ReactionIndicator({
+  emoji,
+  miniature,
+  children,
+}: PropsWithChildren<{
+  miniature?: boolean;
+  emoji: string;
+}>): ReactNode {
+  const { t } = useTranslation();
+  return (
+    <div
+      className={classNames(styles.reactionIndicatorWidget, {
+        [styles.reactionIndicatorWidgetLarge]: !miniature,
+      })}
+    >
+      <div
+        className={classNames(styles.reaction, {
+          [styles.reactionLarge]: !miniature,
+        })}
+      >
+        <span role="img" aria-label={t("common.reaction")}>
+          {emoji}
+        </span>
+      </div>
+      {children}
+    </div>
+  );
+}

src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap

@@ -1,14 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`RaisedHandIndicator > renders a smaller indicator when minature is specified 1`] = `
+exports[`RaisedHandIndicator > renders a smaller indicator when miniature is specified 1`] = `
 <div
-  class="raisedHandWidget"
+  class="reactionIndicatorWidget"
 >
   <div
-    class="raisedHand"
+    class="reaction"
   >
     <span
-      aria-label="raised hand"
+      aria-label="common.reaction"
       role="img"
     >
       ✋
@@ -22,13 +22,13 @@ exports[`RaisedHandIndicator > renders a smaller indicator when minature is spec
 
 exports[`RaisedHandIndicator > renders an indicator when a hand has been raised 1`] = `
 <div
-  class="raisedHandWidget raisedHandWidgetLarge"
+  class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
 >
   <div
-    class="raisedHand raisedHandLarge"
+    class="reaction reactionLarge"
   >
     <span
-      aria-label="raised hand"
+      aria-label="common.reaction"
       role="img"
     >
       ✋
@@ -42,13 +42,13 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised
 
 exports[`RaisedHandIndicator > renders an indicator when a hand has been raised with the expected time 1`] = `
 <div
-  class="raisedHandWidget raisedHandWidgetLarge"
+  class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
 >
   <div
-    class="raisedHand raisedHandLarge"
+    class="reaction reactionLarge"
   >
     <span
-      aria-label="raised hand"
+      aria-label="common.reaction"
       role="img"
     >
       ✋

src/reactions/index.ts

@@ -0,0 +1,181 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { RelationType } from "matrix-js-sdk/src/types";
+
+import catSoundOgg from "../sound/reactions/cat.ogg?url";
+import catSoundMp3 from "../sound/reactions/cat.mp3?url";
+import clapSoundOgg from "../sound/reactions/clap.ogg?url";
+import clapSoundMp3 from "../sound/reactions/clap.mp3?url";
+import cricketsSoundOgg from "../sound/reactions/crickets.ogg?url";
+import cricketsSoundMp3 from "../sound/reactions/crickets.mp3?url";
+import dogSoundOgg from "../sound/reactions/dog.ogg?url";
+import dogSoundMp3 from "../sound/reactions/dog.mp3?url";
+import genericSoundOgg from "../sound/reactions/generic.ogg?url";
+import genericSoundMp3 from "../sound/reactions/generic.mp3?url";
+import lightbulbSoundOgg from "../sound/reactions/lightbulb.ogg?url";
+import lightbulbSoundMp3 from "../sound/reactions/lightbulb.mp3?url";
+import partySoundOgg from "../sound/reactions/party.ogg?url";
+import partySoundMp3 from "../sound/reactions/party.mp3?url";
+import deerSoundOgg from "../sound/reactions/deer.ogg?url";
+import deerSoundMp3 from "../sound/reactions/deer.mp3?url";
+import rockSoundOgg from "../sound/reactions/rock.ogg?url";
+import rockSoundMp3 from "../sound/reactions/rock.mp3?url";
+
+export const ElementCallReactionEventType = "io.element.call.reaction";
+
+export interface ReactionOption {
+  /**
+   * The emoji to display. This is always displayed even if no emoji is matched
+   * from `ReactionSet`.
+   *
+   * @note Any excess characters are trimmed from this string.
+   */
+  emoji: string;
+  /**
+   * The name of the emoji. This is the unique key used when looking for a local
+   * effect in our `ReactionSet` array.
+   */
+  name: string;
+  /**
+   * Optional aliases to look for when searching for an emoji in the interface.
+   */
+  alias?: string[];
+  /**
+   * Optional sound to play. An ogg sound must always be provided.
+   * If this sound isn't given, `GenericReaction` is used.
+   */
+  sound?: {
+    mp3?: string;
+    ogg: string;
+  };
+}
+
+export interface ECallReactionEventContent {
+  "m.relates_to": {
+    rel_type: RelationType.Reference;
+    event_id: string;
+  };
+  emoji: string;
+  name: string;
+}
+
+export const GenericReaction: ReactionOption = {
+  name: "generic",
+  emoji: "", // Filled in by user
+  sound: {
+    mp3: genericSoundMp3,
+    ogg: genericSoundOgg,
+  },
+};
+
+// The first 6 reactions are always visible.
+export const ReactionSet: ReactionOption[] = [
+  {
+    emoji: "👍",
+    name: "thumbsup",
+    // TODO: These need to be translated.
+    alias: ["+1", "yes", "thumbs up"],
+  },
+  {
+    emoji: "🎉",
+    name: "party",
+    alias: ["hurray", "success"],
+    sound: {
+      ogg: partySoundOgg,
+      mp3: partySoundMp3,
+    },
+  },
+  {
+    emoji: "👏",
+    name: "clapping",
+    alias: ["celebrate", "success"],
+    sound: {
+      ogg: clapSoundOgg,
+      mp3: clapSoundMp3,
+    },
+  },
+  {
+    emoji: "🐶",
+    name: "dog",
+    alias: ["doggo", "pupper", "woofer", "bark"],
+    sound: {
+      ogg: dogSoundOgg,
+      mp3: dogSoundMp3,
+    },
+  },
+  {
+    emoji: "🐱",
+    name: "cat",
+    alias: ["meow", "kitty"],
+    sound: {
+      ogg: catSoundOgg,
+      mp3: catSoundMp3,
+    },
+  },
+  {
+    emoji: "💡",
+    name: "lightbulb",
+    alias: ["bulb", "light", "idea", "ping"],
+    sound: {
+      ogg: lightbulbSoundOgg,
+      mp3: lightbulbSoundMp3,
+    },
+  },
+  {
+    emoji: "🦗",
+    name: "crickets",
+    alias: ["awkward", "silence"],
+    sound: {
+      ogg: cricketsSoundOgg,
+      mp3: cricketsSoundMp3,
+    },
+  },
+  {
+    emoji: "👎",
+    name: "thumbsdown",
+    alias: ["-1", "no", "thumbs no"],
+  },
+  {
+    emoji: "😵‍💫",
+    name: "dizzy",
+    alias: ["dazed", "confused"],
+  },
+  {
+    emoji: "👌",
+    name: "ok",
+    alias: ["okay", "cool"],
+  },
+  {
+    emoji: "🥰",
+    name: "heart",
+    alias: ["heart", "love", "smiling"],
+  },
+  {
+    emoji: "😄",
+    name: "laugh",
+    alias: ["giggle", "joy", "smiling"],
+  },
+  {
+    emoji: "🦌",
+    name: "deer",
+    alias: ["stag", "doe", "bleat"],
+    sound: {
+      ogg: deerSoundOgg,
+      mp3: deerSoundMp3,
+    },
+  },
+  {
+    emoji: "🤘",
+    name: "rock",
+    alias: ["cool", "horns", "guitar"],
+    sound: {
+      ogg: rockSoundOgg,
+      mp3: rockSoundMp3,
+    },
+  },
+];

src/room/GroupCallLoader.tsx

@@ -1,77 +0,0 @@
-/*
-Copyright 2022-2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only
-Please see LICENSE in the repository root for full details.
-*/
-
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { useTranslation } from "react-i18next";
-import { MatrixError } from "matrix-js-sdk/src/matrix";
-import { Heading, Text } from "@vector-im/compound-web";
-
-import { Link } from "../button/Link";
-import {
-  useLoadGroupCall,
-  GroupCallStatus,
-  CallTerminatedMessage,
-} from "./useLoadGroupCall";
-import { ErrorView, FullScreenView } from "../FullScreenView";
-
-interface Props {
-  client: MatrixClient;
-  roomIdOrAlias: string;
-  viaServers: string[];
-  children: (groupCallState: GroupCallStatus) => JSX.Element;
-}
-
-export function GroupCallLoader({
-  client,
-  roomIdOrAlias,
-  viaServers,
-  children,
-}: Props): JSX.Element {
-  const { t } = useTranslation();
-  const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
-
-  switch (groupCallState.kind) {
-    case "loaded":
-    case "waitForInvite":
-    case "canKnock":
-      return children(groupCallState);
-    case "loading":
-      return (
-        <FullScreenView>
-          <h1>{t("common.loading")}</h1>
-        </FullScreenView>
-      );
-    case "failed":
-      if ((groupCallState.error as MatrixError).errcode === "M_NOT_FOUND") {
-        return (
-          <FullScreenView>
-            <Heading>{t("group_call_loader.failed_heading")}</Heading>
-            <Text>{t("group_call_loader.failed_text")}</Text>
-            {/* XXX: A 'create it for me' button would be the obvious UX here. Two screens already have
-            dupes of this flow, let's make a common component and put it here. */}
-            <Link to="/">{t("common.home")}</Link>
-          </FullScreenView>
-        );
-      } else if (groupCallState.error instanceof CallTerminatedMessage) {
-        return (
-          <FullScreenView>
-            <Heading>{groupCallState.error.message}</Heading>
-            <Text>{groupCallState.error.messageBody}</Text>
-            {groupCallState.error.reason && (
-              <>
-                {t("group_call_loader.reason")}:
-                <Text size="sm">"{groupCallState.error.reason}"</Text>
-              </>
-            )}
-            <Link to="/">{t("common.home")}</Link>
-          </FullScreenView>
-        );
-      } else {
-        return <ErrorView error={groupCallState.error} />;
-      }
-  }
-}

src/room/GroupCallView.tsx

@@ -177,29 +177,37 @@ export const GroupCallView: FC<Props> = ({
       }
     };
 
-    if (widget && preload && skipLobby) {
-      // In preload mode without lobby we wait for a join action before entering
-      const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
-        (async (): Promise<void> => {
-          await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
-          await enterRTCSession(rtcSession, perParticipantE2EE);
-          widget!.api.transport.reply(ev.detail, {});
-        })().catch((e) => {
-          logger.error("Error joining RTC session", e);
-        });
-      };
-      widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
-      return (): void => {
-        widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
-      };
-    } else if (widget && !preload && skipLobby) {
-      // No lobby and no preload: we enter the rtc session right away
-      (async (): Promise<void> => {
-        await defaultDeviceSetup({ audioInput: null, videoInput: null });
-        await enterRTCSession(rtcSession, perParticipantE2EE);
-      })().catch((e) => {
-        logger.error("Error joining RTC session", e);
-      });
+    if (skipLobby) {
+      if (widget) {
+        if (preload) {
+          // In preload mode without lobby we wait for a join action before entering
+          const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
+            (async (): Promise<void> => {
+              await defaultDeviceSetup(
+                ev.detail.data as unknown as JoinCallData,
+              );
+              await enterRTCSession(rtcSession, perParticipantE2EE);
+              widget!.api.transport.reply(ev.detail, {});
+            })().catch((e) => {
+              logger.error("Error joining RTC session", e);
+            });
+          };
+          widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
+          return (): void => {
+            widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
+          };
+        } else {
+          // No lobby and no preload: we enter the rtc session right away
+          (async (): Promise<void> => {
+            await defaultDeviceSetup({ audioInput: null, videoInput: null });
+            await enterRTCSession(rtcSession, perParticipantE2EE);
+          })().catch((e) => {
+            logger.error("Error joining RTC session", e);
+          });
+        }
+      } else {
+        void enterRTCSession(rtcSession, perParticipantE2EE);
+      }
     }
   }, [rtcSession, preload, skipLobby, perParticipantE2EE]);
 

src/room/InCallView.module.css

@@ -36,12 +36,14 @@ Please see LICENSE in the repository root for full details.
   inset-block-end: 0;
   z-index: 1;
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  grid-template-areas: "logo buttons layout";
+  grid-template-columns: minmax(0, var(--inline-content-inset)) 1fr auto 1fr minmax(
+      0,
+      var(--inline-content-inset)
+    );
+  grid-template-areas: ". logo buttons layout .";
   align-items: center;
   gap: var(--cpd-space-3x);
-  padding-block: var(--cpd-space-4x);
-  padding-inline: var(--inline-content-inset);
+  padding-block: var(--cpd-space-10x);
   background: linear-gradient(
     180deg,
     rgba(0, 0, 0, 0) 0%,
@@ -64,7 +66,6 @@ Please see LICENSE in the repository root for full details.
 .footer.overlay.hidden {
   display: grid;
   opacity: 0;
-  pointer-events: none;
 }
 
 .footer.overlay:has(:focus-visible) {
@@ -83,6 +84,7 @@ Please see LICENSE in the repository root for full details.
 
 .buttons {
   grid-area: buttons;
+  justify-self: center;
   display: flex;
   gap: var(--cpd-space-3x);
 }
@@ -92,15 +94,49 @@ Please see LICENSE in the repository root for full details.
   justify-self: end;
 }
 
-@media (min-height: 400px) {
+@media (max-width: 660px) {
   .footer {
-    padding-block: var(--cpd-space-8x);
+    grid-template-areas: ". buttons buttons buttons .";
+  }
+
+  .logo {
+    display: none;
+  }
+
+  .layout {
+    display: none !important;
   }
 }
 
-@media (min-height: 800px) {
+@media (max-width: 370px) {
+  .raiseHand {
+    display: none;
+  }
+}
+
+@media (max-width: 340px) {
+  .invite,
+  .switchCamera,
+  .shareScreen {
+    display: none;
+  }
+
+  @media (max-height: 400px) {
+    .footer {
+      display: none;
+    }
+  }
+}
+
+@media (max-height: 400px) {
   .footer {
-    padding-block: var(--cpd-space-10x);
+    padding-block: var(--cpd-space-4x);
+  }
+}
+
+@media (max-height: 800px) {
+  .footer {
+    padding-block: var(--cpd-space-8x);
   }
 }
 

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";
@@ -41,7 +41,7 @@ import {
   VideoButton,
   ShareScreenButton,
   SettingsButton,
-  RaiseHandToggleButton,
+  ReactionToggleButton,
   SwitchCameraButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
@@ -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,10 +79,14 @@ 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";
+import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { useSwitchCamera } from "./useSwitchCamera";
+import { soundEffectVolumeSetting, useSetting } from "../settings/settings";
+import { ReactionsOverlay } from "./ReactionsOverlay";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -103,7 +105,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(() => {
@@ -177,6 +182,7 @@ export const InCallView: FC<InCallViewProps> = ({
   connState,
   onShareClick,
 }) => {
+  const [soundEffectVolume] = useSetting(soundEffectVolumeSetting);
   const { supportsReactions, raisedHands } = useReactions();
   const raisedHandCount = useMemo(
     () => Object.keys(raisedHands).length,
@@ -196,7 +202,6 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const containerRef1 = useRef<HTMLDivElement | null>(null);
   const [containerRef2, bounds] = useMeasure();
-  const boundsValid = bounds.height > 0;
   // Merge the refs so they can attach to the same element
   const containerRef = useMergedRefs(containerRef1, containerRef2);
 
@@ -224,10 +229,6 @@ export const InCallView: FC<InCallViewProps> = ({
     (muted) => muteStates.audio.setEnabled?.(!muted),
   );
 
-  const mobile = boundsValid && bounds.width <= 660;
-  const reducedControls = boundsValid && bounds.width <= 340;
-  const noControls = reducedControls && bounds.height <= 400;
-
   const windowMode = useObservableEagerState(vm.windowMode);
   const layout = useObservableEagerState(vm.layout);
   const gridMode = useObservableEagerState(vm.gridMode);
@@ -249,12 +250,22 @@ export const InCallView: FC<InCallViewProps> = ({
   }, [vm]);
   const onTouchCancel = useCallback(() => (touchStart.current = null), []);
 
-  // We also need to tell the layout toggle to prevent touch events from
-  // bubbling up, or else the controls will be dismissed before a change event
-  // can be registered on the toggle
-  const onLayoutToggleTouchEnd = useCallback(
-    (e: TouchEvent) => e.stopPropagation(),
-    [],
+  // We also need to tell the footer controls to prevent touch events from
+  // bubbling up, or else the footer will be dismissed before a click/change
+  // event can be registered on the control
+  const onControlsTouchEnd = useCallback(
+    (e: TouchEvent) => {
+      // Somehow applying pointer-events: none to the controls when the footer
+      // is hidden is not enough to stop clicks from happening as the footer
+      // becomes visible, so we check manually whether the footer is shown
+      if (showFooter) {
+        e.stopPropagation();
+        vm.tapControls();
+      } else {
+        e.preventDefault();
+      }
+    },
+    [vm, showFooter],
   );
 
   const onPointerMove = useCallback(
@@ -308,7 +319,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),
@@ -329,11 +343,17 @@ export const InCallView: FC<InCallViewProps> = ({
       return;
     }
     if (previousRaisedHandCount < raisedHandCount) {
+      handRaisePlayer.current.volume = soundEffectVolume;
       handRaisePlayer.current.play().catch((ex) => {
         logger.warn("Failed to play raise hand sound", ex);
       });
     }
-  }, [raisedHandCount, handRaisePlayer, previousRaisedHandCount]);
+  }, [
+    raisedHandCount,
+    handRaisePlayer,
+    previousRaisedHandCount,
+    soundEffectVolume,
+  ]);
 
   useEffect(() => {
     widget?.api.transport
@@ -379,7 +399,7 @@ export const InCallView: FC<InCallViewProps> = ({
     () =>
       forwardRef<
         HTMLDivElement,
-        PropsWithoutRef<TileProps<TileModel, HTMLDivElement>>
+        PropsWithoutRef<TileProps<TileViewModel, HTMLDivElement>>
       >(function Tile(
         { className, style, targetWidth, targetHeight, model },
         ref,
@@ -388,13 +408,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,
         );
@@ -402,23 +415,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}
@@ -452,8 +463,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}
@@ -516,95 +526,106 @@ export const InCallView: FC<InCallViewProps> = ({
       .catch(logger.error);
   }, [localParticipant, isScreenShareEnabled]);
 
-  let footer: JSX.Element | null;
-
-  if (noControls) {
-    footer = null;
-  } else {
-    const buttons: JSX.Element[] = [];
+  const buttons: JSX.Element[] = [];
 
+  buttons.push(
+    <MicButton
+      key="audio"
+      muted={!muteStates.audio.enabled}
+      onClick={toggleMicrophone}
+      onTouchEnd={onControlsTouchEnd}
+      disabled={muteStates.audio.setEnabled === null}
+      data-testid="incall_mute"
+    />,
+    <VideoButton
+      key="video"
+      muted={!muteStates.video.enabled}
+      onClick={toggleCamera}
+      onTouchEnd={onControlsTouchEnd}
+      disabled={muteStates.video.setEnabled === null}
+      data-testid="incall_videomute"
+    />,
+  );
+  if (switchCamera !== null)
     buttons.push(
-      <MicButton
-        key="audio"
-        muted={!muteStates.audio.enabled}
-        onClick={toggleMicrophone}
-        disabled={muteStates.audio.setEnabled === null}
-        data-testid="incall_mute"
-      />,
-      <VideoButton
-        key="video"
-        muted={!muteStates.video.enabled}
-        onClick={toggleCamera}
-        disabled={muteStates.video.setEnabled === null}
-        data-testid="incall_videomute"
+      <SwitchCameraButton
+        key="switch_camera"
+        className={styles.switchCamera}
+        onClick={switchCamera}
+        onTouchEnd={onControlsTouchEnd}
       />,
     );
-    if (!reducedControls) {
-      if (switchCamera !== null)
-        buttons.push(
-          <SwitchCameraButton key="switch_camera" onClick={switchCamera} />,
-        );
-      if (canScreenshare && !hideScreensharing) {
-        buttons.push(
-          <ShareScreenButton
-            key="share_screen"
-            enabled={isScreenShareEnabled}
-            onClick={toggleScreensharing}
-            data-testid="incall_screenshare"
-          />,
-        );
-      }
-      if (supportsReactions) {
-        buttons.push(
-          <RaiseHandToggleButton
-            client={client}
-            rtcSession={rtcSession}
-            key="4"
-          />,
-        );
-      }
-      buttons.push(<SettingsButton key="settings" onClick={openSettings} />);
-    }
-
+  if (canScreenshare && !hideScreensharing) {
     buttons.push(
-      <EndCallButton
-        key="end_call"
-        onClick={function (): void {
-          onLeave();
-        }}
-        data-testid="incall_leave"
+      <ShareScreenButton
+        key="share_screen"
+        className={styles.shareScreen}
+        enabled={isScreenShareEnabled}
+        onClick={toggleScreensharing}
+        onTouchEnd={onControlsTouchEnd}
+        data-testid="incall_screenshare"
       />,
     );
-    footer = (
-      <div
-        ref={footerRef}
-        className={classNames(styles.footer, {
-          [styles.overlay]: windowMode === "flat",
-          [styles.hidden]: !showFooter || (!showControls && hideHeader),
-        })}
-      >
-        {!mobile && !hideHeader && (
-          <div className={styles.logo}>
-            <LogoMark width={24} height={24} aria-hidden />
-            <LogoType
-              width={80}
-              height={11}
-              aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
-            />
-          </div>
-        )}
-        {showControls && <div className={styles.buttons}>{buttons}</div>}
-        {!mobile && showControls && (
-          <LayoutToggle
-            className={styles.layout}
-            layout={gridMode}
-            setLayout={setGridMode}
-            onTouchEnd={onLayoutToggleTouchEnd}
-          />
-        )}
-      </div>
-    );
   }
+  if (supportsReactions) {
+    buttons.push(
+      <ReactionToggleButton
+        key="raise_hand"
+        className={styles.raiseHand}
+        client={client}
+        rtcSession={rtcSession}
+        onTouchEnd={onControlsTouchEnd}
+      />,
+    );
+  }
+  if (layout.type !== "pip")
+    buttons.push(
+      <SettingsButton
+        key="settings"
+        onClick={openSettings}
+        onTouchEnd={onControlsTouchEnd}
+      />,
+    );
+
+  buttons.push(
+    <EndCallButton
+      key="end_call"
+      onClick={function (): void {
+        onLeave();
+      }}
+      onTouchEnd={onControlsTouchEnd}
+      data-testid="incall_leave"
+    />,
+  );
+  const footer = (
+    <div
+      ref={footerRef}
+      className={classNames(styles.footer, {
+        [styles.overlay]: windowMode === "flat",
+        [styles.hidden]: !showFooter || (!showControls && hideHeader),
+      })}
+    >
+      {!hideHeader && (
+        <div className={styles.logo}>
+          <LogoMark width={24} height={24} aria-hidden />
+          <LogoType
+            width={80}
+            height={11}
+            aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
+          />
+        </div>
+      )}
+      {showControls && <div className={styles.buttons}>{buttons}</div>}
+      {showControls && (
+        <LayoutToggle
+          className={styles.layout}
+          layout={gridMode}
+          setLayout={setGridMode}
+          onTouchEnd={onControlsTouchEnd}
+        />
+      )}
+    </div>
+  );
 
   return (
     <div
@@ -636,28 +657,37 @@ export const InCallView: FC<InCallViewProps> = ({
               />
             </LeftNav>
             <RightNav>
-              {!reducedControls && showControls && onShareClick !== null && (
-                <InviteButton onClick={onShareClick} />
+              {showControls && onShareClick !== null && (
+                <InviteButton
+                  className={styles.invite}
+                  onClick={onShareClick}
+                />
               )}
             </RightNav>
           </Header>
         ))}
       <RoomAudioRenderer />
       {renderContent()}
-      <audio ref={handRaisePlayer} hidden>
+      <audio ref={handRaisePlayer} preload="auto" hidden>
         <source src={handSoundOgg} type="audio/ogg; codecs=vorbis" />
         <source src={handSoundMp3} type="audio/mpeg" />
       </audio>
+      <ReactionsAudioRenderer />
+      <ReactionsOverlay />
       {footer}
-      {!noControls && <RageshakeRequestModal {...rageshakeRequestModalProps} />}
-      <SettingsModal
-        client={client}
-        roomId={rtcSession.room.roomId}
-        open={settingsModalOpen}
-        onDismiss={closeSettings}
-        tab={settingsTab}
-        onTabChange={setSettingsTab}
-      />
+      {layout.type !== "pip" && (
+        <>
+          <RageshakeRequestModal {...rageshakeRequestModalProps} />
+          <SettingsModal
+            client={client}
+            roomId={rtcSession.room.roomId}
+            open={settingsModalOpen}
+            onDismiss={closeSettings}
+            tab={settingsTab}
+            onTabChange={setSettingsTab}
+          />
+        </>
+      )}
     </div>
   );
 };

src/room/ReactionAudioRenderer.test.tsx

@@ -0,0 +1,181 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { render } from "@testing-library/react";
+import { afterAll, expect, test } from "vitest";
+import { TooltipProvider } from "@vector-im/compound-web";
+import { act, ReactNode } from "react";
+
+import {
+  MockRoom,
+  MockRTCSession,
+  TestReactionsWrapper,
+} from "../utils/testReactions";
+import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
+import { GenericReaction, ReactionSet } from "../reactions";
+import {
+  playReactionsSound,
+  soundEffectVolumeSetting,
+} from "../settings/settings";
+
+const memberUserIdAlice = "@alice:example.org";
+const memberUserIdBob = "@bob:example.org";
+const memberUserIdCharlie = "@charlie:example.org";
+const memberEventAlice = "$membership-alice:example.org";
+const memberEventBob = "$membership-bob:example.org";
+const memberEventCharlie = "$membership-charlie:example.org";
+
+const membership: Record<string, string> = {
+  [memberEventAlice]: memberUserIdAlice,
+  [memberEventBob]: memberUserIdBob,
+  [memberEventCharlie]: memberUserIdCharlie,
+};
+
+function TestComponent({
+  rtcSession,
+}: {
+  rtcSession: MockRTCSession;
+}): ReactNode {
+  return (
+    <TooltipProvider>
+      <TestReactionsWrapper rtcSession={rtcSession}>
+        <ReactionsAudioRenderer />
+      </TestReactionsWrapper>
+    </TooltipProvider>
+  );
+}
+
+const originalPlayFn = window.HTMLMediaElement.prototype.play;
+afterAll(() => {
+  playReactionsSound.setValue(playReactionsSound.defaultValue);
+  soundEffectVolumeSetting.setValue(soundEffectVolumeSetting.defaultValue);
+  window.HTMLMediaElement.prototype.play = originalPlayFn;
+});
+
+test("preloads all audio elements", () => {
+  playReactionsSound.setValue(true);
+  const rtcSession = new MockRTCSession(
+    new MockRoom(memberUserIdAlice),
+    membership,
+  );
+  const { container } = render(<TestComponent rtcSession={rtcSession} />);
+  expect(container.getElementsByTagName("audio")).toHaveLength(
+    // All reactions plus the generic sound
+    ReactionSet.filter((r) => r.sound).length + 1,
+  );
+});
+
+test("loads no audio elements when disabled in settings", () => {
+  playReactionsSound.setValue(false);
+  const rtcSession = new MockRTCSession(
+    new MockRoom(memberUserIdAlice),
+    membership,
+  );
+  const { container } = render(<TestComponent rtcSession={rtcSession} />);
+  expect(container.getElementsByTagName("audio")).toHaveLength(0);
+});
+
+test("will play an audio sound when there is a reaction", () => {
+  const audioIsPlaying: string[] = [];
+  window.HTMLMediaElement.prototype.play = async function (): Promise<void> {
+    audioIsPlaying.push((this.children[0] as HTMLSourceElement).src);
+    return Promise.resolve();
+  };
+  playReactionsSound.setValue(true);
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  render(<TestComponent rtcSession={rtcSession} />);
+
+  // Find the first reaction with a sound effect
+  const chosenReaction = ReactionSet.find((r) => !!r.sound);
+  if (!chosenReaction) {
+    throw Error(
+      "No reactions have sounds configured, this test cannot succeed",
+    );
+  }
+  act(() => {
+    room.testSendReaction(memberEventAlice, chosenReaction, membership);
+  });
+  expect(audioIsPlaying).toHaveLength(1);
+  expect(audioIsPlaying[0]).toContain(chosenReaction.sound?.ogg);
+});
+
+test("will play the generic audio sound when there is soundless reaction", () => {
+  const audioIsPlaying: string[] = [];
+  window.HTMLMediaElement.prototype.play = async function (): Promise<void> {
+    audioIsPlaying.push((this.children[0] as HTMLSourceElement).src);
+    return Promise.resolve();
+  };
+  playReactionsSound.setValue(true);
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  render(<TestComponent rtcSession={rtcSession} />);
+
+  // Find the first reaction with a sound effect
+  const chosenReaction = ReactionSet.find((r) => !r.sound);
+  if (!chosenReaction) {
+    throw Error(
+      "No reactions have sounds configured, this test cannot succeed",
+    );
+  }
+  act(() => {
+    room.testSendReaction(memberEventAlice, chosenReaction, membership);
+  });
+  expect(audioIsPlaying).toHaveLength(1);
+  expect(audioIsPlaying[0]).toContain(GenericReaction.sound?.ogg);
+});
+
+test("will play an audio sound with the correct volume", () => {
+  playReactionsSound.setValue(true);
+  soundEffectVolumeSetting.setValue(0.5);
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByTestId } = render(<TestComponent rtcSession={rtcSession} />);
+
+  // Find the first reaction with a sound effect
+  const chosenReaction = ReactionSet.find((r) => !!r.sound);
+  if (!chosenReaction) {
+    throw Error(
+      "No reactions have sounds configured, this test cannot succeed",
+    );
+  }
+  act(() => {
+    room.testSendReaction(memberEventAlice, chosenReaction, membership);
+  });
+  expect((getByTestId(chosenReaction.name) as HTMLAudioElement).volume).toEqual(
+    0.5,
+  );
+});
+
+test("will play multiple audio sounds when there are multiple different reactions", () => {
+  const audioIsPlaying: string[] = [];
+  window.HTMLMediaElement.prototype.play = async function (): Promise<void> {
+    audioIsPlaying.push((this.children[0] as HTMLSourceElement).src);
+    return Promise.resolve();
+  };
+  playReactionsSound.setValue(true);
+
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  render(<TestComponent rtcSession={rtcSession} />);
+
+  // Find the first reaction with a sound effect
+  const [reaction1, reaction2] = ReactionSet.filter((r) => !!r.sound);
+  if (!reaction1 || !reaction2) {
+    throw Error(
+      "No reactions have sounds configured, this test cannot succeed",
+    );
+  }
+  act(() => {
+    room.testSendReaction(memberEventAlice, reaction1, membership);
+    room.testSendReaction(memberEventBob, reaction2, membership);
+    room.testSendReaction(memberEventCharlie, reaction1, membership);
+  });
+  expect(audioIsPlaying).toHaveLength(2);
+  expect(audioIsPlaying[0]).toContain(reaction1.sound?.ogg);
+  expect(audioIsPlaying[1]).toContain(reaction2.sound?.ogg);
+});

src/room/ReactionAudioRenderer.tsx

@@ -0,0 +1,74 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { ReactNode, useEffect, useRef } from "react";
+
+import { useReactions } from "../useReactions";
+import {
+  playReactionsSound,
+  soundEffectVolumeSetting as effectSoundVolumeSetting,
+  useSetting,
+} from "../settings/settings";
+import { GenericReaction, ReactionSet } from "../reactions";
+
+export function ReactionsAudioRenderer(): ReactNode {
+  const { reactions } = useReactions();
+  const [shouldPlay] = useSetting(playReactionsSound);
+  const [effectSoundVolume] = useSetting(effectSoundVolumeSetting);
+  const audioElements = useRef<Record<string, HTMLAudioElement | null>>({});
+
+  useEffect(() => {
+    if (!audioElements.current) {
+      return;
+    }
+
+    if (!shouldPlay) {
+      return;
+    }
+    for (const reactionName of new Set(
+      Object.values(reactions).map((r) => r.name),
+    )) {
+      const audioElement =
+        audioElements.current[reactionName] ?? audioElements.current.generic;
+      if (audioElement?.paused) {
+        audioElement.volume = effectSoundVolume;
+        void audioElement.play();
+      }
+    }
+  }, [audioElements, shouldPlay, reactions, effectSoundVolume]);
+
+  // Do not render any audio elements if playback is disabled. Will save
+  // audio file fetches.
+  if (!shouldPlay) {
+    return null;
+  }
+
+  // NOTE: We load all audio elements ahead of time to allow the cache
+  // to be populated, rather than risk a cache miss and have the audio
+  // be delayed.
+  return (
+    <>
+      {[GenericReaction, ...ReactionSet].map(
+        (r) =>
+          r.sound && (
+            <audio
+              ref={(el) => (audioElements.current[r.name] = el)}
+              data-testid={r.name}
+              key={r.name}
+              preload="auto"
+              hidden
+            >
+              <source src={r.sound.ogg} type="audio/ogg; codecs=vorbis" />
+              {r.sound.mp3 ? (
+                <source src={r.sound.mp3} type="audio/mpeg" />
+              ) : null}
+            </audio>
+          ),
+      )}
+    </>
+  );
+}

src/room/ReactionsOverlay.module.css

@@ -0,0 +1,54 @@
+.container {
+  position: absolute;
+  display: inline;
+  z-index: 2;
+  pointer-events: none;
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+}
+
+.reaction {
+  font-size: 32pt;
+  /* Reactions are "active" for 3 seconds (as per REACTION_ACTIVE_TIME_MS), give a bit more time for it to fade out. */
+  animation-duration: 4s;
+  animation-name: reaction-up;
+  width: fit-content;
+  position: relative;
+  top: 80vh;
+}
+
+@keyframes reaction-up {
+  from {
+    opacity: 1;
+    translate: 0 0;
+    scale: 200%;
+    top: 80vh;
+  }
+
+  to {
+    top: 0;
+    opacity: 0;
+    scale: 100%;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  @keyframes reaction-up-reduced {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  .reaction {
+    font-size: 48pt;
+    animation-name: reaction-up-reduced;
+    top: calc(-50vh + (48pt / 2));
+    left: calc(50vw - (48pt / 2)) !important;
+  }
+}

src/room/ReactionsOverlay.test.tsx

@@ -0,0 +1,120 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { render } from "@testing-library/react";
+import { expect, test } from "vitest";
+import { TooltipProvider } from "@vector-im/compound-web";
+import { act, ReactNode } from "react";
+import { afterEach } from "node:test";
+
+import {
+  MockRoom,
+  MockRTCSession,
+  TestReactionsWrapper,
+} from "../utils/testReactions";
+import { showReactions } from "../settings/settings";
+import { ReactionsOverlay } from "./ReactionsOverlay";
+import { ReactionSet } from "../reactions";
+
+const memberUserIdAlice = "@alice:example.org";
+const memberUserIdBob = "@bob:example.org";
+const memberUserIdCharlie = "@charlie:example.org";
+const memberEventAlice = "$membership-alice:example.org";
+const memberEventBob = "$membership-bob:example.org";
+const memberEventCharlie = "$membership-charlie:example.org";
+
+const membership: Record<string, string> = {
+  [memberEventAlice]: memberUserIdAlice,
+  [memberEventBob]: memberUserIdBob,
+  [memberEventCharlie]: memberUserIdCharlie,
+};
+
+function TestComponent({
+  rtcSession,
+}: {
+  rtcSession: MockRTCSession;
+}): ReactNode {
+  return (
+    <TooltipProvider>
+      <TestReactionsWrapper rtcSession={rtcSession}>
+        <ReactionsOverlay />
+      </TestReactionsWrapper>
+    </TooltipProvider>
+  );
+}
+
+afterEach(() => {
+  showReactions.setValue(showReactions.defaultValue);
+});
+
+test("defaults to showing no reactions", () => {
+  showReactions.setValue(true);
+  const rtcSession = new MockRTCSession(
+    new MockRoom(memberUserIdAlice),
+    membership,
+  );
+  const { container } = render(<TestComponent rtcSession={rtcSession} />);
+  expect(container.getElementsByTagName("span")).toHaveLength(0);
+});
+
+test("shows a reaction when sent", () => {
+  showReactions.setValue(true);
+  const reaction = ReactionSet[0];
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByRole } = render(<TestComponent rtcSession={rtcSession} />);
+  act(() => {
+    room.testSendReaction(memberEventAlice, reaction, membership);
+  });
+  const span = getByRole("presentation");
+  expect(getByRole("presentation")).toBeTruthy();
+  expect(span.innerHTML).toEqual(reaction.emoji);
+});
+
+test("shows two of the same reaction when sent", () => {
+  showReactions.setValue(true);
+  const reaction = ReactionSet[0];
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getAllByRole } = render(<TestComponent rtcSession={rtcSession} />);
+  act(() => {
+    room.testSendReaction(memberEventAlice, reaction, membership);
+  });
+  act(() => {
+    room.testSendReaction(memberEventBob, reaction, membership);
+  });
+  expect(getAllByRole("presentation")).toHaveLength(2);
+});
+
+test("shows two different reactions when sent", () => {
+  showReactions.setValue(true);
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const [reactionA, reactionB] = ReactionSet;
+  const { getAllByRole } = render(<TestComponent rtcSession={rtcSession} />);
+  act(() => {
+    room.testSendReaction(memberEventAlice, reactionA, membership);
+  });
+  act(() => {
+    room.testSendReaction(memberEventBob, reactionB, membership);
+  });
+  const [reactionElementA, reactionElementB] = getAllByRole("presentation");
+  expect(reactionElementA.innerHTML).toEqual(reactionA.emoji);
+  expect(reactionElementB.innerHTML).toEqual(reactionB.emoji);
+});
+
+test("hides reactions when reaction animations are disabled", () => {
+  showReactions.setValue(false);
+  const reaction = ReactionSet[0];
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  act(() => {
+    room.testSendReaction(memberEventAlice, reaction, membership);
+  });
+  const { container } = render(<TestComponent rtcSession={rtcSession} />);
+  expect(container.getElementsByTagName("span")).toHaveLength(0);
+});

src/room/ReactionsOverlay.tsx

@@ -0,0 +1,50 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { ReactNode, useMemo } from "react";
+
+import { useReactions } from "../useReactions";
+import {
+  showReactions as showReactionsSetting,
+  useSetting,
+} from "../settings/settings";
+import styles from "./ReactionsOverlay.module.css";
+
+export function ReactionsOverlay(): ReactNode {
+  const { reactions } = useReactions();
+  const [showReactions] = useSetting(showReactionsSetting);
+  const reactionsIcons = useMemo(
+    () =>
+      showReactions
+        ? Object.entries(reactions).map(([sender, { emoji }]) => ({
+            sender,
+            emoji,
+            startX: Math.ceil(Math.random() * 80) + 10,
+          }))
+        : [],
+    [showReactions, reactions],
+  );
+
+  return (
+    <div className={styles.container}>
+      {reactionsIcons.map(({ sender, emoji, startX }) => (
+        <span
+          // Reactions effects are considered presentation elements. The reaction
+          // is also present on the sender's tile, which assistive technology can
+          // read from instead.
+          role="presentation"
+          style={{ left: `${startX}vw` }}
+          className={styles.reaction}
+          // A sender can only send one emoji at a time.
+          key={sender}
+        >
+          {emoji}
+        </span>
+      ))}
+    </div>
+  );
+}

src/room/RoomPage.tsx

@@ -5,15 +5,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useEffect, useState, useCallback, ReactNode } from "react";
+import { FC, useEffect, useState, ReactNode, useRef } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { MatrixError } from "matrix-js-sdk/src/http-api";
+import { Heading, Text } from "@vector-im/compound-web";
 
 import { useClientLegacy } from "../ClientContext";
-import { ErrorView, LoadingView } from "../FullScreenView";
+import { ErrorView, FullScreenView, LoadingView } from "../FullScreenView";
 import { RoomAuthView } from "./RoomAuthView";
-import { GroupCallLoader } from "./GroupCallLoader";
 import { GroupCallView } from "./GroupCallView";
 import { useRoomIdentifier, useUrlParams } from "../UrlParams";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
@@ -21,13 +22,14 @@ import { HomePage } from "../home/HomePage";
 import { platform } from "../Platform";
 import { AppSelectionModal } from "./AppSelectionModal";
 import { widget } from "../widget";
-import { GroupCallStatus } from "./useLoadGroupCall";
+import { CallTerminatedMessage, useLoadGroupCall } from "./useLoadGroupCall";
 import { LobbyView } from "./LobbyView";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useProfile } from "../profile/useProfile";
 import { useMuteStates } from "./MuteStates";
 import { useOptInAnalytics } from "../settings/settings";
 import { Config } from "../config/Config";
+import { Link } from "../button/Link";
 
 export const RoomPage: FC = () => {
   const {
@@ -53,6 +55,7 @@ export const RoomPage: FC = () => {
     useClientLegacy();
   const { avatarUrl, displayName: userDisplayName } = useProfile(client);
 
+  const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
   const muteStates = useMuteStates();
 
   useEffect(() => {
@@ -82,82 +85,112 @@ export const RoomPage: FC = () => {
     if (optInAnalytics === null && setOptInAnalytics) setOptInAnalytics(true);
   }, [optInAnalytics, setOptInAnalytics]);
 
-  const groupCallView = useCallback(
-    (groupCallState: GroupCallStatus): JSX.Element => {
-      switch (groupCallState.kind) {
-        case "loaded":
-          return (
-            <GroupCallView
-              client={client!}
-              rtcSession={groupCallState.rtcSession}
-              isPasswordlessUser={passwordlessUser}
-              confineToRoom={confineToRoom}
-              preload={preload}
-              skipLobby={skipLobby}
-              hideHeader={hideHeader}
-              muteStates={muteStates}
-            />
+  const wasInWaitForInviteState = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (groupCallState.kind === "loaded" && wasInWaitForInviteState.current) {
+      logger.log("Play join sound 'Not yet implemented'");
+    }
+  }, [groupCallState.kind]);
+
+  const groupCallView = (): JSX.Element => {
+    switch (groupCallState.kind) {
+      case "loaded":
+        return (
+          <GroupCallView
+            client={client!}
+            rtcSession={groupCallState.rtcSession}
+            isPasswordlessUser={passwordlessUser}
+            confineToRoom={confineToRoom}
+            preload={preload}
+            skipLobby={skipLobby || wasInWaitForInviteState.current}
+            hideHeader={hideHeader}
+            muteStates={muteStates}
+          />
+        );
+      case "waitForInvite":
+      case "canKnock": {
+        wasInWaitForInviteState.current =
+          wasInWaitForInviteState.current ||
+          groupCallState.kind === "waitForInvite";
+        const knock =
+          groupCallState.kind === "canKnock" ? groupCallState.knock : null;
+        const label: string | JSX.Element =
+          groupCallState.kind === "canKnock" ? (
+            t("lobby.ask_to_join")
+          ) : (
+            <>
+              {t("lobby.waiting_for_invite")}
+              <CheckIcon />
+            </>
           );
-        case "waitForInvite":
-        case "canKnock": {
-          const knock =
-            groupCallState.kind === "canKnock" ? groupCallState.knock : null;
-          const label: string | JSX.Element =
-            groupCallState.kind === "canKnock" ? (
-              t("lobby.ask_to_join")
-            ) : (
-              <>
-                {t("lobby.waiting_for_invite")}
-                <CheckIcon />
-              </>
-            );
-          return (
-            <LobbyView
-              client={client!}
-              matrixInfo={{
-                userId: client!.getUserId() ?? "",
-                displayName: userDisplayName ?? "",
-                avatarUrl: avatarUrl ?? "",
-                roomAlias: null,
-                roomId: groupCallState.roomSummary.room_id,
-                roomName: groupCallState.roomSummary.name ?? "",
-                roomAvatar: groupCallState.roomSummary.avatar_url ?? null,
-                e2eeSystem: {
-                  kind: groupCallState.roomSummary[
-                    "im.nheko.summary.encryption"
-                  ]
-                    ? E2eeType.PER_PARTICIPANT
-                    : E2eeType.NONE,
-                },
-              }}
-              onEnter={(): void => knock?.()}
-              enterLabel={label}
-              waitingForInvite={groupCallState.kind === "waitForInvite"}
-              confineToRoom={confineToRoom}
-              hideHeader={hideHeader}
-              participantCount={null}
-              muteStates={muteStates}
-              onShareClick={null}
-            />
-          );
-        }
-        default:
-          return <> </>;
+        return (
+          <LobbyView
+            client={client!}
+            matrixInfo={{
+              userId: client!.getUserId() ?? "",
+              displayName: userDisplayName ?? "",
+              avatarUrl: avatarUrl ?? "",
+              roomAlias: null,
+              roomId: groupCallState.roomSummary.room_id,
+              roomName: groupCallState.roomSummary.name ?? "",
+              roomAvatar: groupCallState.roomSummary.avatar_url ?? null,
+              e2eeSystem: {
+                kind: groupCallState.roomSummary["im.nheko.summary.encryption"]
+                  ? E2eeType.PER_PARTICIPANT
+                  : E2eeType.NONE,
+              },
+            }}
+            onEnter={(): void => knock?.()}
+            enterLabel={label}
+            waitingForInvite={groupCallState.kind === "waitForInvite"}
+            confineToRoom={confineToRoom}
+            hideHeader={hideHeader}
+            participantCount={null}
+            muteStates={muteStates}
+            onShareClick={null}
+          />
+        );
       }
-    },
-    [
-      client,
-      passwordlessUser,
-      confineToRoom,
-      preload,
-      skipLobby,
-      hideHeader,
-      muteStates,
-      t,
-      userDisplayName,
-      avatarUrl,
-    ],
-  );
+      case "loading":
+        return (
+          <FullScreenView>
+            <h1>{t("common.loading")}</h1>
+          </FullScreenView>
+        );
+      case "failed":
+        wasInWaitForInviteState.current = false;
+        if ((groupCallState.error as MatrixError).errcode === "M_NOT_FOUND") {
+          return (
+            <FullScreenView>
+              <Heading>{t("group_call_loader.failed_heading")}</Heading>
+              <Text>{t("group_call_loader.failed_text")}</Text>
+              {/* XXX: A 'create it for me' button would be the obvious UX here. Two screens already have
+            dupes of this flow, let's make a common component and put it here. */}
+              <Link to="/">{t("common.home")}</Link>
+            </FullScreenView>
+          );
+        } else if (groupCallState.error instanceof CallTerminatedMessage) {
+          return (
+            <FullScreenView>
+              <Heading>{groupCallState.error.message}</Heading>
+              <Text>{groupCallState.error.messageBody}</Text>
+              {groupCallState.error.reason && (
+                <>
+                  {t("group_call_loader.reason")}:
+                  <Text size="sm">"{groupCallState.error.reason}"</Text>
+                </>
+              )}
+              <Link to="/">{t("common.home")}</Link>
+            </FullScreenView>
+          );
+        } else {
+          return <ErrorView error={groupCallState.error} />;
+        }
+      default:
+        return <> </>;
+    }
+  };
 
   let content: ReactNode;
   if (loading || isRegistering) {
@@ -170,15 +203,7 @@ export const RoomPage: FC = () => {
     // TODO: This doesn't belong here, the app routes need to be reworked
     content = <HomePage />;
   } else {
-    content = (
-      <GroupCallLoader
-        client={client}
-        roomIdOrAlias={roomIdOrAlias}
-        viaServers={viaServers}
-      >
-        {groupCallView}
-      </GroupCallLoader>
-    );
+    content = groupCallView();
   }
 
   return (

src/room/VideoPreview.module.css

@@ -66,6 +66,7 @@ video.mirror {
     margin-inline: 0;
     border-radius: 0;
     block-size: 100%;
+    width: 100%;
   }
 
   .buttonBar {

src/room/useLoadGroupCall.ts

@@ -117,8 +117,8 @@ export class CallTerminatedMessage extends Error {
 }
 
 export const useLoadGroupCall = (
-  client: MatrixClient,
-  roomIdOrAlias: string,
+  client: MatrixClient | undefined,
+  roomIdOrAlias: string | null,
   viaServers: string[],
 ): GroupCallStatus => {
   const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
@@ -159,6 +159,9 @@ export const useLoadGroupCall = (
       ?.getContent().reason;
 
   useEffect(() => {
+    if (!client || !roomIdOrAlias) {
+      return;
+    }
     const getRoomByAlias = async (alias: string): Promise<Room> => {
       // We lowercase the localpart when we create the room, so we must lowercase
       // it here too (we just do the whole alias). We can't do the same to room IDs

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,
+    },
   );
 });

src/rtcSessionHelpers.ts

@@ -98,8 +98,9 @@ export async function enterRTCSession(
 
   // right now we assume everything is a room-scoped call
   const livekitAlias = rtcSession.room.roomId;
+  const { features, matrix_rtc_session: matrixRtcSessionConfig } = Config.get();
   const useDeviceSessionMemberEvents =
-    Config.get().features?.feature_use_device_session_member_events;
+    features?.feature_use_device_session_member_events;
   rtcSession.joinRoomSession(
     await makePreferredLivekitFoci(rtcSession, livekitAlias),
     makeActiveFocus(),
@@ -108,6 +109,11 @@ export async function enterRTCSession(
       ...(useDeviceSessionMemberEvents !== undefined && {
         useLegacyMemberEvents: !useDeviceSessionMemberEvents,
       }),
+      membershipServerSideExpiryTimeout:
+        matrixRtcSessionConfig?.membership_server_side_expiry_timeout,
+      membershipKeepAlivePeriod:
+        matrixRtcSessionConfig?.membership_keep_alive_period,
+      makeKeyDelay: matrixRtcSessionConfig?.key_rotation_on_leave_delay,
     },
   );
 }

src/settings/PreferencesSettingsTab.tsx

@@ -1,17 +1,19 @@
 /*
-Copyright 2022-2024 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ChangeEvent, FC, useCallback } from "react";
+import { ChangeEvent, FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Text } from "@vector-im/compound-web";
 
 import { FieldRow, InputField } from "../input/Input";
 import {
   showHandRaisedTimer as showHandRaisedTimerSetting,
+  showReactions as showReactionsSetting,
+  playReactionsSound as playReactionsSoundSetting,
   useSetting,
 } from "./settings";
 
@@ -21,13 +23,19 @@ export const PreferencesSettingsTab: FC = () => {
     showHandRaisedTimerSetting,
   );
 
-  const onChangeSetting = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      setShowHandRaisedTimer(e.target.checked);
-    },
-    [setShowHandRaisedTimer],
+  const [showReactions, setShowReactions] = useSetting(showReactionsSetting);
+
+  const [playReactionsSound, setPlayReactionSound] = useSetting(
+    playReactionsSoundSetting,
   );
 
+  const onChangeSetting = (
+    e: ChangeEvent<HTMLInputElement>,
+    fn: (value: boolean) => void,
+  ): void => {
+    fn(e.target.checked);
+  };
+
   return (
     <div>
       <h4>{t("settings.preferences_tab_h4")}</h4>
@@ -41,7 +49,30 @@ export const PreferencesSettingsTab: FC = () => {
           )}
           type="checkbox"
           checked={showHandRaisedTimer}
-          onChange={onChangeSetting}
+          onChange={(e) => onChangeSetting(e, setShowHandRaisedTimer)}
+        />
+      </FieldRow>
+      <h5>{t("settings.preferences_tab.reactions_title")}</h5>
+      <FieldRow>
+        <InputField
+          id="showReactions"
+          label={t("settings.preferences_tab.reactions_show_label")}
+          description={t("settings.preferences_tab.reactions_show_description")}
+          type="checkbox"
+          checked={showReactions}
+          onChange={(e) => onChangeSetting(e, setShowReactions)}
+        />
+      </FieldRow>
+      <FieldRow>
+        <InputField
+          id="playReactionSound"
+          label={t("settings.preferences_tab.reactions_play_sound_label")}
+          description={t(
+            "settings.preferences_tab.reactions_play_sound_description",
+          )}
+          type="checkbox"
+          checked={playReactionsSound}
+          onChange={(e) => onChangeSetting(e, setPlayReactionSound)}
         />
       </FieldRow>
     </div>

src/settings/SettingsModal.module.css

@@ -16,3 +16,20 @@ Please see LICENSE in the repository root for full details.
 .fieldRowText {
   margin-bottom: 0;
 }
+
+.volumeSlider {
+  margin-top: var(--cpd-space-2x);
+}
+
+.volumeSlider > label {
+  margin-bottom: var(--cpd-space-1x);
+  display: block;
+}
+
+.volumeSlider > span {
+  max-width: 20em;
+}
+
+.volumeSlider > p {
+  color: var(--cpd-color-text-secondary);
+}

src/settings/SettingsModal.tsx

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { ChangeEvent, FC, ReactNode, useCallback } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
-import { Dropdown, Text } from "@vector-im/compound-web";
+import { Dropdown, Separator, Text } from "@vector-im/compound-web";
 
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
@@ -28,9 +28,11 @@ import {
   developerSettingsTab as developerSettingsTabSetting,
   duplicateTiles as duplicateTilesSetting,
   useOptInAnalytics,
+  soundEffectVolumeSetting,
 } from "./settings";
 import { isFirefox } from "../Platform";
 import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
+import { Slider } from "../Slider";
 
 type SettingsTab =
   | "audio"
@@ -116,6 +118,8 @@ export const SettingsModal: FC<Props> = ({
   const devices = useMediaDevices();
   useMediaDeviceNames(devices, open);
 
+  const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting);
+
   const audioTab: Tab<SettingsTab> = {
     key: "audio",
     name: t("common.audio"),
@@ -127,6 +131,19 @@ export const SettingsModal: FC<Props> = ({
             devices.audioOutput,
             t("settings.speaker_device_selection_label"),
           )}
+        <Separator />
+        <div className={styles.volumeSlider}>
+          <label>{t("settings.audio_tab.effect_volume_label")}</label>
+          <p>{t("settings.audio_tab.effect_volume_description")}</p>
+          <Slider
+            label={t("video_tile.volume")}
+            value={soundVolume}
+            onValueChange={setSoundVolume}
+            min={0}
+            max={1}
+            step={0.01}
+          />
+        </div>
       </>
     ),
   };

src/settings/rageshake.ts

@@ -28,7 +28,7 @@ Please see LICENSE in the repository root for full details.
 //    purge on startup to prevent logs from accumulating.
 
 import EventEmitter from "events";
-import { throttle } from "lodash";
+import { throttle } from "lodash-es";
 import { Logger, logger } from "matrix-js-sdk/src/logger";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import loglevel, { LoggingMethod } from "loglevel";

src/settings/settings.ts

@@ -12,7 +12,10 @@ import { useObservableEagerState } from "observable-hooks";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 
 export class Setting<T> {
-  public constructor(key: string, defaultValue: T) {
+  public constructor(
+    key: string,
+    public readonly defaultValue: T,
+  ) {
     this.key = `matrix-setting-${key}`;
 
     const storedValue = localStorage.getItem(this.key);
@@ -90,4 +93,16 @@ export const showHandRaisedTimer = new Setting<boolean>(
   false,
 );
 
+export const showReactions = new Setting<boolean>("reactions-show", true);
+
+export const playReactionsSound = new Setting<boolean>(
+  "reactions-play-sound",
+  true,
+);
+
+export const soundEffectVolumeSetting = new Setting<number>(
+  "sound-effect-volume",
+  0.5,
+);
+
 export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);

src/settings/submit-rageshake.ts

@@ -6,9 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { ComponentProps, useCallback, useEffect, useState } from "react";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import pako from "pako";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
   ClientEvent,
@@ -23,11 +20,14 @@ import { Config } from "../config/Config";
 import { ElementCallOpenTelemetry } from "../otel/otel";
 import { RageshakeRequestModal } from "../room/RageshakeRequestModal";
 
-const gzip = (text: string): Blob => {
+const gzip = async (text: string): Promise<Blob> => {
+  // pako is relatively large (200KB), so we only import it when needed
+  const { gzip: pakoGzip } = await import("pako");
+
   // encode as UTF-8
   const buf = new TextEncoder().encode(text);
   // compress
-  return new Blob([pako.gzip(buf)]);
+  return new Blob([pakoGzip(buf)]);
 };
 
 /**
@@ -253,12 +253,14 @@ export function useSubmitRageshake(): {
           const logs = await getLogsForReport();
 
           for (const entry of logs) {
-            body.append("compressed-log", gzip(entry.lines), entry.id);
+            body.append("compressed-log", await gzip(entry.lines), entry.id);
           }
 
           body.append(
             "file",
-            gzip(ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump()),
+            await gzip(
+              ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump(),
+            ),
             "traces.json.gz",
           );
         }

src/sound/LICENCE.md

@@ -0,0 +1,22 @@
+# Sound effect licences
+
+The following sound effects have been licensed from Pixabay, under https://pixabay.com/service/license-summary/.
+
+- `raise_hand`
+- `reactions/cat`
+- `reactions/clap`
+- `reactions/crickets`
+- `reactions/dog`
+- `reactions/generic`
+- `reactions/lightbulb`
+- `reactions/party`
+
+### Other
+
+The following sound effects have been originally created by Element.
+
+- `blocked`
+- `end_talk`
+- `start_talk_local`
+- `start_talk_remote`
+- `reactions/rock`