Explicitly bump matrix-widget-api

Was already present in yarn.lock

.eslintrc.cjs

@@ -37,7 +37,6 @@ module.exports = {
     "@typescript-eslint/promise-function-async": "error",
     "@typescript-eslint/require-await": "error",
     "@typescript-eslint/await-thenable": "error",
-    "rxjs/no-exposed-subjects": "error",
   },
   settings: {
     react: {

.github/workflows/build.yaml

@@ -23,4 +23,3 @@ 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,8 +14,6 @@ on:
         required: true
       SENTRY_AUTH_TOKEN:
         required: true
-      CODECOV_TOKEN:
-        required: false
 
 jobs:
   build:
@@ -38,7 +36,6 @@ 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

.github/workflows/translations-download.yaml

@@ -24,7 +24,7 @@ jobs:
         run: "yarn install --frozen-lockfile"
 
       - name: Prune i18n
-        run: "rm -R locales"
+        run: "rm -R public/locales"
 
       - name: Download translation files
         uses: localazy/download@0a79880fb66150601e3b43606fab69c88123c087 # v1.1.0
@@ -32,7 +32,7 @@ jobs:
           groups: "-p includeSourceLang:true"
 
       - name: Fix the owner of the downloaded files
-        run: "sudo chown runner:docker -R locales"
+        run: "sudo chown runner:docker -R public/locales"
 
       - name: Prettier
         run: yarn prettier:format

Dockerfile

@@ -2,3 +2,9 @@ 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 ("Request to join call"), a cannot join error or the
+prompted with the option to knock ("ask to join"), a cannot join error or the
 join view.
 
 Element Call requires a Livekit SFU alongside a [Livekit JWT
@@ -213,7 +213,7 @@ To add a new translation key you can do these steps:
 
 1. Add the new key entry to the code where the new key is used: `t("some_new_key")`
 1. Run `yarn i18n` to extract the new key and update the translation files. This
-   will add a skeleton entry to the `locales/en-GB/app.json` file:
+   will add a skeleton entry to the `public/locales/en-GB/app.json` file:
    ```jsonc
    {
        ...
@@ -221,7 +221,7 @@ To add a new translation key you can do these steps:
        ...
    }
    ```
-1. Update the skeleton entry in the `locales/en-GB/app.json` file with
+1. Update the skeleton entry in the `public/locales/en-GB/app.json` file with
    the English translation:
 
 ```jsonc

config/nginx.conf

@@ -3,17 +3,23 @@ server {
     server_name  localhost;
 
     root   /app;
-    gzip_static on;
-    gzip_vary 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;
-        add_header Cache-Control "public, max-age=30, stale-while-revalidate=30";
     }
 
     # assets can be cached because they have hashed filenames
     location /assets {
-        add_header Cache-Control "public, immutable, max-age=31536000";
+        expires 1w;
+        add_header Cache-Control "public, no-transform";
     }
 
     location /apple-app-site-association {

i18next-parser.config.ts

@@ -22,7 +22,7 @@ export default {
     ],
   },
   locales: ["en-GB"],
-  output: "locales/$LOCALE/$NAMESPACE.json",
+  output: "public/locales/$LOCALE/$NAMESPACE.json",
   input: ["src/**/*.{ts,tsx}"],
   sort: true,
 };

localazy.json

@@ -7,13 +7,13 @@
     "features": ["plural_postfix_us", "filter_untranslated"],
     "files": [
       {
-        "pattern": "locales/en-GB/*.json",
+        "pattern": "public/locales/en-GB/*.json",
         "lang": "inherited"
       },
       {
         "group": "existing",
-        "pattern": "locales/*/*.json",
-        "excludes": ["locales/en-GB/*.json"],
+        "pattern": "public/locales/*/*.json",
+        "excludes": ["public/locales/en-GB/*.json"],
         "lang": "${autodetectLang}"
       }
     ]
@@ -22,7 +22,7 @@
   "download": {
     "files": [
       {
-        "output": "locales/${langLsrDash}/${file}"
+        "output": "public/locales/${langLsrDash}/${file}"
       }
     ],
     "includeSourceLang": "${includeSourceLang|false}",

package.json

@@ -24,9 +24,6 @@
     "@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",
@@ -51,9 +48,8 @@
     "@types/content-type": "^1.1.5",
     "@types/grecaptcha": "^3.0.9",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash-es": "^4.17.12",
+    "@types/lodash": "^4.14.199",
     "@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",
@@ -84,13 +80,14 @@
     "history": "^4.0.0",
     "i18next": "^23.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.0.0",
     "i18next-parser": "^9.0.0",
     "jsdom": "^25.0.0",
     "knip": "^5.27.2",
     "livekit-client": "^2.5.7",
-    "lodash-es": "^4.17.21",
+    "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#80582a734684b532585b52cde63ef34dc7d774fa",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#fcb69b16ad8d170c67ea844f83543d467bbd7707",
     "matrix-widget-api": "^1.10.0",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
@@ -111,9 +108,8 @@
     "typescript": "^5.1.6",
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
-    "vaul": "^1.0.0",
+    "vaul": "^0.9.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/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="favicon.png" />
-    <link rel="preload" href="/config.json" as="fetch" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0"

public/locales/de/app.json

@@ -4,18 +4,19 @@
   },
   "action": {
     "close": "Schließen",
+    "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",
-    "show_less": "Weniger anzeigen",
-    "show_more": "Mehr anzeigen",
     "sign_in": "Anmelden",
     "sign_out": "Abmelden",
     "submit": "Absenden",
@@ -61,7 +62,7 @@
     "preferences": "Einstellungen",
     "profile": "Profil",
     "reaction": "Reaktion",
-    "reactions": "Reaktionen",
+    "search": "Suche",
     "settings": "Einstellungen",
     "something_went_wrong": "Etwas ist schief gelaufen",
     "unencrypted": "Nicht verschlüsselt",
@@ -80,8 +81,8 @@
     "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",
+    "knock_reject_body": "Die Mitglieder des Raums haben Deine Beitrittsanfrage abgelehnt.",
+    "knock_reject_heading": "Beitritt nicht erlaubt",
     "reason": "Grund"
   },
   "hangup_button_label": "Anruf beenden",
@@ -99,11 +100,11 @@
   "layout_grid_label": "Raster",
   "layout_spotlight_label": "Fokus",
   "lobby": {
-    "ask_to_join": "Teilnahmeanfrage senden",
+    "ask_to_join": "Beitritt anfragen",
     "join_as_guest": "Als Gast beitreten",
     "join_button": "Anruf beitreten",
     "leave_button": "Zurück zu kürzlichen Anrufen",
-    "waiting_for_invite": "Anfrage gesendet! Warten auf Teilnahmefreigabe …"
+    "waiting_for_invite": "Anfrage gesendet"
   },
   "log_in": "Anmelden",
   "logging_in": "Anmelden …",
@@ -114,7 +115,7 @@
   "matrix_id": "Matrix-ID: {{id}}",
   "microphone_off": "Mikrofon aus",
   "microphone_on": "Mikrofon an",
-  "mute_microphone_button_label": "Mikrofon stumm schalten",
+  "mute_microphone_button_label": "Mikrofon deaktivieren",
   "participant_count_one": "{{count, number}}",
   "participant_count_other": "{{count, number}}",
   "qr_code": "QR-Code",
@@ -127,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",
@@ -161,8 +163,8 @@
     "preferences_tab": {
       "reactions_play_sound_description": "Einen Soundeffekt abspielen, wenn jemand eine Reaktion sendet",
       "reactions_play_sound_label": "Reaktionstöne abspielen",
-      "reactions_show_description": "Zeige eine Animation, wenn jemand eine Reaktion sendet.",
-      "reactions_show_label": "Reaktionen anzeigen",
+      "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",
@@ -182,15 +184,14 @@
   "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 einschalten",
+  "unmute_microphone_button_label": "Mikrofon aktivieren",
   "version": "{{productName}} Version: {{version}}",
   "video_tile": {
     "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",
+    "mute_for_me": "Für mich stummschalten",
     "volume": "Lautstärke"
   }
 }

public/locales/en-GB/app.json

@@ -4,18 +4,19 @@
   },
   "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",
-    "show_less": "Show less",
-    "show_more": "Show more",
     "sign_in": "Sign in",
     "sign_out": "Sign out",
     "submit": "Submit",
@@ -61,7 +62,7 @@
     "preferences": "Preferences",
     "profile": "Profile",
     "reaction": "Reaction",
-    "reactions": "Reactions",
+    "search": "Search",
     "settings": "Settings",
     "something_went_wrong": "Something went wrong",
     "unencrypted": "Not encrypted",
@@ -80,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": "Your request to join was declined.",
-    "knock_reject_heading": "Access denied",
+    "knock_reject_body": "The room members declined your request to join.",
+    "knock_reject_heading": "Not allowed to join",
     "reason": "Reason"
   },
   "hangup_button_label": "End call",
@@ -99,11 +100,11 @@
   "layout_grid_label": "Grid",
   "layout_spotlight_label": "Spotlight",
   "lobby": {
-    "ask_to_join": "Request to join call",
+    "ask_to_join": "Ask 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 permission to join…"
+    "waiting_for_invite": "Request sent"
   },
   "log_in": "Log In",
   "logging_in": "Logging in…",
@@ -127,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",
@@ -161,8 +163,8 @@
     "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 an animation when anyone sends a reaction.",
-      "reactions_show_label": "Show reactions",
+      "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",
@@ -190,7 +192,6 @@
     "collapse": "Collapse",
     "expand": "Expand",
     "mute_for_me": "Mute for me",
-    "muted_for_me": "Muted for me",
     "volume": "Volume"
   }
 }

renovate.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:recommended"],
+  "extends": ["config:base"],
   "packageRules": [
     {
       "groupName": "all non-major dependencies",
@@ -26,8 +26,8 @@
     },
     {
       "groupName": "Compound",
-      "schedule": "before 5am on Tuesday and Friday",
-      "matchPackageNames": ["@vector-im/compound-{/,}**"]
+      "matchPackagePrefixes": ["@vector-im/compound-"],
+      "schedule": "before 5am on Tuesday and Friday"
     },
     {
       "groupName": "LiveKit client",
@@ -35,7 +35,7 @@
     },
     {
       "groupName": "LiveKit components",
-      "matchPackageNames": ["@livekit/components-{/,}**"]
+      "matchPackagePrefixes": ["@livekit/components-"]
     },
     {
       "groupName": "Vaul",

src/@types/global.d.ts

@@ -6,7 +6,6 @@ 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 {
@@ -24,9 +23,4 @@ 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/i18next.d.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import "i18next";
 // import all namespaces (for the default language, only)
-import app from "../../locales/en-GB/app.json";
+import app from "../../public/locales/en-GB/app.json";
 
 declare module "i18next" {
   interface CustomTypeOptions {

src/ClientContext.tsx

@@ -16,13 +16,19 @@ 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 { ClientEvent, type MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixError } from "matrix-js-sdk/src/matrix";
+import { WidgetApi } from "matrix-widget-api";
 
-import type { WidgetApi } from "matrix-widget-api";
 import { ErrorView } from "./FullScreenView";
+import { fallbackICEServerAllowed, initClient } from "./utils/matrix";
 import { widget } from "./widget";
 import {
   PosthogAnalytics,
@@ -30,6 +36,7 @@ import {
 } from "./analytics/PosthogAnalytics";
 import { translatedError } from "./TranslatedError";
 import { useEventTarget } from "./useEvents";
+import { Config } from "./config/Config";
 
 declare global {
   interface Window {
@@ -352,7 +359,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   );
 };
 
-export type InitResult = {
+type InitResult = {
   widgetApi: WidgetApi | null;
   client: MatrixClient;
   passwordlessUser: boolean;
@@ -369,8 +376,50 @@ async function loadClient(): Promise<InitResult | null> {
       passwordlessUser: false,
     };
   } else {
-    const { initSPA } = await import("./utils/spa");
-    return initSPA(loadSession, clearSession);
+    // 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;
+    }
   }
 }
 

src/Modal.module.css

@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 .modal {
-  --inset-inline: 520px;
   display: flex;
   flex-direction: column;
 }
@@ -36,7 +35,7 @@ Please see LICENSE in the repository root for full details.
 .drawer {
   background: var(--cpd-color-bg-canvas-default);
   inset-block-end: 0;
-  inset-inline: max(0px, calc((100% - var(--inset-inline)) / 2));
+  inset-inline: max(0px, calc((100% - 520px) / 2));
   max-block-size: 90%;
   border-start-start-radius: var(--border-radius);
   border-start-end-radius: var(--border-radius);

src/Overlay.module.css

@@ -42,9 +42,8 @@ Please see LICENSE in the repository root for full details.
 }
 
 .overlay.animate {
-  --overlay-top: 50%;
   left: 50%;
-  top: var(--overlay-top);
+  top: 50%;
   transform: translate(-50%, -50%);
 }
 

src/Slider.tsx

@@ -8,7 +8,6 @@ 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";
 
@@ -67,10 +66,7 @@ export const Slider: FC<Props> = ({
       <Track className={styles.track}>
         <Range className={styles.highlight} />
       </Track>
-      {/* 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>
+      <Thumb className={styles.handle} aria-label={label} />
     </Root>
   );
 };

src/__snapshots__/Modal.test.tsx.snap

@@ -39,16 +39,13 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
   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"
+  vaul-drawer=""
+  vaul-drawer-direction="bottom"
+  vaul-drawer-visible="true"
 >
   <div
     class="content"

src/button/ReactionToggleButton.module.css

@@ -3,99 +3,78 @@
 }
 
 .reactionPopupMenu {
-  --reaction-button-padding: 10px;
-  --reaction-button-fontsize: 20px;
-  --reaction-button-gap: var(--cpd-separator-spacing);
   display: flex;
-  width: fit-content;
 }
 
-@media (max-width: 420px) {
-  .reactionPopupMenu {
-    --reaction-button-padding: 8px;
-    --reaction-button-fontsize: 16px;
-    --reaction-button-gap: 6px;
-  }
+.reactionPopupMenuModal {
+  width: fit-content !important;
+  top: 82vh !important;
 }
 
-div.reactionPopupMenuRoot.reactionPopupMenuModal {
-  --overlay-top: 82vh;
-  width: fit-content;
+.reactionPopupMenuModal > div > div {
+  padding-inline: var(--cpd-space-6x) !important;
+  padding-block: var(--cpd-space-6x) var(--cpd-space-8x) !important;
 }
 
-div.reactionPopupMenuRoot {
-  /* Center the drawer */
-  --inset-inline: 30em;
-}
-
-.reactionPopupMenuRoot > div {
-  width: fit-content;
-  max-width: 100vw;
-}
-
-div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
-  padding-inline: var(--cpd-space-6x);
-  padding-block: var(--cpd-space-6x);
+.reactionPopupMenu menu {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cpd-separator-spacing);
 }
 
 .reactionPopupMenu section {
   height: fit-content;
-  flex: 1;
-  max-width: fit-content;
+  margin-top: auto;
+  margin-bottom: auto;
 }
 
-.reactionPopupMenu section.reactionsMenuSection {
-  margin: auto 0;
-  flex: auto;
+.reactionPopupMenuItem {
+  list-style: none;
 }
 
 .reactionsMenu {
-  margin: 0;
-  padding: 0;
-  flex-grow: 1;
-  gap: var(--reaction-button-gap);
-  /* Height of 3 rows plus padding. */
-  max-height: calc(
-    ((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 3
-  );
-  max-width: calc(
-    ((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 5
-  );
-  overflow-x: hidden;
-  overflow-y: auto;
-  list-style: none;
-  flex-wrap: wrap;
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: start;
-  align-items: auto;
-  align-content: start;
-  width: fit-content;
-}
-
-.reactionsMenu > * {
-  flex: 0 0 auto;
+  min-height: 3em;
 }
 
 .reactionButton {
-  padding: var(--reaction-button-padding);
+  padding: 1em;
+  font-size: 1.6em;
+  width: 1.4em;
+  height: 1.4em;
   border-radius: var(--cpd-radius-pill-effect);
-  font-size: var(--reaction-button-fontsize);
-  min-block-size: unset;
-  border: none;
-  aspect-ratio: 1 / 1;
-  height: 100%;
+}
+
+@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: 2px;
+  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;

src/button/ReactionToggleButton.test.tsx

@@ -5,8 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { render } from "@testing-library/react";
+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";
@@ -28,13 +30,18 @@ const membership: Record<string, string> = {
 
 function TestComponent({
   rtcSession,
+  room,
 }: {
   rtcSession: MockRTCSession;
+  room: MockRoom;
 }): ReactNode {
   return (
     <TooltipProvider>
       <TestReactionsWrapper rtcSession={rtcSession}>
-        <ReactionToggleButton userId={memberUserIdAlice} />
+        <ReactionToggleButton
+          rtcSession={rtcSession as unknown as MatrixRTCSession}
+          client={room.client}
+        />
       </TestReactionsWrapper>
     </TooltipProvider>
   );
@@ -45,9 +52,9 @@ test("Can open menu", async () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} />,
+    <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  await user.click(getByLabelText("common.reactions"));
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
   expect(container).toMatchSnapshot();
 });
 
@@ -56,9 +63,9 @@ test("Can raise hand", async () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} />,
+    <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  await user.click(getByLabelText("common.reactions"));
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
   await user.click(getByLabelText("action.raise_hand"));
   expect(room.testSentEvents).toEqual([
     [
@@ -81,10 +88,10 @@ test("Can lower hand", async () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} />,
+    <TestComponent rtcSession={rtcSession} room={room} />,
   );
   const reactionEvent = room.testSendHandRaise(memberEventAlice, membership);
-  await user.click(getByLabelText("common.reactions"));
+  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();
@@ -95,9 +102,9 @@ test("Can react with emoji", async () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByLabelText, getByText } = render(
-    <TestComponent rtcSession={rtcSession} />,
+    <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  await user.click(getByLabelText("common.reactions"));
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
   await user.click(getByText("🐶"));
   expect(room.testSentEvents).toEqual([
     [
@@ -115,15 +122,17 @@ test("Can react with emoji", async () => {
   ]);
 });
 
-test("Can fully expand emoji picker", async () => {
+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} />,
+    <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  await user.click(getByLabelText("common.reactions"));
-  await user.click(getByLabelText("action.show_more"));
+  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("🦗"));
 
@@ -143,15 +152,63 @@ test("Can fully expand emoji picker", async () => {
   ]);
 });
 
-test("Can close reaction dialog", async () => {
+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} />,
+    <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  await user.click(getByLabelText("common.reactions"));
-  await user.click(getByLabelText("action.show_more"));
-  await user.click(getByLabelText("action.show_less"));
+  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

@@ -5,16 +5,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { Button as CpdButton, Tooltip, Alert } from "@vector-im/compound-web";
 import {
+  Button as CpdButton,
+  Tooltip,
+  Search,
+  Form,
+  Alert,
+} from "@vector-im/compound-web";
+import {
+  SearchIcon,
+  CloseIcon,
   RaisedHandSolidIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  ReactionSolidIcon,
+  ReactionIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
+  ChangeEventHandler,
   ComponentPropsWithoutRef,
   FC,
+  KeyboardEventHandler,
   ReactNode,
   useCallback,
   useEffect,
@@ -23,11 +31,19 @@ import {
 } 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, ReactionsRowSize } from "../reactions";
+import {
+  ReactionOption,
+  ReactionSet,
+  ElementCallReactionEventType,
+} from "../reactions";
 import { Modal } from "../Modal";
 
 interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
@@ -39,14 +55,15 @@ const InnerButton: FC<InnerButtonProps> = ({ raised, open, ...props }) => {
   const { t } = useTranslation();
 
   return (
-    <Tooltip label={t("common.reactions")}>
+    <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 : ReactionSolidIcon}
+        Icon={raised ? RaisedHandSolidIcon : ReactionIcon}
         {...props}
       />
     </Tooltip>
@@ -67,11 +84,43 @@ export function ReactionPopupMenu({
   canReact: boolean;
 }): ReactNode {
   const { t } = useTranslation();
-  const [isFullyExpanded, setExpanded] = useState(false);
+  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(
-    () => (isFullyExpanded ? ReactionSet : ReactionSet.slice(0, 5)),
-    [isFullyExpanded],
+    () =>
+      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 (
@@ -87,10 +136,9 @@ export function ReactionPopupMenu({
       )}
       <div className={styles.reactionPopupMenu}>
         <section className={styles.handRaiseSection}>
-          <Tooltip label={label} caption="H">
+          <Tooltip label={label}>
             <CpdButton
               kind={isHandRaised ? "primary" : "secondary"}
-              aria-keyshortcuts="H"
               aria-pressed={isHandRaised}
               aria-label={label}
               onClick={() => toggleRaisedHand()}
@@ -100,33 +148,41 @@ export function ReactionPopupMenu({
           </Tooltip>
         </section>
         <div className={styles.verticalSeperator} />
-        <section className={styles.reactionsMenuSection}>
-          <menu
-            className={classNames(
-              isFullyExpanded && styles.reactionsMenuExpanded,
-              styles.reactionsMenu,
-            )}
-          >
-            {filteredReactionSet.map((reaction, index) => (
-              <li key={reaction.name}>
-                <Tooltip
-                  label={reaction.name}
-                  caption={
-                    index < ReactionsRowSize
-                      ? (index + 1).toString()
-                      : undefined
-                  }
-                >
+        <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)}
-                    aria-keyshortcuts={
-                      index < ReactionsRowSize
-                        ? (index + 1).toString()
-                        : undefined
-                    }
                   >
                     {reaction.emoji}
                   </CpdButton>
@@ -135,56 +191,73 @@ export function ReactionPopupMenu({
             ))}
           </menu>
         </section>
-        <section style={{ marginLeft: "var(--cpd-separator-spacing)" }}>
-          <Tooltip
-            label={
-              isFullyExpanded ? t("action.show_less") : t("action.show_more")
-            }
-          >
-            <CpdButton
-              iconOnly
-              aria-label={
-                isFullyExpanded ? t("action.show_less") : t("action.show_more")
-              }
-              Icon={isFullyExpanded ? ChevronUpIcon : ChevronDownIcon}
-              kind="tertiary"
-              onClick={() => setExpanded(!isFullyExpanded)}
-            />
-          </Tooltip>
-        </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"> {
-  userId: string;
+  rtcSession: MatrixRTCSession;
+  client: MatrixClient;
 }
 
 export function ReactionToggleButton({
-  userId,
+  client,
+  rtcSession,
   ...props
 }: ReactionToggleButtonProps): ReactNode {
   const { t } = useTranslation();
-  const { raisedHands, toggleRaisedHand, sendReaction, reactions } =
-    useReactions();
+  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>();
 
-  const isHandRaised = !!raisedHands[userId];
-  const canReact = !reactions[userId];
-
   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 sendReaction(reaction);
+        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) {
@@ -194,25 +267,59 @@ export function ReactionToggleButton({
         setBusy(false);
       }
     },
-    [sendReaction],
+    [memberships, client, userId, rtcSession],
   );
 
-  const wrappedToggleRaisedHand = useCallback(() => {
-    const toggleHand = async (): Promise<void> => {
-      try {
-        setBusy(true);
-        await toggleRaisedHand();
-        setShowReactionsMenu(false);
-      } catch (ex) {
-        setErrorText(ex instanceof Error ? ex.message : "Unknown error");
-        logger.error("Failed to raise/lower hand", ex);
-      } finally {
-        setBusy(false);
+  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 toggleHand();
-  }, [toggleRaisedHand]);
+    void raiseHand();
+  }, [
+    client,
+    isHandRaised,
+    memberships,
+    lowerHand,
+    rtcSession.room.roomId,
+    userId,
+  ]);
 
   return (
     <>
@@ -228,15 +335,14 @@ export function ReactionToggleButton({
         title={t("action.pick_reaction")}
         hideHeader
         classNameModal={styles.reactionPopupMenuModal}
-        className={styles.reactionPopupMenuRoot}
         onDismiss={() => setShowReactionsMenu(false)}
       >
         <ReactionPopupMenu
           errorText={errorText}
           isHandRaised={isHandRaised}
-          canReact={!busy && canReact}
+          canReact={canReact}
           sendReaction={(reaction) => void sendRelation(reaction)}
-          toggleRaisedHand={wrappedToggleRaisedHand}
+          toggleRaisedHand={toggleRaisedHand}
         />
       </Modal>
     </>

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

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Can close reaction dialog 1`] = `
+exports[`Can close search 1`] = `
 <div
   aria-hidden="true"
   data-aria-hidden="true"
@@ -9,7 +9,8 @@ exports[`Can close reaction dialog 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby=":r9l:"
+    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"
@@ -25,27 +26,26 @@ exports[`Can close reaction dialog 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.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"
-        fill-rule="evenodd"
+        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 fully expand emoji picker 1`] = `
-<div
-  aria-hidden="true"
-  data-aria-hidden="true"
->
+exports[`Can close search with the escape key 1`] = `
+<div>
   <button
     aria-disabled="false"
-    aria-expanded="true"
+    aria-expanded="false"
     aria-haspopup="true"
-    aria-labelledby=":r6c:"
+    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="primary"
+    data-kind="secondary"
     data-size="lg"
     role="button"
     tabindex="0"
@@ -59,9 +59,10 @@ exports[`Can fully expand emoji picker 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.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"
-        fill-rule="evenodd"
+        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>
@@ -74,7 +75,8 @@ exports[`Can lower hand 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="true"
-    aria-labelledby=":r36:"
+    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"
@@ -106,6 +108,7 @@ exports[`Can open menu 1`] = `
     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"
@@ -122,9 +125,10 @@ exports[`Can open menu 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.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"
-        fill-rule="evenodd"
+        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>
@@ -137,7 +141,8 @@ exports[`Can raise hand 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="true"
-    aria-labelledby=":r1j:"
+    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"
@@ -153,9 +158,82 @@ exports[`Can raise hand 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.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"
-        fill-rule="evenodd"
+        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>

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-es";
+import { merge } from "lodash";
 
 import { getUrlParams } from "../UrlParams";
 import {
@@ -28,11 +28,11 @@ export class Config {
       const internalInstance = new Config();
       Config.internalInstance = internalInstance;
 
-      Config.internalInstance.initPromise = downloadConfig("/config.json").then(
-        (config) => {
-          internalInstance.config = merge({}, DEFAULT_CONFIG, config);
-        },
-      );
+      Config.internalInstance.initPromise = downloadConfig(
+        "../config.json",
+      ).then((config) => {
+        internalInstance.config = merge({}, DEFAULT_CONFIG, config);
+      });
     }
     return Config.internalInstance.initPromise;
   }
@@ -74,7 +74,11 @@ async function downloadConfig(
   configJsonFilename: string,
 ): Promise<ConfigOptions> {
   const url = new URL(configJsonFilename, window.location.href);
-  const res = await fetch(url);
+  url.searchParams.set("cachebuster", Date.now().toString());
+  const res = await fetch(url, {
+    cache: "no-cache",
+    method: "GET",
+  });
 
   if (!res.ok || res.status === 404 || res.status === 0) {
     // Lack of a config isn't an error, we should just use the defaults.

src/index.css

@@ -5,14 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-@layer normalize, compound-legacy, compound;
+/* 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). */
 
-@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");
+@layer normalize, compound-legacy, compound;
 
 @import url("normalize.css/normalize.css") layer(normalize);
 @import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css")
@@ -53,6 +52,94 @@ 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));
@@ -98,6 +185,10 @@ 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", async () => {
+test("initBeforeReact sets font family from URL param", () => {
   window.location.hash = "#?font=DejaVu Sans";
-  await Initializer.initBeforeReact();
+  Initializer.initBeforeReact();
   expect(
     getComputedStyle(document.documentElement).getPropertyValue(
       "--font-family",
@@ -19,9 +19,9 @@ test("initBeforeReact sets font family from URL param", async () => {
   ).toBe('"DejaVu Sans"');
 });
 
-test("initBeforeReact sets font scale from URL param", async () => {
+test("initBeforeReact sets font scale from URL param", () => {
   window.location.hash = "#?fontScale=1.2";
-  await Initializer.initBeforeReact();
+  Initializer.initBeforeReact();
   expect(
     getComputedStyle(document.documentElement).getPropertyValue("--font-scale"),
   ).toBe("1.2");

src/initializer.tsx

@@ -5,85 +5,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import i18n, {
-  type BackendModule,
-  type ReadCallback,
-  type ResourceKey,
-} from "i18next";
+import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 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";
 import { ElementCallOpenTelemetry } from "./otel/otel";
 import { platform } from "./Platform";
 
-// This generates a map of locale names to their URL (based on import.meta.url), which looks like this:
-// {
-//   "../locales/en-GB/app.json": "/whatever/assets/root/locales/en-aabbcc.json",
-//   ...
-// }
-const locales = import.meta.glob<string>("../locales/*/*.json", {
-  query: "?url",
-  import: "default",
-  eager: true,
-});
-
-const getLocaleUrl = (
-  language: string,
-  namespace: string,
-): string | undefined => locales[`../locales/${language}/${namespace}.json`];
-
-const supportedLngs = [
-  ...new Set(
-    Object.keys(locales).map((url) => {
-      // The URLs are of the form ../locales/en-GB/app.json
-      // This extracts the language code from the URL
-      const lang = url.match(/\/([^/]+)\/[^/]+\.json$/)?.[1];
-      if (!lang) {
-        throw new Error(`Could not parse locale URL ${url}`);
-      }
-      return lang;
-    }),
-  ),
-];
-
-// A backend that fetches the locale files from the URLs generated by the glob above
-const Backend = {
-  type: "backend",
-  init(): void {},
-  read(language: string, namespace: string, callback: ReadCallback): void {
-    (async (): Promise<ResourceKey> => {
-      const url = getLocaleUrl(language, namespace);
-      if (!url) {
-        throw new Error(
-          `Namespace ${namespace} for locale ${language} not found`,
-        );
-      }
-
-      const response = await fetch(url, {
-        credentials: "omit",
-        headers: {
-          Accept: "application/json",
-        },
-      });
-
-      if (!response.ok) {
-        throw Error(`Failed to fetch ${url}`);
-      }
-
-      return await response.json();
-    })().then(
-      (data) => callback(null, data),
-      (error) => callback(error, null),
-    );
-  },
-} satisfies BackendModule;
-
 enum LoadState {
   None,
   Loading,
@@ -108,17 +41,10 @@ export class Initializer {
     return Initializer.internalInstance?.isInitialized;
   }
 
-  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);
+  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
 
     //i18n
     const languageDetector = new LanguageDetector();
@@ -128,7 +54,7 @@ export class Initializer {
       lookup: () => getUrlParams().lang ?? undefined,
     });
 
-    await i18n
+    i18n
       .use(Backend)
       .use(languageDetector)
       .use(initReactI18next)
@@ -139,7 +65,6 @@ export class Initializer {
         nsSeparator: false,
         pluralSeparator: "_",
         contextSeparator: "|",
-        supportedLngs,
         interpolation: {
           escapeValue: false, // React has built-in XSS protections
         },
@@ -149,6 +74,9 @@ export class Initializer {
           order: ["urlFragment", "navigator"],
           caches: [],
         },
+      })
+      .catch((e) => {
+        logger.error("Failed to initialize i18n", e);
       });
 
     // Custom Themeing

src/main.tsx

@@ -20,6 +20,8 @@ import {
   setLogExtension as setLKLogExtension,
   setLogLevel as setLKLogLevel,
 } from "livekit-client";
+import "@formatjs/intl-segmenter/polyfill";
+import "@formatjs/intl-durationformat/polyfill";
 
 import { App } from "./App";
 import { init as initRageshake } from "./settings/rageshake";
@@ -55,17 +57,12 @@ if (fatalError !== null) {
   throw fatalError; // Stop the app early
 }
 
-Initializer.initBeforeReact()
-  .then(() => {
-    const history = createBrowserHistory();
+Initializer.initBeforeReact();
 
-    root.render(
-      <StrictMode>
-        <App history={history} />
-      </StrictMode>,
-    );
-  })
-  .catch((e) => {
-    logger.error("Failed to initialize app", e);
-    root.render(e.message);
-  });
+const history = createBrowserHistory();
+
+root.render(
+  <StrictMode>
+    <App history={history} />
+  </StrictMode>,
+);

src/reactions/RaisedHandIndicator.tsx

@@ -11,12 +11,19 @@ import {
   useCallback,
   useEffect,
   useState,
-  useMemo,
 } from "react";
+import { DurationFormat } from "@formatjs/intl-durationformat";
 import { useTranslation } from "react-i18next";
 
 import { ReactionIndicator } from "./ReactionIndicator";
 
+const durationFormatter = new DurationFormat(undefined, {
+  minutesDisplay: "always",
+  secondsDisplay: "always",
+  hoursDisplay: "auto",
+  style: "digital",
+});
+
 export function RaisedHandIndicator({
   raisedHandTime,
   miniature,
@@ -31,17 +38,6 @@ export function RaisedHandIndicator({
   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) {
@@ -73,7 +69,7 @@ export function RaisedHandIndicator({
     calculateTime();
     const to = setInterval(calculateTime, 1000);
     return (): void => clearInterval(to);
-  }, [setRaisedHandDuration, raisedHandTime, showTimer, durationFormatter]);
+  }, [setRaisedHandDuration, raisedHandTime, showTimer]);
 
   if (!raisedHandTime) {
     return;

src/reactions/ReactionIndicator.module.css

@@ -1,25 +1,19 @@
 .reactionIndicatorWidget {
   display: flex;
-  /* background-color: var(--cpd-color-bg-subtle-primary); */
+  background-color: var(--cpd-color-bg-subtle-primary);
   border-radius: var(--cpd-radius-pill-effect);
-  box-shadow: 0 0 var(--cpd-space-2x) #00000040;
-  background: "ffffff40";
-  backdrop-filter: blur(10px);
-  outline: var(--cpd-border-width-1) solid var(--cpd-color-alpha-gray-400);
-  outline-offset: calc(-1 * var(--cpd-border-width-1));
+  color: var(--cpd-color-icon-secondary);
 }
 
 .reactionIndicatorWidget > p {
   padding: none;
   margin-top: auto;
   margin-bottom: auto;
-  width: 3em;
+  width: 4em;
 }
 
 .reactionIndicatorWidgetLarge > p {
   padding: var(--cpd-space-2x);
-  padding-right: var(--cpd-space-4x);
-  padding-left: 0;
 }
 
 .reactionLarge {
@@ -31,13 +25,13 @@
 .reaction {
   margin: var(--cpd-space-1x);
   color: var(--cpd-color-icon-secondary);
-  /* background-color: var(--cpd-color-icon-secondary); */
+  background-color: var(--cpd-color-icon-secondary);
   display: flex;
   align-items: center;
   border-radius: var(--cpd-radius-pill-effect);
   user-select: none;
   overflow: hidden;
-  /* box-shadow: var(--small-drop-shadow); */
+  box-shadow: var(--small-drop-shadow);
   box-sizing: border-box;
   max-inline-size: 100%;
   max-width: fit-content;

src/reactions/index.ts

@@ -73,9 +73,7 @@ export const GenericReaction: ReactionOption = {
   },
 };
 
-export const ReactionsRowSize = 5;
-
-// The first {ReactionsRowSize} reactions are always visible.
+// The first 6 reactions are always visible.
 export const ReactionSet: ReactionOption[] = [
   {
     emoji: "👍",

src/room/GroupCallLoader.tsx

@@ -0,0 +1,77 @@
+/*
+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,37 +177,29 @@ export const GroupCallView: FC<Props> = ({
       }
     };
 
-    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);
-      }
+    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);
+      });
     }
   }, [rtcSession, preload, skipLobby, perParticipantE2EE]);
 

src/room/InCallView.tsx

@@ -183,8 +183,7 @@ export const InCallView: FC<InCallViewProps> = ({
   onShareClick,
 }) => {
   const [soundEffectVolume] = useSetting(soundEffectVolumeSetting);
-  const { supportsReactions, raisedHands, sendReaction, toggleRaisedHand } =
-    useReactions();
+  const { supportsReactions, raisedHands } = useReactions();
   const raisedHandCount = useMemo(
     () => Object.keys(raisedHands).length,
     [raisedHands],
@@ -228,8 +227,6 @@ export const InCallView: FC<InCallViewProps> = ({
     toggleMicrophone,
     toggleCamera,
     (muted) => muteStates.audio.setEnabled?.(!muted),
-    (reaction) => void sendReaction(reaction),
-    () => void toggleRaisedHand(),
   );
 
   const windowMode = useObservableEagerState(vm.windowMode);
@@ -575,7 +572,8 @@ export const InCallView: FC<InCallViewProps> = ({
       <ReactionToggleButton
         key="raise_hand"
         className={styles.raiseHand}
-        userId={client.getUserId()!}
+        client={client}
+        rtcSession={rtcSession}
         onTouchEnd={onControlsTouchEnd}
       />,
     );

src/room/RoomPage.tsx

@@ -5,16 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useEffect, useState, ReactNode, useRef } from "react";
+import { FC, useEffect, useState, useCallback, ReactNode } 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, FullScreenView, LoadingView } from "../FullScreenView";
+import { ErrorView, 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";
@@ -22,14 +21,13 @@ import { HomePage } from "../home/HomePage";
 import { platform } from "../Platform";
 import { AppSelectionModal } from "./AppSelectionModal";
 import { widget } from "../widget";
-import { CallTerminatedMessage, useLoadGroupCall } from "./useLoadGroupCall";
+import { GroupCallStatus } 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 {
@@ -55,7 +53,6 @@ export const RoomPage: FC = () => {
     useClientLegacy();
   const { avatarUrl, displayName: userDisplayName } = useProfile(client);
 
-  const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
   const muteStates = useMuteStates();
 
   useEffect(() => {
@@ -85,112 +82,82 @@ export const RoomPage: FC = () => {
     if (optInAnalytics === null && setOptInAnalytics) setOptInAnalytics(true);
   }, [optInAnalytics, setOptInAnalytics]);
 
-  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 />
-            </>
-          );
-        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}
-          />
-        );
-      }
-      case "loading":
-        return (
-          <FullScreenView>
-            <h1>{t("common.loading")}</h1>
-          </FullScreenView>
-        );
-      case "failed":
-        wasInWaitForInviteState.current = false;
-        if ((groupCallState.error as MatrixError).errcode === "M_NOT_FOUND") {
+  const groupCallView = useCallback(
+    (groupCallState: GroupCallStatus): JSX.Element => {
+      switch (groupCallState.kind) {
+        case "loaded":
           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>
+            <GroupCallView
+              client={client!}
+              rtcSession={groupCallState.rtcSession}
+              isPasswordlessUser={passwordlessUser}
+              confineToRoom={confineToRoom}
+              preload={preload}
+              skipLobby={skipLobby}
+              hideHeader={hideHeader}
+              muteStates={muteStates}
+            />
           );
-        } else if (groupCallState.error instanceof CallTerminatedMessage) {
+        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 (
-            <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>
+            <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}
+            />
           );
-        } else {
-          return <ErrorView error={groupCallState.error} />;
         }
-      default:
-        return <> </>;
-    }
-  };
+        default:
+          return <> </>;
+      }
+    },
+    [
+      client,
+      passwordlessUser,
+      confineToRoom,
+      preload,
+      skipLobby,
+      hideHeader,
+      muteStates,
+      t,
+      userDisplayName,
+      avatarUrl,
+    ],
+  );
 
   let content: ReactNode;
   if (loading || isRegistering) {
@@ -203,7 +170,15 @@ export const RoomPage: FC = () => {
     // TODO: This doesn't belong here, the app routes need to be reworked
     content = <HomePage />;
   } else {
-    content = groupCallView();
+    content = (
+      <GroupCallLoader
+        client={client}
+        roomIdOrAlias={roomIdOrAlias}
+        viaServers={viaServers}
+      >
+        {groupCallView}
+      </GroupCallLoader>
+    );
   }
 
   return (

src/room/useLoadGroupCall.ts

@@ -117,8 +117,8 @@ export class CallTerminatedMessage extends Error {
 }
 
 export const useLoadGroupCall = (
-  client: MatrixClient | undefined,
-  roomIdOrAlias: string | null,
+  client: MatrixClient,
+  roomIdOrAlias: string,
   viaServers: string[],
 ): GroupCallStatus => {
   const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
@@ -159,9 +159,6 @@ 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/settings/ProfileSettingsTab.module.css

@@ -8,8 +8,7 @@ Please see LICENSE in the repository root for full details.
 .content {
   width: 100%;
   max-width: 350px;
-  margin-left: auto;
-  margin-right: auto;
+  align-self: center;
 }
 
 .avatarFieldRow {

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-es";
+import { throttle } from "lodash";
 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

@@ -102,7 +102,7 @@ export const playReactionsSound = new Setting<boolean>(
 
 export const soundEffectVolumeSetting = new Setting<number>(
   "sound-effect-volume",
-  0.5,
+  1,
 );
 
 export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);

src/settings/submit-rageshake.ts

@@ -6,6 +6,9 @@ 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,
@@ -20,14 +23,11 @@ import { Config } from "../config/Config";
 import { ElementCallOpenTelemetry } from "../otel/otel";
 import { RageshakeRequestModal } from "../room/RageshakeRequestModal";
 
-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");
-
+const gzip = (text: string): Blob => {
   // encode as UTF-8
   const buf = new TextEncoder().encode(text);
   // compress
-  return new Blob([pakoGzip(buf)]);
+  return new Blob([pako.gzip(buf)]);
 };
 
 /**
@@ -253,14 +253,12 @@ export function useSubmitRageshake(): {
           const logs = await getLogsForReport();
 
           for (const entry of logs) {
-            body.append("compressed-log", await gzip(entry.lines), entry.id);
+            body.append("compressed-log", gzip(entry.lines), entry.id);
           }
 
           body.append(
             "file",
-            await gzip(
-              ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump(),
-            ),
+            gzip(ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump()),
             "traces.json.gz",
           );
         }

src/state/CallViewModel.test.ts

@@ -23,7 +23,7 @@ import {
   RemoteParticipant,
 } from "livekit-client";
 import * as ComponentsCore from "@livekit/components-core";
-import { isEqual } from "lodash-es";
+import { isEqual } from "lodash";
 
 import { CallViewModel, Layout } from "./CallViewModel";
 import {
@@ -231,33 +231,30 @@ function withCallViewModel(
 test("participants are retained during a focus switch", () => {
   withTestScheduler(({ cold, expectObservable }) => {
     // Participants disappear on frame 2 and come back on frame 3
-    const participantInputMarbles = "a-ba";
+    const participantMarbles = "a-ba";
     // Start switching focus on frame 1 and reconnect on frame 3
-    const connectionInputMarbles = " cs-c";
+    const connectionMarbles = " cs-c";
     // The visible participants should remain the same throughout the switch
-    const expectedLayoutMarbles = "  a";
+    const layoutMarbles = "     a";
 
     withCallViewModel(
-      cold(participantInputMarbles, {
+      cold(participantMarbles, {
         a: [aliceParticipant, bobParticipant],
         b: [],
       }),
-      cold(connectionInputMarbles, {
+      cold(connectionMarbles, {
         c: ConnectionState.Connected,
         s: ECAddonConnectionState.ECSwitchingFocus,
       }),
       new Map(),
       (vm) => {
-        expectObservable(summarizeLayout(vm.layout)).toBe(
-          expectedLayoutMarbles,
-          {
-            a: {
-              type: "grid",
-              spotlight: undefined,
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-            },
+        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
+          a: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
           },
-        );
+        });
       },
     );
   });
@@ -267,17 +264,17 @@ test("screen sharing activates spotlight layout", () => {
   withTestScheduler(({ cold, schedule, expectObservable }) => {
     // Start with no screen shares, then have Alice and Bob share their screens,
     // then return to no screen shares, then have just Alice share for a bit
-    const participantInputMarbles = "    abcda-ba";
+    const participantMarbles = " abcda-ba";
     // While there are no screen shares, switch to spotlight manually, and then
     // switch back to grid at the end
-    const modeInputMarbles = "           -----s--g";
+    const modeMarbles = "        -----s--g";
     // We should automatically enter spotlight for the first round of screen
     // sharing, then return to grid, then manually go into spotlight, and
     // remain in spotlight until we manually go back to grid
-    const expectedLayoutMarbles = "      abcdaefeg";
-    const expectedShowSpeakingMarbles = "y----nyny";
+    const layoutMarbles = "      abcdaefeg";
+    const showSpeakingMarbles = "y----nyny";
     withCallViewModel(
-      cold(participantInputMarbles, {
+      cold(participantMarbles, {
         a: [aliceParticipant, bobParticipant],
         b: [aliceSharingScreen, bobParticipant],
         c: [aliceSharingScreen, bobSharingScreen],
@@ -286,61 +283,52 @@ test("screen sharing activates spotlight layout", () => {
       of(ConnectionState.Connected),
       new Map(),
       (vm) => {
-        schedule(modeInputMarbles, {
+        schedule(modeMarbles, {
           s: () => vm.setGridMode("spotlight"),
           g: () => vm.setGridMode("grid"),
         });
 
-        expectObservable(summarizeLayout(vm.layout)).toBe(
-          expectedLayoutMarbles,
-          {
-            a: {
-              type: "grid",
-              spotlight: undefined,
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-            },
-            b: {
-              type: "spotlight-landscape",
-              spotlight: [`${aliceId}:0:screen-share`],
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-            },
-            c: {
-              type: "spotlight-landscape",
-              spotlight: [
-                `${aliceId}:0:screen-share`,
-                `${bobId}:0:screen-share`,
-              ],
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-            },
-            d: {
-              type: "spotlight-landscape",
-              spotlight: [`${bobId}:0:screen-share`],
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-            },
-            e: {
-              type: "spotlight-landscape",
-              spotlight: [`${aliceId}:0`],
-              grid: ["local:0", `${bobId}:0`],
-            },
-            f: {
-              type: "spotlight-landscape",
-              spotlight: [`${aliceId}:0:screen-share`],
-              grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
-            },
-            g: {
-              type: "grid",
-              spotlight: undefined,
-              grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
-            },
+        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
+          a: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
           },
-        );
-        expectObservable(vm.showSpeakingIndicators).toBe(
-          expectedShowSpeakingMarbles,
-          {
-            y: true,
-            n: false,
+          b: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0:screen-share`],
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
           },
-        );
+          c: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0:screen-share`, `${bobId}:0:screen-share`],
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+          },
+          d: {
+            type: "spotlight-landscape",
+            spotlight: [`${bobId}:0:screen-share`],
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+          },
+          e: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0`],
+            grid: ["local:0", `${bobId}:0`],
+          },
+          f: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0:screen-share`],
+            grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
+          },
+          g: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
+          },
+        });
+        expectObservable(vm.showSpeakingIndicators).toBe(showSpeakingMarbles, {
+          y: true,
+          n: false,
+        });
       },
     );
   });
@@ -348,27 +336,27 @@ test("screen sharing activates spotlight layout", () => {
 
 test("participants stay in the same order unless to appear/disappear", () => {
   withTestScheduler(({ cold, schedule, expectObservable }) => {
-    const modeInputMarbles = "     a";
+    const modeMarbles = "a";
     // First Bob speaks, then Dave, then Alice
-    const aSpeakingInputMarbles = "n- 1998ms - 1999ms y";
-    const bSpeakingInputMarbles = "ny 1998ms n 1999ms ";
-    const dSpeakingInputMarbles = "n- 1998ms y 1999ms n";
+    const aSpeakingMarbles = "n- 1998ms - 1999ms y";
+    const bSpeakingMarbles = "ny 1998ms n 1999ms ";
+    const dSpeakingMarbles = "n- 1998ms y 1999ms n";
     // Nothing should change when Bob speaks, because Bob is already on screen.
     // When Dave speaks he should switch with Alice because she's the one who
     // hasn't spoken at all. Then when Alice speaks, she should return to her
     // place at the top.
-    const expectedLayoutMarbles = "a  1999ms b 1999ms a 57999ms c 1999ms a";
+    const layoutMarbles = "   a  1999ms b 1999ms a 57999ms c 1999ms a";
 
     withCallViewModel(
       of([aliceParticipant, bobParticipant, daveParticipant]),
       of(ConnectionState.Connected),
       new Map([
-        [aliceParticipant, cold(aSpeakingInputMarbles, { y: true, n: false })],
-        [bobParticipant, cold(bSpeakingInputMarbles, { y: true, n: false })],
-        [daveParticipant, cold(dSpeakingInputMarbles, { y: true, n: false })],
+        [aliceParticipant, cold(aSpeakingMarbles, { y: true, n: false })],
+        [bobParticipant, cold(bSpeakingMarbles, { y: true, n: false })],
+        [daveParticipant, cold(dSpeakingMarbles, { y: true, n: false })],
       ]),
       (vm) => {
-        schedule(modeInputMarbles, {
+        schedule(modeMarbles, {
           a: () => {
             // We imagine that only three tiles (the first three) will be visible
             // on screen at a time
@@ -381,26 +369,23 @@ test("participants stay in the same order unless to appear/disappear", () => {
           },
         });
 
-        expectObservable(summarizeLayout(vm.layout)).toBe(
-          expectedLayoutMarbles,
-          {
-            a: {
-              type: "grid",
-              spotlight: undefined,
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`, `${daveId}:0`],
-            },
-            b: {
-              type: "grid",
-              spotlight: undefined,
-              grid: ["local:0", `${daveId}:0`, `${bobId}:0`, `${aliceId}:0`],
-            },
-            c: {
-              type: "grid",
-              spotlight: undefined,
-              grid: ["local:0", `${aliceId}:0`, `${daveId}:0`, `${bobId}:0`],
-            },
+        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
+          a: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`, `${daveId}:0`],
           },
-        );
+          b: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${daveId}:0`, `${bobId}:0`, `${aliceId}:0`],
+          },
+          c: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${aliceId}:0`, `${daveId}:0`, `${bobId}:0`],
+          },
+        });
       },
     );
   });
@@ -409,53 +394,50 @@ test("participants stay in the same order unless to appear/disappear", () => {
 test("spotlight speakers swap places", () => {
   withTestScheduler(({ cold, schedule, expectObservable }) => {
     // Go immediately into spotlight mode for the test
-    const modeInputMarbles = "     s";
+    const modeMarbles = "     s";
     // First Bob speaks, then Dave, then Alice
-    const aSpeakingInputMarbles = "n--y";
-    const bSpeakingInputMarbles = "nyn";
-    const dSpeakingInputMarbles = "n-yn";
+    const aSpeakingMarbles = "n--y";
+    const bSpeakingMarbles = "nyn";
+    const dSpeakingMarbles = "n-yn";
     // Alice should start in the spotlight, then Bob, then Dave, then Alice
     // again. However, the positions of Dave and Bob in the grid should be
     // reversed by the end because they've been swapped in and out of the
     // spotlight.
-    const expectedLayoutMarbles = "abcd";
+    const layoutMarbles = "   abcd";
 
     withCallViewModel(
       of([aliceParticipant, bobParticipant, daveParticipant]),
       of(ConnectionState.Connected),
       new Map([
-        [aliceParticipant, cold(aSpeakingInputMarbles, { y: true, n: false })],
-        [bobParticipant, cold(bSpeakingInputMarbles, { y: true, n: false })],
-        [daveParticipant, cold(dSpeakingInputMarbles, { y: true, n: false })],
+        [aliceParticipant, cold(aSpeakingMarbles, { y: true, n: false })],
+        [bobParticipant, cold(bSpeakingMarbles, { y: true, n: false })],
+        [daveParticipant, cold(dSpeakingMarbles, { y: true, n: false })],
       ]),
       (vm) => {
-        schedule(modeInputMarbles, { s: () => vm.setGridMode("spotlight") });
+        schedule(modeMarbles, { s: () => vm.setGridMode("spotlight") });
 
-        expectObservable(summarizeLayout(vm.layout)).toBe(
-          expectedLayoutMarbles,
-          {
-            a: {
-              type: "spotlight-landscape",
-              spotlight: [`${aliceId}:0`],
-              grid: ["local:0", `${bobId}:0`, `${daveId}:0`],
-            },
-            b: {
-              type: "spotlight-landscape",
-              spotlight: [`${bobId}:0`],
-              grid: ["local:0", `${aliceId}:0`, `${daveId}:0`],
-            },
-            c: {
-              type: "spotlight-landscape",
-              spotlight: [`${daveId}:0`],
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-            },
-            d: {
-              type: "spotlight-landscape",
-              spotlight: [`${aliceId}:0`],
-              grid: ["local:0", `${daveId}:0`, `${bobId}:0`],
-            },
+        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
+          a: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0`],
+            grid: ["local:0", `${bobId}:0`, `${daveId}:0`],
           },
