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 (
-
-
-
- ✋
-
-
+
{showTimer && {raisedHandDuration}
}
-
+
);
}
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 (
+
+
+
+ {emoji}
+
+
+ {children}
+
+ );
+}
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 {
className?: string;
@@ -96,15 +97,23 @@ export const MediaView = forwardRef(
)}
-
+
+
+ {currentReaction && (
+
+ )}
+
{nameTagLeadingIcon}
- {displayName} {currentReaction?.emoji ?? ""}
+ {displayName}
{unencryptedWarning && (