fix(app): honour the animation setting for composer custom emoji (#1914)

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"

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;