From c5d910425ec92bf5dc378b4720e12d611155a4e4 Mon Sep 17 00:00:00 2001
From: Hampus <hampus@fluxer.app>
Date: Mon, 24 Aug 2026 12:44:40 +0200
Subject: [PATCH] fix(app): honour the animation setting for composer custom
 emoji (#1914)

---
 .../composer/nodes/ComposerCustomEmoji.tsx    | 23 +++++++++++++------
 .../composer/nodes/ComposerInline.module.css  |  1 +
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/fluxer_app/src/features/lexical/composer/nodes/ComposerCustomEmoji.tsx b/fluxer_app/src/features/lexical/composer/nodes/ComposerCustomEmoji.tsx
index 95eb77df3..5f64026bb 100644
--- a/fluxer_app/src/features/lexical/composer/nodes/ComposerCustomEmoji.tsx
+++ b/fluxer_app/src/features/lexical/composer/nodes/ComposerCustomEmoji.tsx
@@ -6,9 +6,8 @@ import type {FlatEmoji} from '@app/features/emoji/types/EmojiTypes';
 import Guilds from '@app/features/guild/state/Guilds';
 import {ComposerMentionContext} from '@app/features/lexical/composer/ComposerMentionContext';
 import styles from '@app/features/lexical/composer/nodes/ComposerInline.module.css';
-import {setUrlQueryParams} from '@app/features/messaging/utils/MessagingUrlUtils';
+import {getEmojiRenderUrl} from '@app/features/messaging/utils/markdown/EmojiDetector';
 import {EmojiWithTooltip} from '@app/features/ui/emoji_tooltip_content/EmojiWithTooltip';
-import * as AvatarSourceUtils from '@app/features/user/utils/AvatarSourceUtils';
 import {msg} from '@lingui/core/macro';
 import {useLingui} from '@lingui/react/macro';
 import {observer} from 'mobx-react-lite';
@@ -33,7 +32,12 @@ interface ComposerCustomEmojiProps {
 export const ComposerCustomEmoji = observer(({emojiId, animated, display}: ComposerCustomEmojiProps) => {
 	const {plainText} = useContext(ComposerMentionContext);
 	const {i18n} = useLingui();
-	const shouldAnimate = useShouldAnimate({kind: 'emoji'});
+	const record = Emoji.getEmojiById(emojiId);
+	const isAnimatable = record?.animated ?? animated;
+	const shouldAnimate = useShouldAnimate({
+		kind: 'emoji',
+		isAnimated: isAnimatable,
+	});
 	if (plainText) {
 		return (
 			<span
@@ -46,7 +50,6 @@ export const ComposerCustomEmoji = observer(({emojiId, animated, display}: Compo
 		);
 	}
 	const name = display.replace(/^:|:$/g, '');
-	const record = Emoji.getEmojiById(emojiId);
 	const emojiForSubtext: FlatEmoji =
 		record == null
 			? {
@@ -63,11 +66,17 @@ export const ComposerCustomEmoji = observer(({emojiId, animated, display}: Compo
 	const accessibleLabel = communityName
 		? i18n._(CUSTOM_EMOJI_FROM_COMMUNITY_DESCRIPTOR, {emojiName: display, communityName})
 		: i18n._(CUSTOM_EMOJI_DESCRIPTOR, {emojiName: display});
-	const displayUrl = AvatarSourceUtils.getEmojiURL({id: emojiId, animated: animated && shouldAnimate});
-	const tooltipUrl = setUrlQueryParams(displayUrl, {size: 240, quality: 'lossless'});
+	const displayUrl =
+		getEmojiRenderUrl({
+			id: emojiId,
+			surrogateUrl: null,
+			isAnimatable,
+			animated: shouldAnimate,
+			jumbo: false,
+		}) ?? '';
 	return (
 		<EmojiWithTooltip
-			emojiUrl={tooltipUrl}
+			emojiUrl={displayUrl}
 			emojiName={display}
 			emojiForSubtext={emojiForSubtext}
 			data-flx="lexical.composer.nodes.composer-custom-emoji.emoji-with-tooltip"
diff --git a/fluxer_app/src/features/lexical/composer/nodes/ComposerInline.module.css b/fluxer_app/src/features/lexical/composer/nodes/ComposerInline.module.css
index 5889bffb8..73dd8b2a9 100644
--- a/fluxer_app/src/features/lexical/composer/nodes/ComposerInline.module.css
+++ b/fluxer_app/src/features/lexical/composer/nodes/ComposerInline.module.css
@@ -4,6 +4,7 @@
 	display: inline-block;
 	height: 1.375em;
 	width: auto;
+	aspect-ratio: 1 / 1;
 	max-height: 1.375em;
 	vertical-align: bottom;
 	object-fit: contain;