-        );
+          b: {
+            type: "spotlight-landscape",
+            spotlight: [`${bobId}:0`],
+            grid: ["local:0", `${aliceId}:0`, `${daveId}:0`],
+          },
+          c: {
+            type: "spotlight-landscape",
+            spotlight: [`${daveId}:0`],
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+          },
+          d: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0`],
+            grid: ["local:0", `${daveId}:0`, `${bobId}:0`],
+          },
+        });
       },
     );
   });
@@ -464,34 +446,31 @@ test("spotlight speakers swap places", () => {
 test("layout enters picture-in-picture mode when requested", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     // Enable then disable picture-in-picture
-    const pipControlInputMarbles = "-ed";
+    const pipControlMarbles = "-ed";
     // Should go into picture-in-picture layout then back to grid
-    const expectedLayoutMarbles = " aba";
+    const layoutMarbles = "    aba";
 
     withCallViewModel(
       of([aliceParticipant, bobParticipant]),
       of(ConnectionState.Connected),
       new Map(),
       (vm) => {
-        schedule(pipControlInputMarbles, {
+        schedule(pipControlMarbles, {
           e: () => window.controls.enablePip(),
           d: () => window.controls.disablePip(),
         });
 
-        expectObservable(summarizeLayout(vm.layout)).toBe(
-          expectedLayoutMarbles,
-          {
-            a: {
-              type: "grid",
-              spotlight: undefined,
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-            },
-            b: {
-              type: "pip",
-              spotlight: [`${aliceId}:0`],
-            },
+        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
+          a: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
           },
-        );
+          b: {
+            type: "pip",
+            spotlight: [`${aliceId}:0`],
+          },
+        });
       },
     );
   });
@@ -501,23 +480,23 @@ test("spotlight remembers whether it's expanded", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     // Start in spotlight mode, then switch to grid and back to spotlight a
     // couple times
-    const modeInputMarbles = "     s-gs-gs";
+    const modeMarbles = "  s-gs-gs";
     // Expand and collapse the spotlight
-    const expandInputMarbles = "   -a--a";
+    const expandMarbles = "-a--a";
     // Spotlight should stay expanded during the first mode switch, and stay
     // collapsed during the second mode switch
-    const expectedLayoutMarbles = "abcbada";
+    const layoutMarbles = "abcbada";
 
     withCallViewModel(
       of([aliceParticipant, bobParticipant]),
       of(ConnectionState.Connected),
       new Map(),
       (vm) => {
-        schedule(modeInputMarbles, {
+        schedule(modeMarbles, {
           s: () => vm.setGridMode("spotlight"),
           g: () => vm.setGridMode("grid"),
         });
-        schedule(expandInputMarbles, {
+        schedule(expandMarbles, {
           a: () => {
             let toggle: () => void;
             vm.toggleSpotlightExpanded.subscribe((val) => (toggle = val!));
@@ -525,31 +504,28 @@ test("spotlight remembers whether it's expanded", () => {
           },
         });
 
-        expectObservable(summarizeLayout(vm.layout)).toBe(
-          expectedLayoutMarbles,
-          {
-            a: {
-              type: "spotlight-landscape",
-              spotlight: [`${aliceId}:0`],
-              grid: ["local:0", `${bobId}:0`],
-            },
-            b: {
-              type: "spotlight-expanded",
-              spotlight: [`${aliceId}:0`],
-              pip: "local:0",
-            },
-            c: {
-              type: "grid",
-              spotlight: undefined,
-              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-            },
-            d: {
-              type: "grid",
-              spotlight: undefined,
-              grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
-            },
+        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
+          a: {
+            type: "spotlight-landscape",
+            spotlight: [`${aliceId}:0`],
+            grid: ["local:0", `${bobId}:0`],
           },
-        );
+          b: {
+            type: "spotlight-expanded",
+            spotlight: [`${aliceId}:0`],
+            pip: "local:0",
+          },
+          c: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+          },
+          d: {
+            type: "grid",
+            spotlight: undefined,
+            grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
+          },
+        });
       },
     );
   });

src/state/CallViewModel.ts

@@ -260,6 +260,7 @@ class UserMedia {
         ),
       ),
       startWith(false),
+      distinctUntilChanged(),
       // Make this Observable hot so that the timers don't reset when you
       // resubscribe
       this.scope.state(),
@@ -671,7 +672,7 @@ export class CallViewModel extends ViewModel {
     this.gridModeUserSelection.next(value);
   }
 
-  private readonly gridLayoutMedia: Observable<GridLayoutMedia> = combineLatest(
+  private readonly gridLayout: Observable<LayoutMedia> = combineLatest(
     [this.grid, this.spotlight],
     (grid, spotlight) => ({
       type: "grid",
@@ -682,28 +683,28 @@ export class CallViewModel extends ViewModel {
     }),
   );
 
-  private readonly spotlightLandscapeLayoutMedia: Observable<SpotlightLandscapeLayoutMedia> =
+  private readonly spotlightLandscapeLayout: Observable<LayoutMedia> =
     combineLatest([this.grid, this.spotlight], (grid, spotlight) => ({
       type: "spotlight-landscape",
       spotlight,
       grid,
     }));
 
-  private readonly spotlightPortraitLayoutMedia: Observable<SpotlightPortraitLayoutMedia> =
+  private readonly spotlightPortraitLayout: Observable<LayoutMedia> =
     combineLatest([this.grid, this.spotlight], (grid, spotlight) => ({
       type: "spotlight-portrait",
       spotlight,
       grid,
     }));
 
-  private readonly spotlightExpandedLayoutMedia: Observable<SpotlightExpandedLayoutMedia> =
+  private readonly spotlightExpandedLayout: Observable<LayoutMedia> =
     combineLatest([this.spotlight, this.pip], (spotlight, pip) => ({
       type: "spotlight-expanded",
       spotlight,
       pip: pip ?? undefined,
     }));
 
-  private readonly oneOnOneLayoutMedia: Observable<OneOnOneLayoutMedia | null> =
+  private readonly oneOnOneLayout: Observable<LayoutMedia | null> =
     this.mediaItems.pipe(
       map((mediaItems) => {
         if (mediaItems.length !== 2) return null;
@@ -721,8 +722,9 @@ export class CallViewModel extends ViewModel {
       }),
     );
 
-  private readonly pipLayoutMedia: Observable<LayoutMedia> =
-    this.spotlight.pipe(map((spotlight) => ({ type: "pip", spotlight })));
+  private readonly pipLayout: Observable<LayoutMedia> = this.spotlight.pipe(
+    map((spotlight) => ({ type: "pip", spotlight })),
+  );
 
   /**
    * The media to be used to produce a layout.
@@ -735,24 +737,24 @@ export class CallViewModel extends ViewModel {
             switchMap((gridMode) => {
               switch (gridMode) {
                 case "grid":
-                  return this.oneOnOneLayoutMedia.pipe(
+                  return this.oneOnOneLayout.pipe(
                     switchMap((oneOnOne) =>
-                      oneOnOne === null ? this.gridLayoutMedia : of(oneOnOne),
+                      oneOnOne === null ? this.gridLayout : of(oneOnOne),
                     ),
                   );
                 case "spotlight":
                   return this.spotlightExpanded.pipe(
                     switchMap((expanded) =>
                       expanded
-                        ? this.spotlightExpandedLayoutMedia
-                        : this.spotlightLandscapeLayoutMedia,
+                        ? this.spotlightExpandedLayout
+                        : this.spotlightLandscapeLayout,
                     ),
                   );
               }
             }),
           );
         case "narrow":
-          return this.oneOnOneLayoutMedia.pipe(
+          return this.oneOnOneLayout.pipe(
             switchMap((oneOnOne) =>
               oneOnOne === null
                 ? combineLatest(
@@ -760,12 +762,12 @@ export class CallViewModel extends ViewModel {
                     (grid, spotlight) =>
                       grid.length > smallMobileCallThreshold ||
                       spotlight.some((vm) => vm instanceof ScreenShareViewModel)
-                        ? this.spotlightPortraitLayoutMedia
-                        : this.gridLayoutMedia,
+                        ? this.spotlightPortraitLayout
+                        : this.gridLayout,
                   ).pipe(switchAll())
                 : // The expanded spotlight layout makes for a better one-on-one
                   // experience in narrow windows
-                  this.spotlightExpandedLayoutMedia,
+                  this.spotlightExpandedLayout,
             ),
           );
         case "flat":
@@ -775,14 +777,14 @@ export class CallViewModel extends ViewModel {
                 case "grid":
                   // Yes, grid mode actually gets you a "spotlight" layout in
                   // this window mode.
-                  return this.spotlightLandscapeLayoutMedia;
+                  return this.spotlightLandscapeLayout;
                 case "spotlight":
-                  return this.spotlightExpandedLayoutMedia;
+                  return this.spotlightExpandedLayout;
               }
             }),
           );
         case "pip":
-          return this.pipLayoutMedia;
+          return this.pipLayout;
       }
     }),
     this.scope.state(),

src/tile/GridTile.tsx

@@ -26,7 +26,6 @@ import {
   VisibilityOnIcon,
   UserProfileIcon,
   ExpandIcon,
-  VolumeOffSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
   ContextMenu,
@@ -63,7 +62,6 @@ interface TileProps {
 interface UserMediaTileProps extends TileProps {
   vm: UserMediaViewModel;
   mirror: boolean;
-  locallyMuted: boolean;
   menuStart?: ReactNode;
   menuEnd?: ReactNode;
 }
@@ -73,7 +71,6 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
     {
       vm,
       showSpeakingIndicators,
-      locallyMuted,
       menuStart,
       menuEnd,
       className,
@@ -97,18 +94,9 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
       },
       [vm],
     );
-    const { raisedHands, toggleRaisedHand, reactions } = useReactions();
+    const { raisedHands, lowerHand, reactions } = useReactions();
 
-    const AudioIcon = locallyMuted
-      ? VolumeOffSolidIcon
-      : audioEnabled
-        ? MicOnSolidIcon
-        : MicOffSolidIcon;
-    const audioIconLabel = locallyMuted
-      ? t("video_tile.muted_for_me")
-      : audioEnabled
-        ? t("microphone_on")
-        : t("microphone_off");
+    const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;
 
     const [menuOpen, setMenuOpen] = useState(false);
     const menu = (
@@ -127,9 +115,8 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
     const handRaised: Date | undefined = raisedHands[vm.member?.userId ?? ""];
     const currentReaction: ReactionOption | undefined =
       reactions[vm.member?.userId ?? ""];
-    const raisedHandOnClick = vm.local
-      ? (): void => void toggleRaisedHand()
-      : undefined;
+    const raisedHandOnClick =
+      vm.local && handRaised ? (): void => void lowerHand() : undefined;
 
     const showSpeaking = showSpeakingIndicators && speaking;
 
@@ -147,11 +134,11 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
           [styles.handRaised]: !showSpeaking && !!handRaised,
         })}
         nameTagLeadingIcon={
-          <AudioIcon
+          <MicIcon
             width={20}
             height={20}
-            aria-label={audioIconLabel}
-            data-muted={locallyMuted || !audioEnabled}
+            aria-label={audioEnabled ? t("microphone_on") : t("microphone_off")}
+            data-muted={!audioEnabled}
             className={styles.muteIcon}
           />
         }
@@ -212,7 +199,6 @@ const LocalUserMediaTile = forwardRef<HTMLDivElement, LocalUserMediaTileProps>(
       <UserMediaTile
         ref={ref}
         vm={vm}
-        locallyMuted={false}
         mirror={mirror}
         menuStart={
           <ToggleMenuItem
@@ -269,7 +255,6 @@ const RemoteUserMediaTile = forwardRef<
     <UserMediaTile
       ref={ref}
       vm={vm}
-      locallyMuted={locallyMuted}
       mirror={false}
       menuStart={
         <>

src/tile/MediaView.tsx

@@ -102,7 +102,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
           )}
         </div>
         <div className={styles.fg}>
-          <div style={{ display: "flex", gap: "var(--cpd-space-1x)" }}>
+          <div style={{ display: "flex" }}>
             <RaisedHandIndicator
               raisedHandTime={raisedHandTime}
               miniature={avatarSize < 96}

src/useCallViewKeyboardShortcuts.test.tsx

@@ -12,24 +12,19 @@ import { Button } from "@vector-im/compound-web";
 import userEvent from "@testing-library/user-event";
 
 import { useCallViewKeyboardShortcuts } from "../src/useCallViewKeyboardShortcuts";
-import { ReactionOption, ReactionSet, ReactionsRowSize } from "./reactions";
 
 // Test Explanation:
 // - The main objective is to test `useCallViewKeyboardShortcuts`.
 //   The TestComponent just wraps a button around that hook.
 
 interface TestComponentProps {
-  setMicrophoneMuted?: (muted: boolean) => void;
+  setMicrophoneMuted: (muted: boolean) => void;
   onButtonClick?: () => void;
-  sendReaction?: () => void;
-  toggleHandRaised?: () => void;
 }
 
 const TestComponent: FC<TestComponentProps> = ({
-  setMicrophoneMuted = (): void => {},
+  setMicrophoneMuted,
   onButtonClick = (): void => {},
-  sendReaction = (reaction: ReactionOption): void => {},
-  toggleHandRaised = (): void => {},
 }) => {
   const ref = useRef<HTMLDivElement | null>(null);
   useCallViewKeyboardShortcuts(
@@ -37,8 +32,6 @@ const TestComponent: FC<TestComponentProps> = ({
     () => {},
     () => {},
     setMicrophoneMuted,
-    sendReaction,
-    toggleHandRaised,
   );
   return (
     <div ref={ref}>
@@ -81,28 +74,6 @@ test("spacebar prioritizes pressing a button", async () => {
   expect(onClick).toBeCalled();
 });
 
-test("reactions can be sent via keyboard presses", async () => {
-  const user = userEvent.setup();
-
-  const sendReaction = vi.fn();
-  render(<TestComponent sendReaction={sendReaction} />);
-
-  for (let index = 1; index <= ReactionsRowSize; index++) {
-    await user.keyboard(index.toString());
-    expect(sendReaction).toHaveBeenNthCalledWith(index, ReactionSet[index - 1]);
-  }
-});
-
-test("raised hand can be sent via keyboard presses", async () => {
-  const user = userEvent.setup();
-
-  const toggleHandRaised = vi.fn();
-  render(<TestComponent toggleHandRaised={toggleHandRaised} />);
-  await user.keyboard("h");
-
-  expect(toggleHandRaised).toHaveBeenCalledOnce();
-});
-
 test("unmuting happens in place of the default action", async () => {
   const user = userEvent.setup();
   const defaultPrevented = vi.fn();

src/useCallViewKeyboardShortcuts.ts

@@ -8,7 +8,6 @@ Please see LICENSE in the repository root for full details.
 import { RefObject, useCallback, useMemo, useRef } from "react";
 
 import { useEventTarget } from "./useEvents";
-import { ReactionOption, ReactionSet, ReactionsRowSize } from "./reactions";
 
 /**
  * Determines whether focus is in the same part of the tree as the given
@@ -19,17 +18,11 @@ const mayReceiveKeyEvents = (e: HTMLElement): boolean => {
   return focusedElement !== null && focusedElement.contains(e);
 };
 
-const KeyToReactionMap: Record<string, ReactionOption> = Object.fromEntries(
-  ReactionSet.slice(0, ReactionsRowSize).map((r, i) => [(i + 1).toString(), r]),
-);
-
 export function useCallViewKeyboardShortcuts(
   focusElement: RefObject<HTMLElement | null>,
   toggleMicrophoneMuted: () => void,
   toggleLocalVideoMuted: () => void,
   setMicrophoneMuted: (muted: boolean) => void,
-  sendReaction: (reaction: ReactionOption) => void,
-  toggleHandRaised: () => void,
 ): void {
   const spacebarHeld = useRef(false);
 
@@ -56,12 +49,6 @@ export function useCallViewKeyboardShortcuts(
             spacebarHeld.current = true;
             setMicrophoneMuted(false);
           }
-        } else if (event.key === "h") {
-          event.preventDefault();
-          toggleHandRaised();
-        } else if (KeyToReactionMap[event.key]) {
-          event.preventDefault();
-          sendReaction(KeyToReactionMap[event.key]);
         }
       },
       [
@@ -69,8 +56,6 @@ export function useCallViewKeyboardShortcuts(
         toggleLocalVideoMuted,
         toggleMicrophoneMuted,
         setMicrophoneMuted,
-        sendReaction,
-        toggleHandRaised,
       ],
     ),
     // Because this is set on the window, to prevent shortcuts from activating

src/useReactions.tsx

@@ -40,8 +40,7 @@ interface ReactionsContextType {
   raisedHands: Record<string, Date>;
   supportsReactions: boolean;
   reactions: Record<string, ReactionOption>;
-  toggleRaisedHand: () => Promise<void>;
-  sendReaction: (reaction: ReactionOption) => Promise<void>;
+  lowerHand: () => Promise<void>;
 }
 
 const ReactionsContext = createContext<ReactionsContextType | undefined>(
@@ -105,6 +104,7 @@ export const ReactionsProvider = ({
       ),
     [raisedHands],
   );
+
   const addRaisedHand = useCallback((userId: string, info: RaisedHandInfo) => {
     setRaisedHands((prevRaisedHands) => ({
       ...prevRaisedHands,
@@ -181,11 +181,6 @@ export const ReactionsProvider = ({
   const latestMemberships = useLatest(memberships);
   const latestRaisedHands = useLatest(raisedHands);
 
-  const myMembership = useMemo(
-    () => memberships.find((m) => m.sender === myUserId)?.eventId,
-    [memberships, myUserId],
-  );
-
   // This effect handles any *live* reaction/redactions in the room.
   useEffect(() => {
     const reactionTimeouts = new Set<number>();
@@ -200,12 +195,11 @@ export const ReactionsProvider = ({
       // Skip any event without a sender or event ID.
       if (!sender || !reactionEventId) return;
 
-      room.client
-        .decryptEventIfNeeded(event)
-        .catch((e) => logger.warn(`Failed to decrypt ${event.getId()}`, e));
-      if (event.isBeingDecrypted() || event.isDecryptionFailure()) return;
-
       if (event.getType() === ElementCallReactionEventType) {
+        room.client
+          .decryptEventIfNeeded(event)
+          .catch((e) => logger.warn(`Failed to decrypt ${event.getId()}`, e));
+        if (event.isBeingDecrypted() || event.isDecryptionFailure()) return;
         const content: ECallReactionEventContent = event.getContent();
 
         const membershipEventId = content?.["m.relates_to"]?.event_id;
@@ -327,67 +321,22 @@ export const ReactionsProvider = ({
     latestRaisedHands,
   ]);
 
-  const toggleRaisedHand = useCallback(async () => {
-    if (!myUserId) {
+  const lowerHand = useCallback(async () => {
+    if (!myUserId || !raisedHands[myUserId]) {
       return;
     }
-    const myReactionId = raisedHands[myUserId]?.reactionEventId;
-
+    const myReactionId = raisedHands[myUserId].reactionEventId;
     if (!myReactionId) {
-      try {
-        if (!myMembership) {
-          throw new Error("Cannot find own membership event");
-        }
-        const reaction = await room.client.sendEvent(
-          rtcSession.room.roomId,
-          EventType.Reaction,
-          {
-            "m.relates_to": {
-              rel_type: RelationType.Annotation,
-              event_id: myMembership,
-              key: "🖐️",
-            },
-          },
-        );
-        logger.debug("Sent raise hand event", reaction.event_id);
-      } catch (ex) {
-        logger.error("Failed to send raised hand", ex);
-      }
-    } else {
-      try {
-        await room.client.redactEvent(rtcSession.room.roomId, myReactionId);
-        logger.debug("Redacted raise hand event");
-      } catch (ex) {
-        logger.error("Failed to redact reaction event", myReactionId, ex);
-        throw ex;
-      }
+      logger.warn(`Hand raised but no reaction event to redact!`);
+      return;
     }
-  }, [myMembership, myUserId, raisedHands, rtcSession, room]);
-
-  const sendReaction = useCallback(
-    async (reaction: ReactionOption) => {
-      if (!myUserId || reactions[myUserId]) {
-        // We're still reacting
-        return;
-      }
-      if (!myMembership) {
-        throw new Error("Cannot find own membership event");
-      }
-      await room.client.sendEvent(
-        rtcSession.room.roomId,
-        ElementCallReactionEventType,
-        {
-          "m.relates_to": {
-            rel_type: RelationType.Reference,
-            event_id: myMembership,
-          },
-          emoji: reaction.emoji,
-          name: reaction.name,
-        },
-      );
-    },
-    [myMembership, reactions, room, myUserId, rtcSession],
-  );
+    try {
+      await room.client.redactEvent(rtcSession.room.roomId, myReactionId);
+      logger.debug("Redacted raise hand event");
+    } catch (ex) {
+      logger.error("Failed to redact reaction event", myReactionId, ex);
+    }
+  }, [myUserId, raisedHands, rtcSession, room]);
 
   return (
     <ReactionsContext.Provider
@@ -395,8 +344,7 @@ export const ReactionsProvider = ({
         raisedHands: resultRaisedHands,
         supportsReactions,
         reactions,
-        toggleRaisedHand,
-        sendReaction,
+        lowerHand,
       }}
     >
       {children}

src/utils/spa.ts

@@ -1,64 +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 { ICreateClientOpts } from "matrix-js-sdk/src/client";
-import { MatrixError } from "matrix-js-sdk/src/http-api";
-import { logger } from "matrix-js-sdk/src/logger";
-
-import { Config } from "../config/Config";
-import { fallbackICEServerAllowed, initClient } from "./matrix";
-import type { InitResult, Session } from "../ClientContext";
-
-export async function initSPA(
-  loadSession: () => Session | undefined,
-  clearSession: () => void,
-): Promise<InitResult | null> {
-  // 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,
-      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;
-  }
-}

src/utils/test.ts

@@ -4,7 +4,7 @@ Copyright 2023, 2024 New Vector Ltd.
 SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
-import { map, Observable, of, SchedulerLike } from "rxjs";
+import { map, Observable, of } from "rxjs";
 import { RunHelpers, TestScheduler } from "rxjs/testing";
 import { expect, vi } from "vitest";
 import { RoomMember, Room as MatrixRoom } from "matrix-js-sdk/src/matrix";
@@ -39,23 +39,15 @@ export interface OurRunHelpers extends RunHelpers {
   schedule: (marbles: string, actions: Record<string, () => void>) => void;
 }
 
-interface TestRunnerGlobal {
-  rxjsTestScheduler?: SchedulerLike;
-}
-
 /**
  * Run Observables with a scheduler that virtualizes time, for testing purposes.
  */
 export function withTestScheduler(
   continuation: (helpers: OurRunHelpers) => void,
 ): void {
-  const scheduler = new TestScheduler((actual, expected) => {
+  new TestScheduler((actual, expected) => {
     expect(actual).deep.equals(expected);
-  });
-  // we set the test scheduler as a global so that you can watch it in a debugger
-  // and get the frame number. e.g. `rxjsTestScheduler?.now()`
-  (global as unknown as TestRunnerGlobal).rxjsTestScheduler = scheduler;
-  scheduler.run((helpers) =>
+  }).run((helpers) =>
     continuation({
       ...helpers,
       schedule(marbles, actions) {

src/vitest.setup.ts

@@ -6,8 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import "global-jsdom/register";
-import "@formatjs/intl-durationformat/polyfill";
-import "@formatjs/intl-segmenter/polyfill";
 import i18n from "i18next";
 import posthog from "posthog-js";
 import { initReactI18next } from "react-i18next";
@@ -16,7 +14,6 @@ import { cleanup } from "@testing-library/react";
 import "vitest-axe/extend-expect";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import EN_GB from "../locales/en-GB/app.json";
 import { Config } from "./config/Config";
 
 // Bare-minimum i18n config
@@ -25,13 +22,6 @@ i18n
   .init({
     lng: "en-GB",
     fallbackLng: "en-GB",
-    supportedLngs: ["en-GB"],
-    // We embed the translations, so that it never needs to fetch
-    resources: {
-      "en-GB": {
-        app: EN_GB,
-      },
-    },
     interpolation: {
       escapeValue: false, // React has built-in XSS protections
     },

vite.config.js

@@ -6,10 +6,8 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { defineConfig, loadEnv } from "vite";
-import { compression } from "vite-plugin-compression2";
 import svgrPlugin from "vite-plugin-svgr";
 import htmlTemplate from "vite-plugin-html-template";
-import { codecovVitePlugin } from "@codecov/vite-plugin";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import react from "@vitejs/plugin-react";
 import basicSsl from "@vitejs/plugin-basic-ssl";
@@ -33,16 +31,6 @@ export default defineConfig(({ mode }) => {
         title: env.VITE_PRODUCT_NAME || "Element Call",
       },
     }),
-
-    codecovVitePlugin({
-      enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
-      bundleName: "element-call",
-      uploadToken: process.env.CODECOV_TOKEN,
-    }),
-
-    compression({
-      exclude: [/config.json/],
-    }),
   ];
 
   if (
@@ -65,25 +53,6 @@ export default defineConfig(({ mode }) => {
     },
     build: {
       sourcemap: true,
-      rollupOptions: {
-        output: {
-          assetFileNames: ({ originalFileNames }) => {
-            if (originalFileNames) {
-              for (const name of originalFileNames) {
-                // Custom asset name for locales to include the locale code in the filename
-                const match = name.match(/locales\/([^/]+)\/(.+)\.json$/);
-                if (match) {
-                  const [, locale, filename] = match;
-                  return `assets/${locale}-${filename}-[hash].json`;
-                }
-              }
-            }
-
-            // Default naming fallback
-            return "assets/[name]-[hash][extname]";
-          },
-        },
-      },
     },
     plugins,
     resolve: {