Add support for specifying custom sounds via state events.

src/button/ReactionToggleButton.tsx

@@ -33,7 +33,6 @@ import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMembership
 import styles from "./ReactionToggleButton.module.css";
 import {
   ReactionOption,
-  ReactionSet,
   ElementCallReactionEventType,
 } from "../reactions";
 import { Modal } from "../Modal";
@@ -77,9 +76,10 @@ export function ReactionPopupMenu({
 }): ReactNode {
   const { t } = useTranslation();
   const [isFullyExpanded, setExpanded] = useState(false);
+  const { allReactions } = useReactions();
 
   const filteredReactionSet = useMemo(
-    () => (isFullyExpanded ? ReactionSet : ReactionSet.slice(0, 6)),
+    () => (isFullyExpanded ? allReactions : allReactions.slice(0, 6)),
     [isFullyExpanded],
   );
 

src/reactions/index.ts

@@ -64,6 +64,10 @@ export interface ECallReactionEventContent {
   name: string;
 }
 
+export interface ECallReactionSoundsEventContent {
+  reactions: ReactionOption[],
+}
+
 export const GenericReaction: ReactionOption = {
   name: "generic",
   emoji: "", // Filled in by user

src/room/ReactionAudioRenderer.tsx

@@ -13,10 +13,10 @@ import {
   soundEffectVolumeSetting as effectSoundVolumeSetting,
   useSetting,
 } from "../settings/settings";
-import { GenericReaction, ReactionSet } from "../reactions";
+import { GenericReaction } from "../reactions";
 
 export function ReactionsAudioRenderer(): ReactNode {
-  const { reactions } = useReactions();
+  const { reactions, allReactions } = useReactions();
   const [shouldPlay] = useSetting(playReactionsSound);
   const [effectSoundVolume] = useSetting(effectSoundVolumeSetting);
   const audioElements = useRef<Record<string, HTMLAudioElement | null>>({});
@@ -52,7 +52,7 @@ export function ReactionsAudioRenderer(): ReactNode {
   // be delayed.
   return (
     <>
-      {[GenericReaction, ...ReactionSet].map(
+      {[GenericReaction, ...allReactions].map(
         (r) =>
           r.sound && (
             <audio

src/useReactions.tsx

@@ -11,6 +11,7 @@ import {
   RelationType,
   RoomEvent as MatrixRoomEvent,
   MatrixEventEvent,
+  Direction,
 } from "matrix-js-sdk/src/matrix";
 import { ReactionEventContent } from "matrix-js-sdk/src/types";
 import {
@@ -29,7 +30,9 @@ import { useMatrixRTCSessionMemberships } from "./useMatrixRTCSessionMemberships
 import { useClientState } from "./ClientContext";
 import {
   ECallReactionEventContent,
+  ECallReactionSoundsEventContent,
   ElementCallReactionEventType,
+  ElementCallReactionsEventType,
   GenericReaction,
   ReactionOption,
   ReactionSet,
@@ -37,6 +40,7 @@ import {
 import { useLatest } from "./useLatest";
 
 interface ReactionsContextType {
+  allReactions: ReactionOption[],
   raisedHands: Record<string, Date>;
   supportsReactions: boolean;
   reactions: Record<string, ReactionOption>;
@@ -96,6 +100,19 @@ export const ReactionsProvider = ({
     {},
   );
 
+  // TODO: Refetch if the timeline changes.
+  const allReactions = useMemo(() => {
+    const result = room.getLiveTimeline().getState(Direction.Forward)?.getStateEvents(ElementCallReactionsEventType, '');
+    if (!result) {
+      return ReactionSet;
+    }
+    const content = result.getContent() as ECallReactionSoundsEventContent;
+    if (!content.reactions || !Array.isArray(content.reactions)) {
+      logger.warn(`Reactions event ${result.event.event_id} was not correctly formatted, ignoring`);
+    }
+    return [...ReactionSet, ...content.reactions];
+  }, [room])
+
   // Reduce the data down for the consumers.
   const resultRaisedHands = useMemo(
     () =>
@@ -345,6 +362,7 @@ export const ReactionsProvider = ({
         supportsReactions,
         reactions,
         lowerHand,
+        allReactions,
       }}
     >
       {children}