fix(app): stop rewriting message emoji urls to toggle animation (#1897)

fluxer_app/src/features/channel/components/MessageAttachments.tsx

@@ -281,13 +281,10 @@ const ForwardedFromSource = observer(({message}: {message: Message}) => {
 interface ForwardedMessageContentProps {
 	message: Message;
 	snapshot: MessageSnapshot;
-	shouldAnimate: boolean;
-	interactionHandlers: Record<string, unknown>;
 	onDelete?: (bypassConfirm?: boolean) => void;
 }
 
-export const ForwardedMessageContent = observer(
+export const ForwardedMessageContent = observer(({message, snapshot, onDelete}: ForwardedMessageContentProps) => {
-	({message, snapshot, shouldAnimate, interactionHandlers, onDelete}: ForwardedMessageContentProps) => {
 	const {i18n} = useLingui();
 	const snapshotIndex = 0;
 	const snapshotEditedTimestamp = snapshot.edited_timestamp ? new Date(snapshot.edited_timestamp) : null;
@@ -432,8 +429,6 @@ export const ForwardedMessageContent = observer(
 								key={sticker.id}
 								sticker={sticker}
 								message={message}
-									shouldAnimate={shouldAnimate}
-									interactionHandlers={interactionHandlers}
 								handleDelete={onDelete}
 								data-flx="channel.message-attachments.forwarded-message-content.sticker-item"
 							/>
@@ -447,23 +442,21 @@ export const ForwardedMessageContent = observer(
 			</div>
 		</div>
 	);
-	},
+});
-);
 
 interface StickerItemProps {
 	sticker: MessageStickerItem;
 	message: Message;
-	shouldAnimate: boolean;
-	interactionHandlers: Record<string, unknown>;
 	sourceChannel?: Channel | null;
 	handleDelete?: (bypassConfirm?: boolean) => void;
 }
 
-const StickerItem = observer(
+const StickerItem = observer(({sticker, message, sourceChannel, handleDelete}: StickerItemProps) => {
-	({sticker, message, shouldAnimate, interactionHandlers, sourceChannel, handleDelete}: StickerItemProps) => {
+	const {shouldAnimate, interactionHandlers} = useStickerAnimation({isAnimated: sticker.animated});
 	const stickerUrl = AvatarUtils.getStickerURL({
 		id: sticker.id,
 		animated: shouldAnimate,
+		isAnimatable: sticker.animated,
 		size: 320,
 	});
 	const stickerRecord = Sticker.getStickerById(sticker.id);
@@ -570,15 +563,13 @@ const StickerItem = observer(
 			</FocusRing>
 		</Tooltip>
 	);
-	},
+});
-);
 export const MessageAttachments = observer(() => {
 	const {channel, message, handleDelete, previewContext, onPopoutToggle, suppressMessageActions} =
 		useMessageViewContext();
 	const isPreview = Boolean(previewContext);
 	const reactionsIsPreview = isPreview || Boolean(suppressMessageActions);
 	const reactions = useMessageReactionsSnapshot(message.id);
-	const {shouldAnimate, interactionHandlers} = useStickerAnimation();
 	const spoileredUrlEmbeds = useMemo(() => {
 		const embeddableCodeLinkContent = extractEmbeddableCodeLinkContent(message.content);
 		return {
@@ -593,8 +584,6 @@ export const MessageAttachments = observer(() => {
 				<ForwardedMessageContent
 					message={message}
 					snapshot={message.messageSnapshots[0]}
-					shouldAnimate={shouldAnimate}
-					interactionHandlers={interactionHandlers}
 					onDelete={handleDelete}
 					data-flx="channel.message-attachments.forwarded-message-content"
 				/>
@@ -648,8 +637,6 @@ export const MessageAttachments = observer(() => {
 							key={sticker.id}
 							sticker={sticker}
 							message={message}
-							shouldAnimate={shouldAnimate}
-							interactionHandlers={interactionHandlers}
 							sourceChannel={channel}
 							handleDelete={handleDelete}
 							data-flx="channel.message-attachments.sticker-item"

fluxer_app/src/features/channel/components/ReplyPreview.tsx

@@ -47,13 +47,11 @@ export const ReplyPreview = observer(
 		message,
 		channelId,
 		guildId,
-		animateEmoji,
 		messageDisplayCompact,
 	}: {
 		message: Message;
 		channelId: string;
 		guildId?: string;
-		animateEmoji: boolean;
 		messageDisplayCompact: boolean;
 	}) => {
 		const {i18n} = useLingui();
@@ -63,14 +61,15 @@ export const ReplyPreview = observer(
 		);
 		const {isMessageRevealed} = useCollapsedMessageVisibility();
 		const resolvedGuildId = guildId ?? message.guildId ?? message.messageReference?.guild_id;
+		const referenceChannelId = message.messageReference?.channel_id ?? message.channelId;
 		const jumpToRepliedMessage = useCallback(() => {
 			if (message.messageReference?.message_id) {
-				goToMessage(message.channelId, message.messageReference.message_id, {
+				goToMessage(referenceChannelId, message.messageReference.message_id, {
 					returnToMessageId: message.id,
 					returnChannelId: message.channelId,
 				});
 			}
-		}, [message.channelId, message.id, message.messageReference]);
+		}, [referenceChannelId, message.channelId, message.id, message.messageReference]);
 		if (!message.messageReference) return null;
 		if (resolution.state !== MessageReferenceState.LOADED) {
 			const isDeleted = resolution.state === MessageReferenceState.DELETED;
@@ -253,7 +252,6 @@ export const ReplyPreview = observer(
 										context: MarkdownContext.RESTRICTED_INLINE_REPLY,
 										messageId: referencedMessage.id,
 										channelId,
-										disableAnimatedEmoji: !animateEmoji,
 										mentionChannels: referencedMessage.mentionChannels,
 									}}
 									data-flx="channel.reply-preview.safe-markdown"

fluxer_app/src/features/channel/components/UserMessage.tsx

@@ -2,11 +2,6 @@
 
 import Accessibility from '@app/features/accessibility/state/Accessibility';
 import {SILENT_MENTION} from '@app/features/app/config/I18nDisplayConstants';
-import {
-	getAnimatedMediaPlaybackAllowed,
-	subscribeAnimatedMediaPlaybackChange,
-	useAnimatedMediaPlaybackAllowed,
-} from '@app/features/app/hooks/useAnimatedMediaPlayback';
 import {UserTag} from '@app/features/channel/components/ChannelUserTag';
 import {CompactAuthorPrefix, CompactMessageLayout} from '@app/features/channel/components/CompactMessageLayout';
 import {EditingMessageInput} from '@app/features/channel/components/EditingMessageInput';
@@ -14,7 +9,6 @@ import {isMediaOnlyEmbed} from '@app/features/channel/components/embeds/EmbedRen
 import {MessageAttachments} from '@app/features/channel/components/MessageAttachments';
 import {MessageAuthorInfo} from '@app/features/channel/components/MessageAuthorInfo';
 import {MessageAvatar} from '@app/features/channel/components/MessageAvatar';
-import {shouldAnimateMessageEmojiByDefault} from '@app/features/channel/components/MessageEmojiAnimationUtils';
 import {MessageTimeoutIndicator} from '@app/features/channel/components/MessageTimeoutIndicator';
 import {MessageUsername} from '@app/features/channel/components/MessageUsername';
 import {useMessageViewContext} from '@app/features/channel/components/MessageViewContext';
@@ -55,9 +49,8 @@ import {msg} from '@lingui/core/macro';
 import {Trans, useLingui} from '@lingui/react/macro';
 import {ArrowsClockwiseIcon, BellSlashIcon, EyeIcon, WarningCircleIcon} from '@phosphor-icons/react';
 import {clsx} from 'clsx';
-import {autorun} from 'mobx';
 import {observer} from 'mobx-react-lite';
-import {type MouseEvent, useCallback, useEffect, useMemo, useState} from 'react';
+import {type MouseEvent, useCallback, useMemo} from 'react';
 
 const JUMP_TO_MESSAGE_FROM_SENT_DESCRIPTOR = msg({
 	message: 'Jump to message from {displayName}, sent {formattedDate}',
@@ -86,22 +79,6 @@ const MessageStateToClassName: Record<string, string> = {
 	[MessageStates.FAILED]: styles.messageFailed,
 };
 const CUSTOM_EMOJI_MARKDOWN_PATTERN = /<a?:[a-zA-Z0-9_+-]{2,}:([0-9]+)>/g;
-const getDefaultMessageEmojiAnimationAllowed = (): boolean =>
-	shouldAnimateMessageEmojiByDefault({
-		animateEmojiSetting: UserSettings.getAnimateEmoji(),
-		animatedMediaPlaybackAllowed: getAnimatedMediaPlaybackAllowed(),
-	});
-const setMessageEmojiImagesAnimated = (messageId: string, shouldAnimate: boolean): void => {
-	const emojiImgs = document.querySelectorAll(
-		`img[data-message-id="${messageId}"][data-animated="true"]`,
-	) as NodeListOf<HTMLImageElement>;
-	for (const img of emojiImgs) {
-		const url = new URL(img.src, window.location.origin);
-		url.searchParams.set('animated', shouldAnimate.toString());
-		img.src = url.toString();
-	}
-};
-
 function messageContentCopyBlockProps(content: string): {
 	'data-message-copy-block'?: 'true';
 	'data-message-copy-text'?: string;
@@ -122,8 +99,6 @@ export const UserMessage = observer(() => {
 		previewOverrides,
 		onHeadingActivate,
 	} = useMessageViewContext();
-	const [animateEmoji, setAnimateEmoji] = useState(getDefaultMessageEmojiAnimationAllowed);
-	const animatedMediaPlaybackAllowed = useAnimatedMediaPlaybackAllowed();
 	const isEditing = MessageEdit.isEditing(message.channelId, message.id);
 	const userAuthor = Users.getUser(message.author.id);
 	const author = message.webhookId != null ? message.author : (userAuthor ?? message.author);
@@ -155,6 +130,15 @@ export const UserMessage = observer(() => {
 			}),
 		[message.content],
 	);
+	const markdownOptions = useMemo(
+		() => ({
+			context: MarkdownContext.STANDARD_WITH_JUMBO,
+			messageId: message.id,
+			channelId: message.channelId,
+			mentionChannels: message.mentionChannels,
+		}),
+		[message.id, message.channelId, message.mentionChannels],
+	);
 	const shouldHideContent =
 		UserSettings.getRenderEmbeds() &&
 		message.embeds.length > 0 &&
@@ -312,12 +296,7 @@ export const UserMessage = observer(() => {
 			>
 				<SafeMarkdown
 					content={message.content}
-					options={{
+					options={markdownOptions}
-						context: MarkdownContext.STANDARD_WITH_JUMBO,
-						messageId: message.id,
-						channelId: message.channelId,
-						mentionChannels: message.mentionChannels,
-					}}
 					data-flx="channel.user-message.render-message-content.safe-markdown"
 				/>
 				{(message.editedTimestamp || message.isEditing) &&
@@ -346,6 +325,7 @@ export const UserMessage = observer(() => {
 	}, [
 		shouldShowEditingInput,
 		shouldHideContent,
+		markdownOptions,
 		message,
 		message.content,
 		message.id,
@@ -357,25 +337,6 @@ export const UserMessage = observer(() => {
 		onSubmit,
 		i18n,
 	]);
-	useEffect(() => {
-		if (animateEmoji) return;
-		setMessageEmojiImagesAnimated(message.id, animatedMediaPlaybackAllowed && isHovering);
-	}, [animateEmoji, animatedMediaPlaybackAllowed, isHovering, message.id]);
-	useEffect(() => {
-		const updateDefaultEmojiAnimation = () => {
-			const shouldAnimate = getDefaultMessageEmojiAnimationAllowed();
-			setAnimateEmoji(shouldAnimate);
-			setMessageEmojiImagesAnimated(message.id, shouldAnimate);
-		};
-		const disposer = autorun(() => {
-			updateDefaultEmojiAnimation();
-		});
-		const unsubscribePlayback = subscribeAnimatedMediaPlaybackChange(updateDefaultEmojiAnimation);
-		return () => {
-			disposer();
-			unsubscribePlayback();
-		};
-	}, [message.id]);
 	const renderFailedFooter = useCallback(() => {
 		if (!shouldShowFailedFooter) {
 			return null;
@@ -469,12 +430,7 @@ export const UserMessage = observer(() => {
 						>
 							<SafeMarkdown
 								content={message.content}
-								options={{
+								options={markdownOptions}
-									context: MarkdownContext.STANDARD_WITH_JUMBO,
-									messageId: message.id,
-									channelId: message.channelId,
-									mentionChannels: message.mentionChannels,
-								}}
 								data-flx="channel.user-message.safe-markdown"
 							/>
 						</div>
@@ -523,7 +479,6 @@ export const UserMessage = observer(() => {
 						message={message}
 						channelId={channel.id}
 						guildId={channel.guildId}
-						animateEmoji={animateEmoji}
 						messageDisplayCompact={messageDisplayCompact}
 						data-flx="channel.user-message.reply-preview"
 					/>
@@ -559,17 +514,12 @@ export const UserMessage = observer(() => {
 							>
 								{showMetadata && compactAuthorPrefix}
 								{!shouldHideContent && (
-									<>
 									<SafeMarkdown
 										content={message.content}
-											options={{
+										options={markdownOptions}
-												context: MarkdownContext.STANDARD_WITH_JUMBO,
-												messageId: message.id,
-												channelId: message.channelId,
-												mentionChannels: message.mentionChannels,
-											}}
 										data-flx="channel.user-message.safe-markdown--2"
 									/>
+								)}
 								{(message.editedTimestamp || message.isEditing) &&
 									(message.isEditing ? (
 										<span className={styles.editedLabel} data-flx="channel.user-message.edited-label">
@@ -588,8 +538,6 @@ export const UserMessage = observer(() => {
 											</span>
 										</TimestampWithTooltip>
 									))}
-									</>
-								)}
 							</div>
 						)
 					}
@@ -608,7 +556,6 @@ export const UserMessage = observer(() => {
 					message={message}
 					channelId={channel.id}
 					guildId={channel.guildId}
-					animateEmoji={animateEmoji}
 					messageDisplayCompact={messageDisplayCompact}
 					data-flx="channel.user-message.reply-preview--2"
 				/>
@@ -770,7 +717,12 @@ export const UserMessage = observer(() => {
 								/>
 							</Tooltip>
 						)}
-						{(message.editedTimestamp || message.isEditing) &&
+					</AuthorHeading>
+				)}
+				{shouldHideContent &&
+					!isEditing &&
+					message.content.length > 0 &&
+					(message.editedTimestamp || message.isEditing) &&
 					(message.isEditing ? (
 						<span className={styles.editedLabel} data-flx="channel.user-message.edited-label--3">
 							{' '}
@@ -788,10 +740,9 @@ export const UserMessage = observer(() => {
 							</span>
 						</TimestampWithTooltip>
 					))}
-					</AuthorHeading>
+				<MessageAttachments data-flx="channel.user-message.message-attachments--3" />
-				)}
+				{message.content.length === 0 &&
-				{((!message.content && !isEditing) || (shouldHideContent && !isEditing)) &&
+					!isEditing &&
-					shouldGroup &&
 					(message.editedTimestamp || message.isEditing) &&
 					(message.isEditing ? (
 						<span className={styles.editedLabel} data-flx="channel.user-message.edited-label--5">
@@ -810,7 +761,6 @@ export const UserMessage = observer(() => {
 							</span>
 						</TimestampWithTooltip>
 					))}
-				<MessageAttachments data-flx="channel.user-message.message-attachments--3" />
 				{renderFailedFooter()}
 			</div>
 		</SpoilerSyncProvider>