From edc4142fb1f6fec76a339b98b03f639a367013e0 Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Fri, 1 Nov 2024 14:34:33 +0000
Subject: [PATCH] Add reaction indicator.

---
 src/reactions/RaisedHandIndicator.tsx | 18 ++----------
 src/reactions/ReactionIndicator.tsx   | 40 +++++++++++++++++++++++++++
 src/tile/MediaView.module.css         |  4 +++
 src/tile/MediaView.tsx                | 21 ++++++++++----
 4 files changed, 62 insertions(+), 21 deletions(-)
 create mode 100644 src/reactions/ReactionIndicator.tsx

diff --git a/src/reactions/RaisedHandIndicator.tsx b/src/reactions/RaisedHandIndicator.tsx
index 19ddaf46..072db00d 100644
--- a/src/reactions/RaisedHandIndicator.tsx
+++ b/src/reactions/RaisedHandIndicator.tsx
@@ -11,6 +11,7 @@ import "@formatjs/intl-durationformat/polyfill";
 import { DurationFormat } from "@formatjs/intl-durationformat";
 
 import styles from "./RaisedHandIndicator.module.css";
+import { ReactionIndicator } from "./ReactionIndicator";
 
 const durationFormatter = new DurationFormat(undefined, {
   minutesDisplay: "always",
@@ -54,22 +55,9 @@ export function RaisedHandIndicator({
 
   if (raisedHandTime) {
     return (
-      <div
-        className={classNames(styles.raisedHandWidget, {
-          [styles.raisedHandWidgetLarge]: !minature,
-        })}
-      >
-        <div
-          className={classNames(styles.raisedHand, {
-            [styles.raisedHandLarge]: !minature,
-          })}
-        >
-          <span role="img" aria-label="raised hand">
-            ✋
-          </span>
-        </div>
+      <ReactionIndicator emoji="✋" minature={minature}>
         {showTimer && <p>{raisedHandDuration}</p>}
-      </div>
+      </ReactionIndicator>
     );
   }
 
diff --git a/src/reactions/ReactionIndicator.tsx b/src/reactions/ReactionIndicator.tsx
new file mode 100644
index 00000000..5b3c9cfb
--- /dev/null
+++ b/src/reactions/ReactionIndicator.tsx
@@ -0,0 +1,40 @@
+/*
+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 "@formatjs/intl-durationformat/polyfill";
+
+import styles from "./RaisedHandIndicator.module.css";
+
+export function ReactionIndicator({
+  emoji,
+  minature,
+  children,
+}: PropsWithChildren<{
+  minature?: boolean;
+  emoji: string;
+}>): ReactNode {
+  return (
+    <div
+      className={classNames(styles.raisedHandWidget, {
+        [styles.raisedHandWidgetLarge]: !minature,
+      })}
+    >
+      <div
+        className={classNames(styles.raisedHand, {
+          [styles.raisedHandLarge]: !minature,
+        })}
+      >
+        <span role="img" aria-label="raised hand">
+          {emoji}
+        </span>
+      </div>
+      {children}
+    </div>
+  );
+}
diff --git a/src/tile/MediaView.module.css b/src/tile/MediaView.module.css
index adde1c7b..19fc364f 100644
--- a/src/tile/MediaView.module.css
+++ b/src/tile/MediaView.module.css
@@ -170,3 +170,7 @@ unconditionally select the container so we can use cqmin units */
 .fg > button:first-of-type {
   grid-area: button;
 }
+
+.reactionSet {
+  display: flex;
+}
diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx
index 7ba04a7c..72348002 100644
--- a/src/tile/MediaView.tsx
+++ b/src/tile/MediaView.tsx
@@ -20,6 +20,7 @@ import { Avatar } from "../Avatar";
 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;
@@ -96,15 +97,23 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
           )}
         </div>
         <div className={styles.fg}>
-          <RaisedHandIndicator
-            raisedHandTime={raisedHandTime}
-            minature={avatarSize < 96}
-            showTimer={handRaiseTimerVisible}
-          />
+          <div className={styles.reactionSet}>
+            <RaisedHandIndicator
+              raisedHandTime={raisedHandTime}
+              minature={avatarSize < 96}
+              showTimer={handRaiseTimerVisible}
+            />
+            {currentReaction && (
+              <ReactionIndicator
+                minature={avatarSize < 96}
+                emoji={currentReaction.emoji}
+              />
+            )}
+          </div>
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}
             <Text as="span" size="sm" weight="medium" className={styles.name}>
-              {displayName} {currentReaction?.emoji ?? ""}
+              {displayName}
             </Text>
             {unencryptedWarning && (
               <Tooltip