Put custom reaction images behind a labs flag

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

Author: sumnerevans

src/components/views/messages/ReactionsRowButton.tsx

@@ -25,6 +25,7 @@ import dis from "../../../dispatcher/dispatcher";
 import ReactionsRowButtonTooltip from "./ReactionsRowButtonTooltip";
 import AccessibleButton from "../elements/AccessibleButton";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import SettingsStore from "../../../settings/SettingsStore";
 interface IProps {
     // The event we're displaying reactions for
     mxEvent: MatrixEvent;
@@ -106,14 +107,15 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
         }
 
         const room = this.context.getRoom(mxEvent.getRoomId());
+        const customReactionImagesEnabled = SettingsStore.getValue("feature_render_reaction_images");
         let label: string | undefined;
         let customReactionName: string | undefined;
         if (room) {
             const senders: string[] = [];
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 senders.push(member?.name || reactionEvent.getSender()!);
-                if (reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
+                if (customReactionImagesEnabled && reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
                     customReactionName = reactionEvent.event.content?.["com.beeper.reaction.shortcode"];
                 }
             }
@@ -134,7 +136,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
                 {content}
             </span>
         );
-        if (content.startsWith("mxc://")) {
+        if (customReactionImagesEnabled && content.startsWith("mxc://")) {
             const imageSrc = mediaFromMxc(content).srcHttp;
             if (imageSrc) {
                 reactionContent = (

src/components/views/messages/ReactionsRowButtonTooltip.tsx

@@ -22,6 +22,7 @@ import { _t } from "../../../languageHandler";
 import { formatCommaSeparatedList } from "../../../utils/FormattingUtils";
 import Tooltip from "../elements/Tooltip";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import SettingsStore from "../../../settings/SettingsStore";
 interface IProps {
     // The event we're displaying reactions for
     mxEvent: MatrixEvent;
@@ -42,13 +43,14 @@ 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;
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 const name = member?.name ?? reactionEvent.getSender()!;
                 senders.push(name);
-                if (reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
+                if (customReactionImagesEnabled && reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
                     customReactionName = reactionEvent.event.content?.["com.beeper.reaction.shortcode"];
                 }
             }

src/i18n/strings/en_EN.json

@@ -1004,6 +1004,8 @@
     "Enable new native OIDC flows (Under active development)": "Enable new native OIDC flows (Under active development)",
     "Rust cryptography implementation": "Rust cryptography implementation",
     "Font size": "Font size",
+    "Render custom images in reactions": "Render custom images in reactions",
+    "Sometimes referred to as \"custom emojis\".": "Sometimes referred to as \"custom emojis\".",
     "Use custom size": "Use custom size",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
     "Show stickers button": "Show stickers button",

src/settings/Settings.tsx

@@ -486,6 +486,14 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         default: "",
         controller: new FontSizeController(),
     },
+    "feature_render_reaction_images": {
+        isFeature: true,
+        labsGroup: LabGroup.Messaging,
+        displayName: _td("Render custom images in reactions"),
+        description: _td('Sometimes referred to as "custom emojis".'),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+    },
     /**
      * With the transition to Compound we are moving to a base font size
      * of 16px. We're taking the opportunity to move away from the `baseFontSize`