Move calculation of whether to render custom reaction images up to ReactionRow

Signed-off-by: Sumner Evans <sumner@beeper.com>

Author: sumnerevans

src/components/views/messages/ReactionsRow.tsx

@@ -28,6 +28,7 @@ import ReactionPicker from "../emojipicker/ReactionPicker";
 import ReactionsRowButton from "./ReactionsRowButton";
 import RoomContext from "../../../contexts/RoomContext";
 import AccessibleButton from "../elements/AccessibleButton";
+import SettingsStore from "../../../settings/SettingsStore";
 
 // The maximum number of reactions to initially show on a message.
 const MAX_ITEMS_WHEN_LIMITED = 8;
@@ -172,6 +173,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
         if (!reactions || !isContentActionable(mxEvent)) {
             return null;
         }
+        const customReactionImagesEnabled = SettingsStore.getValue("feature_render_reaction_images");
 
         let items = reactions
             .getSortedAnnotationsByKey()
@@ -198,6 +200,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
                         mxEvent={mxEvent}
                         reactionEvents={deduplicatedEvents}
                         myReactionEvent={myReactionEvent}
+                        customReactionImagesEnabled={customReactionImagesEnabled}
                         disabled={
                             !this.context.canReact ||
                             (myReactionEvent && !myReactionEvent.isRedacted() && !this.context.canSelfRedact)

src/components/views/messages/ReactionsRowButton.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React from "react";
 import classNames from "classnames";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { Optional } from "matrix-events-sdk/lib/types";
 
 import { mediaFromMxc } from "../../../customisations/Media";
 import { _t } from "../../../languageHandler";
@@ -25,7 +26,6 @@ import dis from "../../../dispatcher/dispatcher";
 import ReactionsRowButtonTooltip from "./ReactionsRowButtonTooltip";
 import AccessibleButton from "../elements/AccessibleButton";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import SettingsStore from "../../../settings/SettingsStore";
 import { REACTION_SHORTCODE_KEY } from "./ReactionsRow";
 interface IProps {
     // The event we're displaying reactions for
@@ -40,6 +40,8 @@ interface IProps {
     myReactionEvent?: MatrixEvent;
     // Whether to prevent quick-reactions by clicking on this reaction
     disabled?: boolean;
+    // Whether to render custom image reactions
+    customReactionImagesEnabled?: boolean;
 }
 
 interface IState {
@@ -103,20 +105,23 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
                     content={content}
                     reactionEvents={reactionEvents}
                     visible={this.state.tooltipVisible}
+                    customReactionImagesEnabled={this.props.customReactionImagesEnabled}
                 />
             );
         }
 
         const room = this.context.getRoom(mxEvent.getRoomId());
-        const customReactionImagesEnabled = SettingsStore.getValue("feature_render_reaction_images");
         let label: string | undefined;
-        let customReactionName: string | undefined;
+        let customReactionName: Optional<string>;
         if (room) {
             const senders: string[] = [];
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 senders.push(member?.name || reactionEvent.getSender()!);
-                if (customReactionImagesEnabled && REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) {
+                if (
+                    this.props.customReactionImagesEnabled &&
+                    REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())
+                ) {
                     customReactionName = REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent());
                 }
             }
@@ -137,7 +142,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
                 {content}
             </span>
         );
-        if (customReactionImagesEnabled && content.startsWith("mxc://")) {
+        if (this.props.customReactionImagesEnabled && content.startsWith("mxc://")) {
             const imageSrc = mediaFromMxc(content).srcHttp;
             if (imageSrc) {
                 reactionContent = (

src/components/views/messages/ReactionsRowButtonTooltip.tsx

@@ -16,13 +16,13 @@ limitations under the License.
 
 import React from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { Optional } from "matrix-events-sdk/lib/types";
 
 import { unicodeToShortcode } from "../../../HtmlUtils";
 import { _t } from "../../../languageHandler";
 import { formatCommaSeparatedList } from "../../../utils/FormattingUtils";
 import Tooltip from "../elements/Tooltip";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import SettingsStore from "../../../settings/SettingsStore";
 import { REACTION_SHORTCODE_KEY } from "./ReactionsRow";
 interface IProps {
     // The event we're displaying reactions for
@@ -32,6 +32,8 @@ interface IProps {
     // A list of Matrix reaction events for this key
     reactionEvents: MatrixEvent[];
     visible: boolean;
+    // Whether to render custom image reactions
+    customReactionImagesEnabled?: boolean;
 }
 
 export default class ReactionsRowButtonTooltip extends React.PureComponent<IProps> {
@@ -44,14 +46,16 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
         const room = this.context.getRoom(mxEvent.getRoomId());
         let tooltipLabel: JSX.Element | undefined;
         if (room) {
-            const customReactionImagesEnabled = SettingsStore.getValue("feature_render_reaction_images");
             const senders: string[] = [];
-            let customReactionName: string | undefined;
+            let customReactionName: Optional<string>;
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 const name = member?.name ?? reactionEvent.getSender()!;
                 senders.push(name);
-                if (customReactionImagesEnabled && REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) {
+                if (
+                    this.props.customReactionImagesEnabled &&
+                    REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())
+                ) {
                     customReactionName = REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent());
                 }
             }