pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-17 13:05:32 +09:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): only track hover on reactions that have an animated emoji (#1899)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-24 12:41:58 +02:00
1 parent 670a3a970e
commit 94bbbd1021
2 files changed
+11 -15
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/features/app/components/shared/MessageReactionsContent.tsx
+5 -2
View File
@@ -4,6 +4,7 @@ import {LongPressable} from '@app/features/app/components/LongPressable';
import styles from '@app/features/app/components/shared/MessageReactionsContent.module.css';
import {useHover} from '@app/features/app/hooks/useHover';
import reactionStyles from '@app/features/channel/components/MessageReactions.module.css';
import {ReactionImage} from '@app/features/messaging/components/ReactionImage';
import {
emojiEquals,
getEmojiName,
@@ -49,6 +50,7 @@ const ReactionFilterButton = observer(
({reaction, isSelected, onSelect, onContextMenu, showTooltip}: ReactionFilterButtonProps) => {
const {i18n} = useLingui();
const [hoverRef, isHovering] = useHover();
const emojiHasAnimatedVariant = reaction.emoji.animated === true;
const emojiName = getEmojiName(reaction.emoji);
const emojiUrl = useEmojiURL({emoji: reaction.emoji, isHovering});
const reactionCountText = plural(
@@ -67,7 +69,7 @@ const ReactionFilterButton = observer(
aria-pressed={isSelected}
onClick={onSelect}
onContextMenu={onContextMenu}
ref={hoverRef}
ref={emojiHasAnimatedVariant ? hoverRef : undefined}
className={clsx(
reactionStyles.reactionButton,
styles.filterButton,
@@ -80,10 +82,11 @@ const ReactionFilterButton = observer(
data-flx="app.message-reactions-content.reaction-filter-button.div"
>
{emojiUrl ? (
<img
<ReactionImage
className={clsx('emoji', reactionStyles.emoji)}
src={emojiUrl}
alt={emojiName}
aria-hidden={true}
draggable={false}
data-flx="app.message-reactions-content.reaction-filter-button.emoji"
/>
fluxer_app/src/features/ui/action_menu/MessageContextMenu.tsx
+6 -13
View File
@@ -4,14 +4,14 @@ import Accessibility from '@app/features/accessibility/state/Accessibility';
import {messageActionMenuItemIds, useMessageActionMenuData} from '@app/features/channel/components/MessageActionMenu';
import {getEffectiveContent, triggerAddReaction} from '@app/features/channel/components/MessageActionUtils';
import {
getQuickReactionEmojiSrc,
REACT_WITH_EMOJI_DESCRIPTOR,
renderQuickReactionEmoji,
useReactionMenuImagePreload,
useReactionSubmenuEmojiSrc,
} from '@app/features/channel/components/QuickReactionsRow';
import type {Channel} from '@app/features/channel/models/Channel';
import EmojiPicker from '@app/features/emoji/state/EmojiPicker';
import type {FlatEmoji} from '@app/features/emoji/types/EmojiTypes';
import {useExpressionImagesPreload} from '@app/features/expressions/utils/ExpressionImageCache';
import {
COPY_LINK_DESCRIPTOR,
COPY_TEXT_DESCRIPTOR,
@@ -126,7 +126,7 @@ interface RemoveReactionsSubmenuProps {
const RemoveReactionsSubmenuItem = observer(
({reaction, channelId, messageId}: {reaction: MessageReaction; channelId: string; messageId: string}) => {
const {i18n} = useLingui();
const emojiUrl = useEmojiURL({emoji: reaction.emoji, size: 32});
const emojiUrl = useEmojiURL({emoji: reaction.emoji});
const label = getEmojiNameWithColons(reaction.emoji);
if (reaction.count <= 0) {
return null;
@@ -188,10 +188,10 @@ const RemoveReactionsSubmenu = observer(({reactions, channelId, messageId}: Remo
RemoveReactionsSubmenu.displayName = 'RemoveReactionsSubmenu';
const AddReactionSubmenuItem = observer(
export const AddReactionSubmenuItem = observer(
({emoji, onSelect}: {emoji: FlatEmoji; onSelect: (emoji: FlatEmoji) => void}) => {
const reactionEmoji = useMemo(() => toReactionEmoji(emoji), [emoji]);
const emojiUrl = useEmojiURL({emoji: reactionEmoji, size: 32});
const emojiUrl = useReactionSubmenuEmojiSrc(emoji);
const label = getEmojiNameWithColons(reactionEmoji);
const renderEmojiPreview = () => {
if (emojiUrl) {
@@ -427,14 +427,7 @@ export const MessageContextMenu: React.FC<MessageContextMenuProps> = observer(
quickReactionCount: 4,
submenuReactionCount: 16,
});
const preloadedReactionImageUrls = useMemo(
() =>
Array.from(
new Set([...quickReactionEmojis, ...submenuReactionEmojis].map((emoji) => getQuickReactionEmojiSrc(emoji))),
),
[quickReactionEmojis, submenuReactionEmojis],
);
useExpressionImagesPreload(preloadedReactionImageUrls);
useReactionMenuImagePreload(quickReactionEmojis, submenuReactionEmojis);
const handleQuickReact = useCallback(
(emoji: FlatEmoji) => {
EmojiPicker.trackEmoji(emoji);