From 0730ba5c709e3f7a26dd5e27ec4c865aa3a24061 Mon Sep 17 00:00:00 2001
From: Milton Moura <miltonmoura@gmail.com>
Date: Tue, 10 Sep 2024 00:05:08 +0000
Subject: [PATCH] Use relations to load existing reactions when joining the
 call

Signed-off-by: Milton Moura <miltonmoura@gmail.com>
---
 src/room/InCallView.tsx | 35 +++++++++++++++++++++++++++++++++++
 src/widget.ts           |  2 ++
 2 files changed, 37 insertions(+)

diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 3b798e1f..62bdabf6 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -316,6 +316,41 @@ export const InCallView: FC<InCallViewProps> = ({
   const userId = `${username}:${localpart}`;
   const isHandRaised = raisedHands.includes(userId);
 
+  useEffect(() => {
+    const getLastReactionEvent = async (
+      eventId: string,
+    ): Promise<MatrixEvent | undefined> => {
+      const rels = await client.relations(
+        rtcSession.room.roomId,
+        eventId,
+        RelationType.Annotation,
+        EventType.Reaction,
+        {
+          limit: 1,
+        },
+      );
+
+      return rels.events.length > 0 ? rels.events[0] : undefined;
+    };
+
+    const fetchReactions = async (): Promise<void> => {
+      const newRaisedHands = [...raisedHands];
+      for (const m of memberships) {
+        const reaction = await getLastReactionEvent(m.eventId!);
+        if (reaction && reaction.getType() === EventType.Reaction) {
+          const content = reaction.getContent() as ReactionEventContent;
+          if (content?.["m.relates_to"].key === "🖐️") {
+            newRaisedHands.push(m.sender!);
+          }
+        }
+      }
+      setRaisedHands(newRaisedHands);
+    };
+
+    fetchReactions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     const handleReactionEvent = (event: MatrixEvent): void => {
       if (event.getType() === EventType.Reaction) {
diff --git a/src/widget.ts b/src/widget.ts
index f08968b6..9d3da479 100644
--- a/src/widget.ts
+++ b/src/widget.ts
@@ -103,6 +103,8 @@ export const widget = ((): WidgetHelpers | null => {
       const sendRecvEvent = [
         "org.matrix.rageshake_request",
         EventType.CallEncryptionKeysPrefix,
+        EventType.Reaction,
+        EventType.RoomRedaction,
       ];
 
       const sendState = [