diff --git a/src/components/custom-emoji.jsx b/src/components/custom-emoji.jsx new file mode 100644 index 0000000..2c8d9a0 --- /dev/null +++ b/src/components/custom-emoji.jsx @@ -0,0 +1,17 @@ +export default function CustomEmoji({ staticUrl, alt, url }) { + return ( + + + {alt} + + ); +} diff --git a/src/components/emoji-text.jsx b/src/components/emoji-text.jsx index 752a745..0241d4a 100644 --- a/src/components/emoji-text.jsx +++ b/src/components/emoji-text.jsx @@ -1,5 +1,7 @@ import { memo } from 'preact/compat'; +import CustomEmoji from './custom-emoji'; + function EmojiText({ text, emojis }) { if (!text) return ''; if (!emojis?.length) return text; @@ -12,21 +14,7 @@ function EmojiText({ text, emojis }) { const emoji = emojis.find((e) => e.shortcode === word); if (emoji) { const { url, staticUrl } = emoji; - return ( - - - {word} - - ); + return ; } return word; }); diff --git a/src/components/notification.jsx b/src/components/notification.jsx index 0f53ed6..a43aa18 100644 --- a/src/components/notification.jsx +++ b/src/components/notification.jsx @@ -7,6 +7,7 @@ import store from '../utils/store'; import useTruncated from '../utils/useTruncated'; import Avatar from './avatar'; +import CustomEmoji from './custom-emoji'; import FollowRequestButtons from './follow-request-buttons'; import Icon from './icon'; import Link from './link'; @@ -45,6 +46,24 @@ admin.sign_up = Someone signed up (optionally sent to admins) admin.report = A new report has been filed */ +function emojiText(emoji, emoji_url) { + let url; + let staticUrl; + if (typeof emoji_url === 'string') { + url = emoji_url; + } else { + url = emoji_url?.url; + staticUrl = emoji_url?.staticUrl; + } + return url ? ( + <> + reacted to your post with{' '} + + + ) : ( + `reacted to your post with ${emoji}.` + ); +} const contentText = { mention: 'mentioned you in their post.', status: 'published a post.', @@ -67,8 +86,8 @@ const contentText = { 'admin.sign_up': 'signed up.', 'admin.report': (targetAccount) => <>reported {targetAccount}, severed_relationships: (name) => `Relationships with ${name} severed.`, - emoji_reaction: (emoji) => `reacted to your post with ${emoji}.`, - 'pleroma:emoji_reaction': (emoji) => `reacted to your post with ${emoji}.`, + emoji_reaction: emojiText, + 'pleroma:emoji_reaction': emojiText, }; // account_suspension, domain_block, user_domain_block @@ -156,7 +175,14 @@ function Notification({ (type === 'emoji_reaction' || type === 'pleroma:emoji_reaction') && notification.emoji ) { - text = text(notification.emoji); + const emojiURL = + notification.emoji_url || // This is string + status?.emojis?.find?.( + (emoji) => + emoji?.shortcode === + notification.emoji.replace(/^:/, '').replace(/:$/, ''), + ); // Emoji object instead of string + text = text(notification.emoji, emojiURL); } else if (count) { text = text(count); } diff --git a/src/components/status.css b/src/components/status.css index 5dd3c6e..47976cf 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -1753,6 +1753,13 @@ a.card:is(:hover, :focus):visited { margin-left: calc(-50px - 16px); } +/* EMOJI REACTIONS */ + +.status.large .emoji-reactions { + cursor: default; + margin-left: calc(-50px - 16px); +} + /* ACTIONS */ .status .actions { diff --git a/src/components/status.jsx b/src/components/status.jsx index beacb6a..2cb54af 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -24,7 +24,7 @@ import { useHotkeys } from 'react-hotkeys-hook'; import { useLongPress } from 'use-long-press'; import { useSnapshot } from 'valtio'; -import AccountBlock from '../components/account-block'; +import CustomEmoji from '../components/custom-emoji'; import EmojiText from '../components/emoji-text'; import Loader from '../components/loader'; import Menu2 from '../components/menu2'; @@ -241,6 +241,8 @@ function Status({ _deleted, _pinned, // _filtered, + // Non-Mastodon + emojiReactions, } = status; const currentAccount = useMemo(() => { @@ -1929,6 +1931,46 @@ function Status({ )} + {!!emojiReactions?.length && ( +
+ {emojiReactions.map((emojiReaction) => { + const { name, count, me } = emojiReaction; + const isShortCode = /^:.+?:$/.test(name); + if (isShortCode) { + const emoji = emojis.find( + (e) => + e.shortcode === + name.replace(/^:/, '').replace(/:$/, ''), + ); + if (emoji) { + return ( + + + {count} + + ); + } + } + return ( + + {name} {count} + + ); + })} +
+ )}