diff --git a/fluxer_app/src/features/channel/components/ChannelStickersArea.tsx b/fluxer_app/src/features/channel/components/ChannelStickersArea.tsx index 049d68977..92a7f22c4 100644 --- a/fluxer_app/src/features/channel/components/ChannelStickersArea.tsx +++ b/fluxer_app/src/features/channel/components/ChannelStickersArea.tsx @@ -31,8 +31,8 @@ interface ChannelStickersAreaProps { export const ChannelStickersArea: React.FC = 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 = observer( const stickerUrl = AvatarUtils.getStickerURL({ id: sticker.id, animated: shouldAnimate, + isAnimatable: sticker.animated, size: 320, }); return ( diff --git a/fluxer_app/src/features/channel/components/sticker_picker/StickerPickerInspector.tsx b/fluxer_app/src/features/channel/components/sticker_picker/StickerPickerInspector.tsx index 01f8f8cd2..12b7939b7 100644 --- a/fluxer_app/src/features/channel/components/sticker_picker/StickerPickerInspector.tsx +++ b/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 (