fix(app): only animate stickers that actually have animation (#1963)

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

@@ -31,8 +31,8 @@ interface ChannelStickersAreaProps {
 
 export const ChannelStickersArea: React.FC<ChannelStickersAreaProps> = observer(({channelId, hasAttachments}) => {
 	const {i18n} = useLingui();
-	const {shouldAnimate, interactionHandlers} = useStickerAnimation();
 	const sticker = ChannelSticker.getPendingSticker(channelId);
+	const {shouldAnimate, interactionHandlers} = useStickerAnimation({isAnimated: sticker?.animated ?? false});
 	const [previousSticker, setPreviousSticker] = useState(sticker);
 	useEffect(() => {
 		if (previousSticker && !sticker) {
@@ -62,6 +62,7 @@ export const ChannelStickersArea: React.FC<ChannelStickersAreaProps> = observer(
 	const stickerUrl = AvatarUtils.getStickerURL({
 		id: sticker.id,
 		animated: shouldAnimate,
+		isAnimatable: sticker.animated,
 		size: 320,
 	});
 	return (

fluxer_app/src/features/channel/components/sticker_picker/StickerPickerInspector.tsx

@@ -1,16 +1,32 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import styles from '@app/features/channel/components/EmojiPicker.module.css';
+import {useStickerAnimation} from '@app/features/emoji/hooks/useStickerAnimation';
 import type {GuildSticker} from '@app/features/expressions/models/GuildSticker';
+import * as AvatarUtils from '@app/features/user/utils/AvatarUtils';
 import {observer} from 'mobx-react-lite';
 import type React from 'react';
 
+const INSPECTOR_PREVIEW_SIZE = 320;
+
 interface StickerPickerInspectorProps {
 	hoveredSticker: GuildSticker | null;
 	style?: React.CSSProperties;
 }
 
 export const StickerPickerInspector = observer(({hoveredSticker, style}: StickerPickerInspectorProps) => {
+	const {shouldAnimate} = useStickerAnimation({
+		respectUserSettings: false,
+		isAnimated: hoveredSticker?.animated ?? false,
+	});
+	const previewUrl = hoveredSticker
+		? AvatarUtils.getStickerURL({
+				id: hoveredSticker.id,
+				animated: shouldAnimate,
+				isAnimatable: hoveredSticker.animated,
+				size: INSPECTOR_PREVIEW_SIZE,
+			})
+		: '';
 	return (
 		<div
 			className={styles.inspector}
@@ -20,7 +36,7 @@ export const StickerPickerInspector = observer(({hoveredSticker, style}: Sticker
 			{hoveredSticker && (
 				<>
 					<img
-						src={hoveredSticker.url}
+						src={previewUrl}
 						alt={hoveredSticker.name}
 						className={styles.inspectorEmoji}
 						data-flx="channel.sticker-picker.sticker-picker-inspector.inspector-emoji"