320 lines
10 KiB
TypeScript
320 lines
10 KiB
TypeScript
/*
|
|
* Copyright (C) 2026 Fluxer Contributors
|
|
*
|
|
* This file is part of Fluxer.
|
|
*
|
|
* Fluxer is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* Fluxer is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import * as ModalActionCreators from '@app/actions/ModalActionCreators';
|
|
import {modal} from '@app/actions/ModalActionCreators';
|
|
import * as ReactionActionCreators from '@app/actions/ReactionActionCreators';
|
|
import {ReactionInteractionDisabledModal} from '@app/components/alerts/ReactionInteractionDisabledModal';
|
|
import {EmojiInfoBottomSheet} from '@app/components/bottomsheets/EmojiInfoBottomSheet';
|
|
import {
|
|
createMessageActionHandlers,
|
|
isClientSystemMessage,
|
|
useMessagePermissions,
|
|
} from '@app/components/channel/MessageActionUtils';
|
|
import styles from '@app/components/channel/MessageReactions.module.css';
|
|
import {LongPressable} from '@app/components/LongPressable';
|
|
import {ExpressionPickerSheet} from '@app/components/modals/ExpressionPickerSheet';
|
|
import {EmojiPickerPopout} from '@app/components/popouts/EmojiPickerPopout';
|
|
import {ReactionTooltip} from '@app/components/popouts/ReactionTooltip';
|
|
import FocusRing from '@app/components/uikit/focus_ring/FocusRing';
|
|
import {Popout} from '@app/components/uikit/popout/Popout';
|
|
import {useHover} from '@app/hooks/useHover';
|
|
import type {MessageRecord} from '@app/records/MessageRecord';
|
|
import AccessibilityStore from '@app/stores/AccessibilityStore';
|
|
import KeyboardModeStore from '@app/stores/KeyboardModeStore';
|
|
import MobileLayoutStore from '@app/stores/MobileLayoutStore';
|
|
import {getEmojiName, getReactionKey, useEmojiURL} from '@app/utils/ReactionUtils';
|
|
import type {MessageReaction} from '@fluxer/schema/src/domains/message/MessageResponseSchemas';
|
|
import {useLingui} from '@lingui/react/macro';
|
|
import {SmileyIcon} from '@phosphor-icons/react';
|
|
import {clsx} from 'clsx';
|
|
import {AnimatePresence, motion} from 'framer-motion';
|
|
import {observer} from 'mobx-react-lite';
|
|
import {useCallback, useEffect, useRef, useState} from 'react';
|
|
|
|
interface EmojiInfoData {
|
|
id?: string;
|
|
name: string;
|
|
animated?: boolean;
|
|
}
|
|
|
|
const MessageReactionItem = observer(
|
|
({
|
|
message,
|
|
reaction,
|
|
isPreview = false,
|
|
disableInteraction = false,
|
|
}: {
|
|
message: MessageRecord;
|
|
reaction: MessageReaction;
|
|
isPreview?: boolean;
|
|
disableInteraction?: boolean;
|
|
}) => {
|
|
const {t, i18n} = useLingui();
|
|
const [hoverRef, isHovering] = useHover();
|
|
const [prevCount, setPrevCount] = useState(reaction.count);
|
|
const [animationSyncKey, setAnimationSyncKey] = useState(0);
|
|
const [emojiInfoOpen, setEmojiInfoOpen] = useState(false);
|
|
const [selectedEmoji, setSelectedEmoji] = useState<EmojiInfoData | null>(null);
|
|
const [tooltipHovering, setTooltipHovering] = useState(false);
|
|
const isMobile = MobileLayoutStore.isMobileLayout();
|
|
|
|
const handleTooltipAnimationSync = useCallback(() => {
|
|
setAnimationSyncKey((prev) => prev + 1);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (prevCount !== reaction.count) {
|
|
setPrevCount(reaction.count);
|
|
}
|
|
}, [reaction.count, prevCount]);
|
|
|
|
const handleClick = () => {
|
|
if (disableInteraction) {
|
|
return;
|
|
}
|
|
|
|
if (isPreview) {
|
|
ModalActionCreators.push(modal(() => <ReactionInteractionDisabledModal />));
|
|
return;
|
|
}
|
|
|
|
if (reaction.me) {
|
|
ReactionActionCreators.removeReaction(i18n, message.channelId, message.id, reaction.emoji);
|
|
} else {
|
|
ReactionActionCreators.addReaction(i18n, message.channelId, message.id, reaction.emoji);
|
|
}
|
|
};
|
|
|
|
const handleLongPress = () => {
|
|
if (isPreview || disableInteraction) {
|
|
return;
|
|
}
|
|
setSelectedEmoji({
|
|
id: reaction.emoji.id ?? undefined,
|
|
name: reaction.emoji.name,
|
|
animated: reaction.emoji.animated,
|
|
});
|
|
setEmojiInfoOpen(true);
|
|
};
|
|
|
|
const handleCloseEmojiInfo = useCallback(() => {
|
|
setEmojiInfoOpen(false);
|
|
setSelectedEmoji(null);
|
|
}, []);
|
|
|
|
const emojiName = getEmojiName(reaction.emoji);
|
|
const emojiUrl = useEmojiURL({emoji: reaction.emoji, isHovering: isHovering || tooltipHovering});
|
|
const isUnicodeEmoji = reaction.emoji.id == null;
|
|
|
|
const variants = {
|
|
up: {y: -20, opacity: 0},
|
|
down: {y: 20, opacity: 0},
|
|
center: {y: 0, opacity: 1},
|
|
};
|
|
|
|
const reactionCountText = reaction.count === 1 ? t`${reaction.count} reaction` : t`${reaction.count} reactions`;
|
|
const actionText = reaction.me ? t`press to remove reaction` : t`press to add reaction`;
|
|
const ariaLabel = t`${emojiName}: ${reactionCountText}, ${actionText}`;
|
|
|
|
const buttonContent = (
|
|
<FocusRing offset={-2}>
|
|
<button
|
|
type="button"
|
|
className={styles.reactionButton}
|
|
aria-label={ariaLabel}
|
|
aria-pressed={reaction.me}
|
|
disabled={disableInteraction}
|
|
onClick={handleClick}
|
|
>
|
|
<div className={styles.reactionInner}>
|
|
{emojiUrl ? (
|
|
<img src={emojiUrl} alt={emojiName} draggable={false} className={clsx('emoji', styles.emoji)} />
|
|
) : isUnicodeEmoji ? (
|
|
<span className={clsx('emoji', styles.emoji)}>{reaction.emoji.name}</span>
|
|
) : null}
|
|
<div className={styles.countWrapper}>
|
|
<AnimatePresence initial={false}>
|
|
<motion.div
|
|
key={reaction.count}
|
|
initial={reaction.count > prevCount ? 'up' : 'down'}
|
|
animate="center"
|
|
exit={reaction.count > prevCount ? 'down' : 'up'}
|
|
variants={variants}
|
|
transition={{duration: AccessibilityStore.useReducedMotion ? 0 : 0.2}}
|
|
>
|
|
{reaction.count}
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</FocusRing>
|
|
);
|
|
|
|
if (isMobile) {
|
|
return (
|
|
<LongPressable
|
|
className={clsx(styles.reactionContainer, reaction.me && styles.reactionMe)}
|
|
onLongPress={handleLongPress}
|
|
>
|
|
{buttonContent}
|
|
<EmojiInfoBottomSheet isOpen={emojiInfoOpen} onClose={handleCloseEmojiInfo} emoji={selectedEmoji} />
|
|
</LongPressable>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ReactionTooltip
|
|
message={message}
|
|
reaction={reaction}
|
|
hoveredEmojiUrl={emojiUrl}
|
|
animationSyncKey={animationSyncKey}
|
|
onRequestAnimationSync={handleTooltipAnimationSync}
|
|
onTooltipHoverChange={setTooltipHovering}
|
|
>
|
|
<div className={clsx(styles.reactionContainer, reaction.me && styles.reactionMe)} ref={hoverRef}>
|
|
{buttonContent}
|
|
</div>
|
|
</ReactionTooltip>
|
|
);
|
|
},
|
|
);
|
|
|
|
export const MessageReactions = observer(
|
|
({
|
|
message,
|
|
isPreview = false,
|
|
onPopoutToggle,
|
|
}: {
|
|
message: MessageRecord;
|
|
isPreview?: boolean;
|
|
onPopoutToggle?: (isOpen: boolean) => void;
|
|
}) => {
|
|
const {t, i18n} = useLingui();
|
|
const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
|
|
const addReactionButtonRef = useRef<HTMLButtonElement>(null);
|
|
const permissions = useMessagePermissions(message);
|
|
const handlers = createMessageActionHandlers(message, {i18n});
|
|
const keyboardModeEnabled = KeyboardModeStore.keyboardModeEnabled;
|
|
const isMobileLayout = MobileLayoutStore.isMobileLayout();
|
|
const disableReactionInteraction = isClientSystemMessage(message);
|
|
|
|
const blurReactionTrigger = useCallback(() => {
|
|
if (keyboardModeEnabled) {
|
|
return;
|
|
}
|
|
requestAnimationFrame(() => addReactionButtonRef.current?.blur());
|
|
}, [keyboardModeEnabled]);
|
|
|
|
const handleEmojiPickerToggle = useCallback(
|
|
(open: boolean) => {
|
|
setEmojiPickerOpen(open);
|
|
onPopoutToggle?.(open);
|
|
if (!open) {
|
|
blurReactionTrigger();
|
|
}
|
|
},
|
|
[onPopoutToggle, blurReactionTrigger],
|
|
);
|
|
|
|
const handleEmojiPickerOpen = useCallback(() => handleEmojiPickerToggle(true), [handleEmojiPickerToggle]);
|
|
const handleEmojiPickerClose = useCallback(() => handleEmojiPickerToggle(false), [handleEmojiPickerToggle]);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (emojiPickerOpen) {
|
|
onPopoutToggle?.(false);
|
|
}
|
|
};
|
|
}, [emojiPickerOpen, onPopoutToggle]);
|
|
|
|
const hasReactions = message.reactions.length > 0;
|
|
|
|
return (
|
|
<div className={styles.reactionsGrid}>
|
|
{message.reactions.map((reaction) => (
|
|
<MessageReactionItem
|
|
key={getReactionKey(message.id, reaction.emoji)}
|
|
message={message}
|
|
reaction={reaction}
|
|
isPreview={isPreview}
|
|
disableInteraction={disableReactionInteraction}
|
|
/>
|
|
))}
|
|
{hasReactions &&
|
|
permissions?.canAddReactions &&
|
|
!disableReactionInteraction &&
|
|
!isPreview &&
|
|
(isMobileLayout ? (
|
|
<>
|
|
<FocusRing offset={-2}>
|
|
<button
|
|
ref={addReactionButtonRef}
|
|
type="button"
|
|
className={clsx(styles.addReactionButton, emojiPickerOpen && styles.addReactionButtonActive)}
|
|
aria-label={t`Add Reaction`}
|
|
data-action="message-add-reaction-button"
|
|
onClick={handleEmojiPickerOpen}
|
|
>
|
|
<SmileyIcon size={20} weight="fill" />
|
|
</button>
|
|
</FocusRing>
|
|
<ExpressionPickerSheet
|
|
isOpen={emojiPickerOpen}
|
|
onClose={handleEmojiPickerClose}
|
|
channelId={message.channelId}
|
|
onEmojiSelect={handlers.handleEmojiSelect}
|
|
visibleTabs={['emojis']}
|
|
/>
|
|
</>
|
|
) : (
|
|
<Popout
|
|
render={({onClose}) => (
|
|
<EmojiPickerPopout
|
|
channelId={message.channelId}
|
|
handleSelect={handlers.handleEmojiSelect}
|
|
onClose={onClose}
|
|
/>
|
|
)}
|
|
position="right-start"
|
|
uniqueId={`emoji_picker-reactions-${message.id}`}
|
|
shouldAutoUpdate={false}
|
|
animationType="none"
|
|
onOpen={handleEmojiPickerOpen}
|
|
onClose={handleEmojiPickerClose}
|
|
>
|
|
<FocusRing offset={-2}>
|
|
<button
|
|
ref={addReactionButtonRef}
|
|
type="button"
|
|
className={clsx(styles.addReactionButton, emojiPickerOpen && styles.addReactionButtonActive)}
|
|
aria-label={t`Add Reaction`}
|
|
data-action="message-add-reaction-button"
|
|
>
|
|
<SmileyIcon size={20} weight="fill" />
|
|
</button>
|
|
</FocusRing>
|
|
</Popout>
|
|
))}
|
|
</div>
|
|
);
|
|
},
|
|
);
|