Merge branch 'livekit' into toger5/tiles_based_on_rtc_member

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

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

src/Modal.test.tsx

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

src/Modal.tsx

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

src/__snapshots__/Modal.test.tsx.snap

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

src/button/RaisedHandToggleButton.tsx

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

src/button/ReactionToggleButton.module.css

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

src/button/ReactionToggleButton.test.tsx

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

src/button/ReactionToggleButton.tsx

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

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

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

src/button/index.ts

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

src/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";

src/reactions/RaisedHandIndicator.tsx

@@ -12,11 +12,10 @@ import {
   useEffect,
   useState,
 } from "react";
-import classNames from "classnames";
-import "@formatjs/intl-durationformat/polyfill";
 import { DurationFormat } from "@formatjs/intl-durationformat";
+import { useTranslation } from "react-i18next";
 
-import styles from "./RaisedHandIndicator.module.css";
+import { ReactionIndicator } from "./ReactionIndicator";
 
 const durationFormatter = new DurationFormat(undefined, {
   minutesDisplay: "always",
@@ -36,6 +35,7 @@ export function RaisedHandIndicator({
   showTimer?: boolean;
   onClick?: () => void;
 }): ReactNode {
+  const { t } = useTranslation();
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
 
   const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
@@ -76,29 +76,19 @@ export function RaisedHandIndicator({
   }
 
   const content = (
-    <div
-      className={classNames(styles.raisedHandWidget, {
-        [styles.raisedHandWidgetLarge]: !miniature,
-      })}
-    >
-      <div
-        className={classNames(styles.raisedHand, {
-          [styles.raisedHandLarge]: !miniature,
-        })}
-      >
-        <span role="img" aria-label="raised hand">
-          ✋
-        </span>
-      </div>
+    <ReactionIndicator emoji="✋" miniature={miniature}>
       {showTimer && <p>{raisedHandDuration}</p>}
-    </div>
+    </ReactionIndicator>
   );
 
   if (onClick) {
     return (
       <button
-        aria-label="lower raised hand"
-        className={styles.button}
+        aria-label={t("action.lower_hand")}
+        style={{
+          display: "contents",
+          background: "none",
+        }}
         onClick={clickCallback}
       >
         {content}

src/reactions/ReactionIndicator.module.css

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

src/reactions/ReactionIndicator.tsx

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

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

@@ -2,13 +2,13 @@
 
 exports[`RaisedHandIndicator > renders a smaller indicator when miniature is specified 1`] = `
 <div
-  class="raisedHandWidget"
+  class="reactionIndicatorWidget"
 >
   <div
-    class="raisedHand"
+    class="reaction"
   >
     <span
-      aria-label="raised hand"
+      aria-label="common.reaction"
       role="img"
     >
       ✋
@@ -22,13 +22,13 @@ exports[`RaisedHandIndicator > renders a smaller indicator when miniature is spe
 
 exports[`RaisedHandIndicator > renders an indicator when a hand has been raised 1`] = `
 <div
-  class="raisedHandWidget raisedHandWidgetLarge"
+  class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
 >
   <div
-    class="raisedHand raisedHandLarge"
+    class="reaction reactionLarge"
   >
     <span
-      aria-label="raised hand"
+      aria-label="common.reaction"
       role="img"
     >
       ✋
@@ -42,13 +42,13 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised
 
 exports[`RaisedHandIndicator > renders an indicator when a hand has been raised with the expected time 1`] = `
 <div
-  class="raisedHandWidget raisedHandWidgetLarge"
+  class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
 >
   <div
-    class="raisedHand raisedHandLarge"
+    class="reaction reactionLarge"
   >
     <span
-      aria-label="raised hand"
+      aria-label="common.reaction"
       role="img"
     >
       ✋

src/reactions/index.ts

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

src/room/InCallView.module.css

@@ -36,12 +36,14 @@ Please see LICENSE in the repository root for full details.
   inset-block-end: 0;
   z-index: 1;
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  grid-template-areas: "logo buttons layout";
+  grid-template-columns: minmax(0, var(--inline-content-inset)) 1fr auto 1fr minmax(
+      0,
+      var(--inline-content-inset)
+    );
+  grid-template-areas: ". logo buttons layout .";
   align-items: center;
   gap: var(--cpd-space-3x);
-  padding-block: var(--cpd-space-4x);
-  padding-inline: var(--inline-content-inset);
+  padding-block: var(--cpd-space-10x);
   background: linear-gradient(
     180deg,
     rgba(0, 0, 0, 0) 0%,
@@ -64,7 +66,6 @@ Please see LICENSE in the repository root for full details.
 .footer.overlay.hidden {
   display: grid;
   opacity: 0;
-  pointer-events: none;
 }
 
 .footer.overlay:has(:focus-visible) {
@@ -83,6 +84,7 @@ Please see LICENSE in the repository root for full details.
 
 .buttons {
   grid-area: buttons;
+  justify-self: center;
   display: flex;
   gap: var(--cpd-space-3x);
 }
@@ -92,15 +94,49 @@ Please see LICENSE in the repository root for full details.
   justify-self: end;
 }
 
-@media (min-height: 400px) {
+@media (max-width: 660px) {
   .footer {
-    padding-block: var(--cpd-space-8x);
+    grid-template-areas: ". buttons buttons buttons .";
+  }
+
+  .logo {
+    display: none;
+  }
+
+  .layout {
+    display: none !important;
   }
 }
 
-@media (min-height: 800px) {
+@media (max-width: 370px) {
+  .raiseHand {
+    display: none;
+  }
+}
+
+@media (max-width: 340px) {
+  .invite,
+  .switchCamera,
+  .shareScreen {
+    display: none;
+  }
+
+  @media (max-height: 400px) {
+    .footer {
+      display: none;
+    }
+  }
+}
+
+@media (max-height: 400px) {
   .footer {
-    padding-block: var(--cpd-space-10x);
+    padding-block: var(--cpd-space-4x);
+  }
+}
+
+@media (max-height: 800px) {
+  .footer {
+    padding-block: var(--cpd-space-8x);
   }
 }
 
@@ -144,3 +180,48 @@ Please see LICENSE in the repository root for full details.
   position: relative;
   flex-grow: 1;
 }
+
+.floatingReaction {
+  position: relative;
+  display: inline;
+  z-index: 2;
+  font-size: 32pt;
+  /* Reactions are "active" for 3 seconds (as per REACTION_ACTIVE_TIME_MS), give a bit more time for it to fade out. */
+  animation-duration: 4s;
+  animation-name: reaction-up;
+  width: fit-content;
+  pointer-events: none;
+}
+
+@keyframes reaction-up {
+  from {
+    opacity: 1;
+    translate: 100vw 0;
+    scale: 200%;
+  }
+
+  to {
+    opacity: 0;
+    translate: 100vw -100vh;
+    scale: 100%;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  @keyframes reaction-up-reduced {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  .floatingReaction {
+    font-size: 48pt;
+    animation-name: reaction-up-reduced;
+    top: calc(-50vh + (48pt / 2));
+    left: calc(50vw - (48pt / 2)) !important;
+  }
+}

src/room/InCallView.tsx

@@ -41,7 +41,7 @@ import {
   VideoButton,
   ShareScreenButton,
   SettingsButton,
-  RaiseHandToggleButton,
+  ReactionToggleButton,
   SwitchCameraButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
@@ -83,7 +83,13 @@ import { GridTileViewModel, TileViewModel } from "../state/TileViewModel";
 import { ReactionsProvider, useReactions } from "../useReactions";
 import handSoundOgg from "../sound/raise_hand.ogg?url";
 import handSoundMp3 from "../sound/raise_hand.mp3?url";
+import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { useSwitchCamera } from "./useSwitchCamera";
+import {
+  soundEffectVolumeSetting,
+  showReactions,
+  useSetting,
+} from "../settings/settings";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -174,13 +180,27 @@ export const InCallView: FC<InCallViewProps> = ({
   connState,
   onShareClick,
 }) => {
-  const { supportsReactions, raisedHands } = useReactions();
+  const [shouldShowReactions] = useSetting(showReactions);
+  const [soundEffectVolume] = useSetting(soundEffectVolumeSetting);
+  const { supportsReactions, raisedHands, reactions } = useReactions();
   const raisedHandCount = useMemo(
     () => Object.keys(raisedHands).length,
     [raisedHands],
   );
   const previousRaisedHandCount = useDeferredValue(raisedHandCount);
 
+  const reactionsIcons = useMemo(
+    () =>
+      shouldShowReactions
+        ? Object.entries(reactions).map(([sender, { emoji }]) => ({
+            sender,
+            emoji,
+            startX: -Math.ceil(Math.random() * 50) - 25,
+          }))
+        : [],
+    [shouldShowReactions, reactions],
+  );
+
   useWakeLock();
 
   useEffect(() => {
@@ -194,7 +214,6 @@ export const InCallView: FC<InCallViewProps> = ({
   const nonMemberItemCount = useObservableEagerState(vm.nonMemberItemCount);
   const containerRef1 = useRef<HTMLDivElement | null>(null);
   const [containerRef2, bounds] = useMeasure();
-  const boundsValid = bounds.height > 0;
   // Merge the refs so they can attach to the same element
   const containerRef = useMergedRefs(containerRef1, containerRef2);
 
@@ -222,10 +241,6 @@ export const InCallView: FC<InCallViewProps> = ({
     (muted) => muteStates.audio.setEnabled?.(!muted),
   );
 
-  const mobile = boundsValid && bounds.width <= 660;
-  const reducedControls = boundsValid && bounds.width <= 340;
-  const noControls = reducedControls && bounds.height <= 400;
-
   const windowMode = useObservableEagerState(vm.windowMode);
   const layout = useObservableEagerState(vm.layout);
   const gridMode = useObservableEagerState(vm.gridMode);
@@ -247,12 +262,22 @@ export const InCallView: FC<InCallViewProps> = ({
   }, [vm]);
   const onTouchCancel = useCallback(() => (touchStart.current = null), []);
 
-  // We also need to tell the layout toggle to prevent touch events from
-  // bubbling up, or else the controls will be dismissed before a change event
-  // can be registered on the toggle
-  const onLayoutToggleTouchEnd = useCallback(
-    (e: TouchEvent) => e.stopPropagation(),
-    [],
+  // We also need to tell the footer controls to prevent touch events from
+  // bubbling up, or else the footer will be dismissed before a click/change
+  // event can be registered on the control
+  const onControlsTouchEnd = useCallback(
+    (e: TouchEvent) => {
+      // Somehow applying pointer-events: none to the controls when the footer
+      // is hidden is not enough to stop clicks from happening as the footer
+      // becomes visible, so we check manually whether the footer is shown
+      if (showFooter) {
+        e.stopPropagation();
+        vm.tapControls();
+      } else {
+        e.preventDefault();
+      }
+    },
+    [vm, showFooter],
   );
 
   const onPointerMove = useCallback(
@@ -330,11 +355,17 @@ export const InCallView: FC<InCallViewProps> = ({
       return;
     }
     if (previousRaisedHandCount < raisedHandCount) {
+      handRaisePlayer.current.volume = soundEffectVolume;
       handRaisePlayer.current.play().catch((ex) => {
         logger.warn("Failed to play raise hand sound", ex);
       });
     }
-  }, [raisedHandCount, handRaisePlayer, previousRaisedHandCount]);
+  }, [
+    raisedHandCount,
+    handRaisePlayer,
+    previousRaisedHandCount,
+    soundEffectVolume,
+  ]);
 
   useEffect(() => {
     widget?.api.transport
@@ -507,95 +538,106 @@ export const InCallView: FC<InCallViewProps> = ({
       .catch(logger.error);
   }, [localParticipant, isScreenShareEnabled]);
 
-  let footer: JSX.Element | null;
-
-  if (noControls) {
-    footer = null;
-  } else {
-    const buttons: JSX.Element[] = [];
+  const buttons: JSX.Element[] = [];
 
+  buttons.push(
+    <MicButton
+      key="audio"
+      muted={!muteStates.audio.enabled}
+      onClick={toggleMicrophone}
+      onTouchEnd={onControlsTouchEnd}
+      disabled={muteStates.audio.setEnabled === null}
+      data-testid="incall_mute"
+    />,
+    <VideoButton
+      key="video"
+      muted={!muteStates.video.enabled}
+      onClick={toggleCamera}
+      onTouchEnd={onControlsTouchEnd}
+      disabled={muteStates.video.setEnabled === null}
+      data-testid="incall_videomute"
+    />,
+  );
+  if (switchCamera !== null)
     buttons.push(
-      <MicButton
-        key="audio"
-        muted={!muteStates.audio.enabled}
-        onClick={toggleMicrophone}
-        disabled={muteStates.audio.setEnabled === null}
-        data-testid="incall_mute"
-      />,
-      <VideoButton
-        key="video"
-        muted={!muteStates.video.enabled}
-        onClick={toggleCamera}
-        disabled={muteStates.video.setEnabled === null}
-        data-testid="incall_videomute"
+      <SwitchCameraButton
+        key="switch_camera"
+        className={styles.switchCamera}
+        onClick={switchCamera}
+        onTouchEnd={onControlsTouchEnd}
       />,
     );
-    if (!reducedControls) {
-      if (switchCamera !== null)
-        buttons.push(
-          <SwitchCameraButton key="switch_camera" onClick={switchCamera} />,
-        );
-      if (canScreenshare && !hideScreensharing) {
-        buttons.push(
-          <ShareScreenButton
-            key="share_screen"
-            enabled={isScreenShareEnabled}
-            onClick={toggleScreensharing}
-            data-testid="incall_screenshare"
-          />,
-        );
-      }
-      if (supportsReactions) {
-        buttons.push(
-          <RaiseHandToggleButton
-            client={client}
-            rtcSession={rtcSession}
-            key="4"
-          />,
-        );
-      }
-      buttons.push(<SettingsButton key="settings" onClick={openSettings} />);
-    }
-
+  if (canScreenshare && !hideScreensharing) {
     buttons.push(
-      <EndCallButton
-        key="end_call"
-        onClick={function (): void {
-          onLeave();
-        }}
-        data-testid="incall_leave"
+      <ShareScreenButton
+        key="share_screen"
+        className={styles.shareScreen}
+        enabled={isScreenShareEnabled}
+        onClick={toggleScreensharing}
+        onTouchEnd={onControlsTouchEnd}
+        data-testid="incall_screenshare"
       />,
     );
-    footer = (
-      <div
-        ref={footerRef}
-        className={classNames(styles.footer, {
-          [styles.overlay]: windowMode === "flat",
-          [styles.hidden]: !showFooter || (!showControls && hideHeader),
-        })}
-      >
-        {!mobile && !hideHeader && (
-          <div className={styles.logo}>
-            <LogoMark width={24} height={24} aria-hidden />
-            <LogoType
-              width={80}
-              height={11}
-              aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
-            />
-          </div>
-        )}
-        {showControls && <div className={styles.buttons}>{buttons}</div>}
-        {!mobile && showControls && (
-          <LayoutToggle
-            className={styles.layout}
-            layout={gridMode}
-            setLayout={setGridMode}
-            onTouchEnd={onLayoutToggleTouchEnd}
-          />
-        )}
-      </div>
-    );
   }
+  if (supportsReactions) {
+    buttons.push(
+      <ReactionToggleButton
+        key="raise_hand"
+        className={styles.raiseHand}
+        client={client}
+        rtcSession={rtcSession}
+        onTouchEnd={onControlsTouchEnd}
+      />,
+    );
+  }
+  if (layout.type !== "pip")
+    buttons.push(
+      <SettingsButton
+        key="settings"
+        onClick={openSettings}
+        onTouchEnd={onControlsTouchEnd}
+      />,
+    );
+
+  buttons.push(
+    <EndCallButton
+      key="end_call"
+      onClick={function (): void {
+        onLeave();
+      }}
+      onTouchEnd={onControlsTouchEnd}
+      data-testid="incall_leave"
+    />,
+  );
+  const footer = (
+    <div
+      ref={footerRef}
+      className={classNames(styles.footer, {
+        [styles.overlay]: windowMode === "flat",
+        [styles.hidden]: !showFooter || (!showControls && hideHeader),
+      })}
+    >
+      {!hideHeader && (
+        <div className={styles.logo}>
+          <LogoMark width={24} height={24} aria-hidden />
+          <LogoType
+            width={80}
+            height={11}
+            aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
+          />
+        </div>
+      )}
+      {showControls && <div className={styles.buttons}>{buttons}</div>}
+      {showControls && (
+        <LayoutToggle
+          className={styles.layout}
+          layout={gridMode}
+          setLayout={setGridMode}
+          onTouchEnd={onControlsTouchEnd}
+        />
+      )}
+    </div>
+  );
 
   return (
     <div
@@ -628,28 +670,45 @@ export const InCallView: FC<InCallViewProps> = ({
               />
             </LeftNav>
             <RightNav>
-              {!reducedControls && showControls && onShareClick !== null && (
-                <InviteButton onClick={onShareClick} />
+              {showControls && onShareClick !== null && (
+                <InviteButton
+                  className={styles.invite}
+                  onClick={onShareClick}
+                />
               )}
             </RightNav>
           </Header>
         ))}
       <RoomAudioRenderer />
       {renderContent()}
-      <audio ref={handRaisePlayer} hidden>
+      <audio ref={handRaisePlayer} preload="auto" hidden>
         <source src={handSoundOgg} type="audio/ogg; codecs=vorbis" />
         <source src={handSoundMp3} type="audio/mpeg" />
       </audio>
+      <ReactionsAudioRenderer />
+      {reactionsIcons.map(({ sender, emoji, startX }) => (
+        <span
+          style={{ left: `${startX}vw` }}
+          className={styles.floatingReaction}
+          key={sender}
+        >
+          {emoji}
+        </span>
+      ))}
       {footer}
-      {!noControls && <RageshakeRequestModal {...rageshakeRequestModalProps} />}
-      <SettingsModal
-        client={client}
-        roomId={rtcSession.room.roomId}
-        open={settingsModalOpen}
-        onDismiss={closeSettings}
-        tab={settingsTab}
-        onTabChange={setSettingsTab}
-      />
+      {layout.type !== "pip" && (
+        <>
+          <RageshakeRequestModal {...rageshakeRequestModalProps} />
+          <SettingsModal
+            client={client}
+            roomId={rtcSession.room.roomId}
+            open={settingsModalOpen}
+            onDismiss={closeSettings}
+            tab={settingsTab}
+            onTabChange={setSettingsTab}
+          />
+        </>
+      )}
     </div>
   );
 };

src/room/ReactionAudioRenderer.test.tsx

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

src/room/ReactionAudioRenderer.tsx

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

src/room/VideoPreview.module.css

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

src/settings/PreferencesSettingsTab.tsx

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

src/settings/SettingsModal.module.css

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

src/settings/SettingsModal.tsx

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

src/settings/settings.ts

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

src/sound/LICENCE.md

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

src/state/CallViewModel.ts

@@ -86,6 +86,10 @@ const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
 // on mobile. No spotlight tile should be shown below this threshold.
 const smallMobileCallThreshold = 3;
 
+// How long the footer should be shown for when hovering over or interacting
+// with the interface
+const showFooterMs = 4000;
+
 export interface GridLayoutMedia {
   type: "grid";
   spotlight?: MediaViewModel[];
@@ -1042,6 +1046,7 @@ export class CallViewModel extends ViewModel {
     );
 
   private readonly screenTap = new Subject<void>();
+  private readonly controlsTap = new Subject<void>();
   private readonly screenHover = new Subject<void>();
   private readonly screenUnhover = new Subject<void>();
 
@@ -1052,6 +1057,13 @@ export class CallViewModel extends ViewModel {
     this.screenTap.next();
   }
 
+  /**
+   * Callback for when the user taps the call's controls.
+   */
+  public tapControls(): void {
+    this.controlsTap.next();
+  }
+
   /**
    * Callback for when the user hovers over the call view.
    */
@@ -1086,27 +1098,38 @@ export class CallViewModel extends ViewModel {
           if (isFirefox()) return of(true);
           // Show/hide the footer in response to interactions
           return merge(
-            this.screenTap.pipe(map(() => "tap" as const)),
+            this.screenTap.pipe(map(() => "tap screen" as const)),
+            this.controlsTap.pipe(map(() => "tap controls" as const)),
             this.screenHover.pipe(map(() => "hover" as const)),
           ).pipe(
-            switchScan(
-              (state, interaction) =>
-                interaction === "tap"
-                  ? state
+            switchScan((state, interaction) => {
+              switch (interaction) {
+                case "tap screen":
+                  return state
                     ? // Toggle visibility on tap
                       of(false)
                     : // Hide after a timeout
-                      timer(6000).pipe(
+                      timer(showFooterMs).pipe(
                         map(() => false),
                         startWith(true),
-                      )
-                  : // Show on hover and hide after a timeout
-                    race(timer(3000), this.screenUnhover.pipe(take(1))).pipe(
-                      map(() => false),
-                      startWith(true),
-                    ),
-              false,
-            ),
+                      );
+                case "tap controls":
+                  // The user is interacting with things, so reset the timeout
+                  return timer(showFooterMs).pipe(
+                    map(() => false),
+                    startWith(true),
+                  );
+                case "hover":
+                  // Show on hover and hide after a timeout
+                  return race(
+                    timer(showFooterMs),
+                    this.screenUnhover.pipe(take(1)),
+                  ).pipe(
+                    map(() => false),
+                    startWith(true),
+                  );
+              }
+            }, false),
             startWith(false),
           );
       }

src/tile/GridTile.test.tsx

@@ -44,6 +44,8 @@ test("GridTile is accessible", async () => {
           off: () => {},
           client: {
             getUserId: () => null,
+            on: () => {},
+            off: () => {},
           },
         },
         memberships: [],

src/tile/GridTile.tsx

@@ -48,6 +48,7 @@ import { useLatest } from "../useLatest";
 import { GridTileViewModel } from "../state/TileViewModel";
 import { useMergedRefs } from "../useMergedRefs";
 import { useReactions } from "../useReactions";
+import { ReactionOption } from "../reactions";
 
 interface TileProps {
   className?: string;
@@ -93,7 +94,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
       },
       [vm],
     );
-    const { raisedHands, lowerHand } = useReactions();
+    const { raisedHands, lowerHand, reactions } = useReactions();
 
     const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;
 
@@ -112,6 +113,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 && handRaised ? (): void => void lowerHand() : undefined;
 
@@ -157,6 +160,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
           </Menu>
         }
         raisedHandTime={handRaised}
+        currentReaction={currentReaction}
         raisedHandOnClick={raisedHandOnClick}
         {...props}
       />

src/tile/MediaView.tsx

@@ -20,6 +20,8 @@ import { Avatar } from "../Avatar";
 import { EncryptionStatus } from "../state/MediaViewModel";
 import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
 import { showHandRaisedTimer, useSetting } from "../settings/settings";
+import { ReactionOption } from "../reactions";
+import { ReactionIndicator } from "../reactions/ReactionIndicator";
 
 interface Props extends ComponentProps<typeof animated.div> {
   className?: string;
@@ -37,6 +39,7 @@ interface Props extends ComponentProps<typeof animated.div> {
   displayName: string;
   primaryButton?: ReactNode;
   raisedHandTime?: Date;
+  currentReaction?: ReactionOption;
   raisedHandOnClick?: () => void;
 }
 
@@ -58,6 +61,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
       primaryButton,
       encryptionStatus,
       raisedHandTime,
+      currentReaction,
       raisedHandOnClick,
       ...props
     },
@@ -98,7 +102,22 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
           )}
         </div>
         <div className={styles.fg}>
-          {encryptionStatus !== EncryptionStatus.Okay && (
+          <div style={{ display: "flex" }}>
+            <RaisedHandIndicator
+              raisedHandTime={raisedHandTime}
+              miniature={avatarSize < 96}
+              showTimer={handRaiseTimerVisible}
+              onClick={raisedHandOnClick}
+            />
+            {currentReaction && (
+              <ReactionIndicator
+                miniature={avatarSize < 96}
+                emoji={currentReaction.emoji}
+              />
+            )}
+          </div>
+          {/* TODO: Bring this back once encryption status is less broken */}
+          {/*encryptionStatus !== EncryptionStatus.Okay && (
             <div className={styles.status}>
               <Text as="span" size="sm" weight="medium" className={styles.name}>
                 {encryptionStatus === EncryptionStatus.Connecting &&
@@ -111,13 +130,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
                   t("e2ee_encryption_status.password_invalid")}
               </Text>
             </div>
-          )}
-          <RaisedHandIndicator
-            raisedHandTime={raisedHandTime}
-            miniature={avatarSize < 96}
-            showTimer={handRaiseTimerVisible}
-            onClick={raisedHandOnClick}
-          />
+          )*/}
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}
             <Text as="span" size="sm" weight="medium" className={styles.name}>

src/useMediaQuery.ts

@@ -13,7 +13,7 @@ import { useEventTarget } from "./useEvents";
  * React hook that tracks whether the given media query matches.
  */
 export function useMediaQuery(query: string): boolean {
-  const mediaQuery = useMemo(() => matchMedia(query), [query]);
+  const mediaQuery = useMemo(() => window.matchMedia(query), [query]);
 
   const [numChanges, setNumChanges] = useState(0);
   useEventTarget(

src/useReactions.test.tsx

@@ -5,34 +5,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { act, render } from "@testing-library/react";
-import { FC, ReactNode } from "react";
+import { render } from "@testing-library/react";
+import { act, FC } from "react";
 import { describe, expect, test } from "vitest";
-import {
-  MatrixRTCSession,
-  MatrixRTCSessionEvent,
-} from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
-import {
-  EventTimeline,
-  EventTimelineSet,
-  EventType,
-  MatrixClient,
-  MatrixEvent,
-  Room,
-  RoomEvent,
-} from "matrix-js-sdk/src/matrix";
-import EventEmitter from "events";
-import { randomUUID } from "crypto";
-import { CallMembership } from "matrix-js-sdk/src/matrixrtc";
+import { RoomEvent } from "matrix-js-sdk/src/matrix";
 
-import { ReactionsProvider, useReactions } from "./useReactions";
-
-/**
- * Test explanation.
- * This test suite checks that the useReactions hook appropriately reacts
- * to new reactions, redactions and membership changesin the room. There is
- * a large amount of test structure used to construct a mock environment.
- */
+import { useReactions } from "./useReactions";
+import {
+  createHandRaisedReaction,
+  createRedaction,
+  MockRoom,
+  MockRTCSession,
+  TestReactionsWrapper,
+} from "./utils/testReactions";
 
 const memberUserIdAlice = "@alice:example.org";
 const memberEventAlice = "$membership-alice:example.org";
@@ -45,6 +30,13 @@ const membership: Record<string, string> = {
   "$membership-charlie:example.org": "@charlie:example.org",
 };
 
+/**
+ * Test explanation.
+ * This test suite checks that the useReactions hook appropriately reacts
+ * to new reactions, redactions and membership changesin the room. There is
+ * a large amount of test structure used to construct a mock environment.
+ */
+
 const TestComponent: FC = () => {
   const { raisedHands } = useReactions();
   return (
@@ -61,138 +53,42 @@ const TestComponent: FC = () => {
   );
 };
 
-const TestComponentWrapper = ({
-  rtcSession,
-}: {
-  rtcSession: MockRTCSession;
-}): ReactNode => {
-  return (
-    <ReactionsProvider rtcSession={rtcSession as unknown as MatrixRTCSession}>
-      <TestComponent />
-    </ReactionsProvider>
-  );
-};
-
-export class MockRTCSession extends EventEmitter {
-  public memberships: Partial<CallMembership>[] = Object.entries(
-    membership,
-  ).map(([eventId, sender]) => ({
-    sender,
-    eventId,
-    createdTs: (): number => Date.now(),
-  }));
-
-  public constructor(public readonly room: MockRoom) {
-    super();
-  }
-
-  public testRemoveMember(userId: string): void {
-    this.memberships = this.memberships.filter((u) => u.sender !== userId);
-    this.emit(MatrixRTCSessionEvent.MembershipsChanged);
-  }
-
-  public testAddMember(sender: string): void {
-    this.memberships.push({
-      sender,
-      eventId: `!fake-${randomUUID()}:event`,
-      createdTs: (): number => Date.now(),
-    });
-    this.emit(MatrixRTCSessionEvent.MembershipsChanged);
-  }
-}
-
-function createReaction(
-  parentMemberEvent: string,
-  overridenSender?: string,
-): MatrixEvent {
-  return new MatrixEvent({
-    sender: overridenSender ?? membership[parentMemberEvent],
-    type: EventType.Reaction,
-    origin_server_ts: new Date().getTime(),
-    content: {
-      "m.relates_to": {
-        key: "🖐️",
-        event_id: parentMemberEvent,
-      },
-    },
-    event_id: randomUUID(),
-  });
-}
-
-function createRedaction(sender: string, reactionEventId: string): MatrixEvent {
-  return new MatrixEvent({
-    sender,
-    type: EventType.RoomRedaction,
-    origin_server_ts: new Date().getTime(),
-    redacts: reactionEventId,
-    content: {},
-    event_id: randomUUID(),
-  });
-}
-
-export class MockRoom extends EventEmitter {
-  public constructor(private readonly existingRelations: MatrixEvent[] = []) {
-    super();
-  }
-
-  public get client(): MatrixClient {
-    return {
-      getUserId: (): string => memberUserIdAlice,
-    } as unknown as MatrixClient;
-  }
-
-  public get relations(): Room["relations"] {
-    return {
-      getChildEventsForEvent: (membershipEventId: string) => ({
-        getRelations: (): MatrixEvent[] => {
-          return this.existingRelations.filter(
-            (r) =>
-              r.getContent()["m.relates_to"]?.event_id === membershipEventId,
-          );
-        },
-      }),
-    } as unknown as Room["relations"];
-  }
-
-  public testSendReaction(
-    parentMemberEvent: string,
-    overridenSender?: string,
-  ): string {
-    const evt = createReaction(parentMemberEvent, overridenSender);
-    this.emit(RoomEvent.Timeline, evt, this, undefined, false, {
-      timeline: new EventTimeline(new EventTimelineSet(undefined)),
-    });
-    return evt.getId()!;
-  }
-}
-
 describe("useReactions", () => {
   test("starts with an empty list", () => {
-    const rtcSession = new MockRTCSession(new MockRoom());
+    const rtcSession = new MockRTCSession(
+      new MockRoom(memberUserIdAlice),
+      membership,
+    );
     const { queryByRole } = render(
-      <TestComponentWrapper rtcSession={rtcSession} />,
+      <TestReactionsWrapper rtcSession={rtcSession}>
+        <TestComponent />
+      </TestReactionsWrapper>,
     );
     expect(queryByRole("list")?.children).to.have.lengthOf(0);
   });
   test("handles incoming raised hand", async () => {
-    const room = new MockRoom();
-    const rtcSession = new MockRTCSession(room);
+    const room = new MockRoom(memberUserIdAlice);
+    const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestComponentWrapper rtcSession={rtcSession} />,
+      <TestReactionsWrapper rtcSession={rtcSession}>
+        <TestComponent />
+      </TestReactionsWrapper>,
     );
-    await act(() => room.testSendReaction(memberEventAlice));
+    await act(() => room.testSendHandRaise(memberEventAlice, membership));
     expect(queryByRole("list")?.children).to.have.lengthOf(1);
-    await act(() => room.testSendReaction(memberEventBob));
+    await act(() => room.testSendHandRaise(memberEventBob, membership));
     expect(queryByRole("list")?.children).to.have.lengthOf(2);
   });
   test("handles incoming unraised hand", async () => {
-    const room = new MockRoom();
-    const rtcSession = new MockRTCSession(room);
+    const room = new MockRoom(memberUserIdAlice);
+    const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestComponentWrapper rtcSession={rtcSession} />,
+      <TestReactionsWrapper rtcSession={rtcSession}>
+        <TestComponent />
+      </TestReactionsWrapper>,
     );
     const reactionEventId = await act(() =>
-      room.testSendReaction(memberEventAlice),
+      room.testSendHandRaise(memberEventAlice, membership),
     );
     expect(queryByRole("list")?.children).to.have.lengthOf(1);
     await act(() =>
@@ -206,30 +102,42 @@ describe("useReactions", () => {
     expect(queryByRole("list")?.children).to.have.lengthOf(0);
   });
   test("handles loading prior raised hand events", () => {
-    const room = new MockRoom([createReaction(memberEventAlice)]);
-    const rtcSession = new MockRTCSession(room);
+    const room = new MockRoom(memberUserIdAlice, [
+      createHandRaisedReaction(memberEventAlice, membership),
+    ]);
+    const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestComponentWrapper rtcSession={rtcSession} />,
+      <TestReactionsWrapper rtcSession={rtcSession}>
+        <TestComponent />
+      </TestReactionsWrapper>,
     );
     expect(queryByRole("list")?.children).to.have.lengthOf(1);
   });
   // If the membership event changes for a user, we want to remove
   // the raised hand event.
   test("will remove reaction when a member leaves the call", () => {
-    const room = new MockRoom([createReaction(memberEventAlice)]);
-    const rtcSession = new MockRTCSession(room);
+    const room = new MockRoom(memberUserIdAlice, [
+      createHandRaisedReaction(memberEventAlice, membership),
+    ]);
+    const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestComponentWrapper rtcSession={rtcSession} />,
+      <TestReactionsWrapper rtcSession={rtcSession}>
+        <TestComponent />
+      </TestReactionsWrapper>,
     );
     expect(queryByRole("list")?.children).to.have.lengthOf(1);
     act(() => rtcSession.testRemoveMember(memberUserIdAlice));
     expect(queryByRole("list")?.children).to.have.lengthOf(0);
   });
   test("will remove reaction when a member joins via a new event", () => {
-    const room = new MockRoom([createReaction(memberEventAlice)]);
-    const rtcSession = new MockRTCSession(room);
+    const room = new MockRoom(memberUserIdAlice, [
+      createHandRaisedReaction(memberEventAlice, membership),
+    ]);
+    const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestComponentWrapper rtcSession={rtcSession} />,
+      <TestReactionsWrapper rtcSession={rtcSession}>
+        <TestComponent />
+      </TestReactionsWrapper>,
     );
     expect(queryByRole("list")?.children).to.have.lengthOf(1);
     // Simulate leaving and rejoining
@@ -240,22 +148,26 @@ describe("useReactions", () => {
     expect(queryByRole("list")?.children).to.have.lengthOf(0);
   });
   test("ignores invalid sender for historic event", () => {
-    const room = new MockRoom([
-      createReaction(memberEventAlice, memberUserIdBob),
+    const room = new MockRoom(memberUserIdAlice, [
+      createHandRaisedReaction(memberEventAlice, memberUserIdBob),
     ]);
-    const rtcSession = new MockRTCSession(room);
+    const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestComponentWrapper rtcSession={rtcSession} />,
+      <TestReactionsWrapper rtcSession={rtcSession}>
+        <TestComponent />
+      </TestReactionsWrapper>,
     );
     expect(queryByRole("list")?.children).to.have.lengthOf(0);
   });
   test("ignores invalid sender for new event", async () => {
-    const room = new MockRoom([]);
-    const rtcSession = new MockRTCSession(room);
+    const room = new MockRoom(memberUserIdAlice);
+    const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestComponentWrapper rtcSession={rtcSession} />,
+      <TestReactionsWrapper rtcSession={rtcSession}>
+        <TestComponent />
+      </TestReactionsWrapper>,
     );
-    await act(() => room.testSendReaction(memberEventAlice, memberUserIdBob));
+    await act(() => room.testSendHandRaise(memberEventAlice, memberUserIdBob));
     expect(queryByRole("list")?.children).to.have.lengthOf(0);
   });
 });

src/useReactions.tsx

@@ -10,6 +10,7 @@ import {
   MatrixEvent,
   RelationType,
   RoomEvent as MatrixRoomEvent,
+  MatrixEventEvent,
 } from "matrix-js-sdk/src/matrix";
 import { ReactionEventContent } from "matrix-js-sdk/src/types";
 import {
@@ -26,10 +27,19 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { useMatrixRTCSessionMemberships } from "./useMatrixRTCSessionMemberships";
 import { useClientState } from "./ClientContext";
+import {
+  ECallReactionEventContent,
+  ElementCallReactionEventType,
+  GenericReaction,
+  ReactionOption,
+  ReactionSet,
+} from "./reactions";
+import { useLatest } from "./useLatest";
 
 interface ReactionsContextType {
   raisedHands: Record<string, Date>;
   supportsReactions: boolean;
+  reactions: Record<string, ReactionOption>;
   lowerHand: () => Promise<void>;
 }
 
@@ -52,6 +62,8 @@ interface RaisedHandInfo {
   time: Date;
 }
 
+const REACTION_ACTIVE_TIME_MS = 3000;
+
 export const useReactions = (): ReactionsContextType => {
   const context = useContext(ReactionsContext);
   if (!context) {
@@ -80,6 +92,10 @@ export const ReactionsProvider = ({
   const room = rtcSession.room;
   const myUserId = room.client.getUserId();
 
+  const [reactions, setReactions] = useState<Record<string, ReactionOption>>(
+    {},
+  );
+
   // Reduce the data down for the consumers.
   const resultRaisedHands = useMemo(
     () =>
@@ -162,29 +178,95 @@ export const ReactionsProvider = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [room, memberships, myUserId, addRaisedHand, removeRaisedHand]);
 
+  const latestMemberships = useLatest(memberships);
+  const latestRaisedHands = useLatest(raisedHands);
+
   // This effect handles any *live* reaction/redactions in the room.
   useEffect(() => {
+    const reactionTimeouts = new Set<number>();
     const handleReactionEvent = (event: MatrixEvent): void => {
-      if (event.isSending()) {
-        // Skip any events that are still sending.
-        return;
-      }
+      // Decrypted events might come from a different room
+      if (event.getRoomId() !== room.roomId) return;
+      // Skip any events that are still sending.
+      if (event.isSending()) return;
 
       const sender = event.getSender();
       const reactionEventId = event.getId();
-      if (!sender || !reactionEventId) {
-        // Skip any event without a sender or event ID.
-        return;
-      }
+      // Skip any event without a sender or event ID.
+      if (!sender || !reactionEventId) return;
 
-      if (event.getType() === EventType.Reaction) {
+      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;
+        // Check to see if this reaction was made to a membership event (and the
+        // sender of the reaction matches the membership)
+        if (
+          !latestMemberships.current.some(
+            (e) => e.eventId === membershipEventId && e.sender === sender,
+          )
+        ) {
+          logger.warn(
+            `Reaction target was not a membership event for ${sender}, ignoring`,
+          );
+          return;
+        }
+
+        if (!content.emoji) {
+          logger.warn(`Reaction had no emoji from ${reactionEventId}`);
+          return;
+        }
+
+        const segment = new Intl.Segmenter(undefined, {
+          granularity: "grapheme",
+        })
+          .segment(content.emoji)
+          [Symbol.iterator]();
+        const emoji = segment.next().value?.segment;
+
+        if (!emoji) {
+          logger.warn(
+            `Reaction had no emoji from ${reactionEventId} after splitting`,
+          );
+          return;
+        }
+
+        // One of our custom reactions
+        const reaction = {
+          ...GenericReaction,
+          emoji,
+          // If we don't find a reaction, we can fallback to the generic sound.
+          ...ReactionSet.find((r) => r.name === content.name),
+        };
+
+        setReactions((reactions) => {
+          if (reactions[sender]) {
+            // We've still got a reaction from this user, ignore it to prevent spamming
+            return reactions;
+          }
+          const timeout = window.setTimeout(() => {
+            // Clear the reaction after some time.
+            setReactions(({ [sender]: _unused, ...remaining }) => remaining);
+            reactionTimeouts.delete(timeout);
+          }, REACTION_ACTIVE_TIME_MS);
+          reactionTimeouts.add(timeout);
+          return {
+            ...reactions,
+            [sender]: reaction,
+          };
+        });
+      } else if (event.getType() === EventType.Reaction) {
         const content = event.getContent() as ReactionEventContent;
         const membershipEventId = content["m.relates_to"].event_id;
 
         // Check to see if this reaction was made to a membership event (and the
         // sender of the reaction matches the membership)
         if (
-          !memberships.some(
+          !latestMemberships.current.some(
             (e) => e.eventId === membershipEventId && e.sender === sender,
           )
         ) {
@@ -203,7 +285,7 @@ export const ReactionsProvider = ({
         }
       } else if (event.getType() === EventType.RoomRedaction) {
         const targetEvent = event.event.redacts;
-        const targetUser = Object.entries(raisedHands).find(
+        const targetUser = Object.entries(latestRaisedHands.current).find(
           ([_u, r]) => r.reactionEventId === targetEvent,
         )?.[0];
         if (!targetUser) {
@@ -216,6 +298,7 @@ export const ReactionsProvider = ({
 
     room.on(MatrixRoomEvent.Timeline, handleReactionEvent);
     room.on(MatrixRoomEvent.Redaction, handleReactionEvent);
+    room.client.on(MatrixEventEvent.Decrypted, handleReactionEvent);
 
     // We listen for a local echo to get the real event ID, as timeline events
     // may still be sending.
@@ -224,17 +307,22 @@ export const ReactionsProvider = ({
     return (): void => {
       room.off(MatrixRoomEvent.Timeline, handleReactionEvent);
       room.off(MatrixRoomEvent.Redaction, handleReactionEvent);
+      room.client.off(MatrixEventEvent.Decrypted, handleReactionEvent);
       room.off(MatrixRoomEvent.LocalEchoUpdated, handleReactionEvent);
+      reactionTimeouts.forEach((t) => clearTimeout(t));
+      // If we're clearing timeouts, we also clear all reactions.
+      setReactions({});
     };
-  }, [room, addRaisedHand, removeRaisedHand, memberships, raisedHands]);
+  }, [
+    room,
+    addRaisedHand,
+    removeRaisedHand,
+    latestMemberships,
+    latestRaisedHands,
+  ]);
 
   const lowerHand = useCallback(async () => {
-    if (
-      !myUserId ||
-      clientState?.state !== "valid" ||
-      !clientState.authenticated ||
-      !raisedHands[myUserId]
-    ) {
+    if (!myUserId || !raisedHands[myUserId]) {
       return;
     }
     const myReactionId = raisedHands[myUserId].reactionEventId;
@@ -243,21 +331,19 @@ export const ReactionsProvider = ({
       return;
     }
     try {
-      await clientState.authenticated.client.redactEvent(
-        rtcSession.room.roomId,
-        myReactionId,
-      );
+      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, clientState, rtcSession]);
+  }, [myUserId, raisedHands, rtcSession, room]);
 
   return (
     <ReactionsContext.Provider
       value={{
         raisedHands: resultRaisedHands,
         supportsReactions,
+        reactions,
         lowerHand,
       }}
     >

src/utils/testReactions.tsx

@@ -0,0 +1,206 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { PropsWithChildren, ReactNode } from "react";
+import { randomUUID } from "crypto";
+import EventEmitter from "events";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { EventType, RoomEvent, RelationType } from "matrix-js-sdk/src/matrix";
+import {
+  MatrixEvent,
+  EventTimeline,
+  EventTimelineSet,
+  Room,
+} from "matrix-js-sdk/src/matrix";
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/src/matrixrtc";
+
+import { ReactionsProvider } from "../useReactions";
+import {
+  ECallReactionEventContent,
+  ElementCallReactionEventType,
+  ReactionOption,
+} from "../reactions";
+
+export const TestReactionsWrapper = ({
+  rtcSession,
+  children,
+}: PropsWithChildren<{
+  rtcSession: MockRTCSession;
+}>): ReactNode => {
+  return (
+    <ReactionsProvider rtcSession={rtcSession as unknown as MatrixRTCSession}>
+      {children}
+    </ReactionsProvider>
+  );
+};
+
+export class MockRTCSession extends EventEmitter {
+  public memberships: {
+    sender: string;
+    eventId: string;
+    createdTs: () => Date;
+  }[];
+
+  public constructor(
+    public readonly room: MockRoom,
+    membership: Record<string, string>,
+  ) {
+    super();
+    this.memberships = Object.entries(membership).map(([eventId, sender]) => ({
+      sender,
+      eventId,
+      createdTs: (): Date => new Date(),
+    }));
+  }
+
+  public testRemoveMember(userId: string): void {
+    this.memberships = this.memberships.filter((u) => u.sender !== userId);
+    this.emit(MatrixRTCSessionEvent.MembershipsChanged);
+  }
+
+  public testAddMember(sender: string): void {
+    this.memberships.push({
+      sender,
+      eventId: `!fake-${randomUUID()}:event`,
+      createdTs: (): Date => new Date(),
+    });
+    this.emit(MatrixRTCSessionEvent.MembershipsChanged);
+  }
+}
+
+export function createHandRaisedReaction(
+  parentMemberEvent: string,
+  membershipOrOverridenSender: Record<string, string> | string,
+): MatrixEvent {
+  return new MatrixEvent({
+    sender:
+      typeof membershipOrOverridenSender === "string"
+        ? membershipOrOverridenSender
+        : membershipOrOverridenSender[parentMemberEvent],
+    type: EventType.Reaction,
+    origin_server_ts: new Date().getTime(),
+    content: {
+      "m.relates_to": {
+        key: "🖐️",
+        event_id: parentMemberEvent,
+      },
+    },
+    event_id: randomUUID(),
+  });
+}
+
+export function createRedaction(
+  sender: string,
+  reactionEventId: string,
+): MatrixEvent {
+  return new MatrixEvent({
+    sender,
+    type: EventType.RoomRedaction,
+    origin_server_ts: new Date().getTime(),
+    redacts: reactionEventId,
+    content: {},
+    event_id: randomUUID(),
+  });
+}
+
+export class MockRoom extends EventEmitter {
+  public readonly testSentEvents: Parameters<MatrixClient["sendEvent"]>[] = [];
+  public readonly testRedactedEvents: Parameters<
+    MatrixClient["redactEvent"]
+  >[] = [];
+
+  public constructor(
+    private readonly ownUserId: string,
+    private readonly existingRelations: MatrixEvent[] = [],
+  ) {
+    super();
+  }
+
+  public get client(): MatrixClient {
+    return {
+      getUserId: (): string => this.ownUserId,
+      sendEvent: async (
+        ...props: Parameters<MatrixClient["sendEvent"]>
+      ): ReturnType<MatrixClient["sendEvent"]> => {
+        this.testSentEvents.push(props);
+        return Promise.resolve({ event_id: randomUUID() });
+      },
+      redactEvent: async (
+        ...props: Parameters<MatrixClient["redactEvent"]>
+      ): ReturnType<MatrixClient["redactEvent"]> => {
+        this.testRedactedEvents.push(props);
+        return Promise.resolve({ event_id: randomUUID() });
+      },
+      decryptEventIfNeeded: async () => {},
+      on() {
+        return this;
+      },
+      off() {
+        return this;
+      },
+    } as unknown as MatrixClient;
+  }
+
+  public get relations(): Room["relations"] {
+    return {
+      getChildEventsForEvent: (membershipEventId: string) => ({
+        getRelations: (): MatrixEvent[] => {
+          return this.existingRelations.filter(
+            (r) =>
+              r.getContent()["m.relates_to"]?.event_id === membershipEventId,
+          );
+        },
+      }),
+    } as unknown as Room["relations"];
+  }
+
+  public testSendHandRaise(
+    parentMemberEvent: string,
+    membershipOrOverridenSender: Record<string, string> | string,
+  ): string {
+    const evt = createHandRaisedReaction(
+      parentMemberEvent,
+      membershipOrOverridenSender,
+    );
+    this.emit(RoomEvent.Timeline, evt, this, undefined, false, {
+      timeline: new EventTimeline(new EventTimelineSet(undefined)),
+    });
+    return evt.getId()!;
+  }
+
+  public testSendReaction(
+    parentMemberEvent: string,
+    reaction: ReactionOption,
+    membershipOrOverridenSender: Record<string, string> | string,
+  ): string {
+    const evt = new MatrixEvent({
+      sender:
+        typeof membershipOrOverridenSender === "string"
+          ? membershipOrOverridenSender
+          : membershipOrOverridenSender[parentMemberEvent],
+      type: ElementCallReactionEventType,
+      origin_server_ts: new Date().getTime(),
+      content: {
+        "m.relates_to": {
+          rel_type: RelationType.Reference,
+          event_id: parentMemberEvent,
+        },
+        emoji: reaction.emoji,
+        name: reaction.name,
+      } satisfies ECallReactionEventContent,
+      event_id: randomUUID(),
+    });
+
+    this.emit(RoomEvent.Timeline, evt, this, undefined, false, {
+      timeline: new EventTimeline(new EventTimelineSet(undefined)),
+    });
+    return evt.getId()!;
+  }
+}

src/widget.ts

@@ -15,6 +15,7 @@ import type { IWidgetApiRequest } from "matrix-widget-api";
 import { LazyEventEmitter } from "./LazyEventEmitter";
 import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
+import { ElementCallReactionEventType } from "./reactions";
 
 // Subset of the actions in matrix-react-sdk
 export enum ElementWidgetActions {
@@ -105,6 +106,7 @@ export const widget = ((): WidgetHelpers | null => {
         EventType.CallEncryptionKeysPrefix,
         EventType.Reaction,
         EventType.RoomRedaction,
+        ElementCallReactionEventType,
       ];
 
       const sendState = [