moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'custom-emoji-reacts' into 'develop' 

Support custom emoji reacts

See merge request soapbox-pub/soapbox!2360
This commit is contained in:
marcin mikołajczak 2023-03-19 19:03:53 +00:00
parent 3a94736285 38c99dbc48
commit 4124b85ede
17 changed files with 109 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/soapbox/actions/emoji-reacts.ts
View File

@ -25,7 +25,7 @@ const EMOJI_REACTS_FETCH_FAIL = 'EMOJI_REACTS_FETCH_FAIL';
const noOp = () => () => new Promise(f => f(undefined));
const simpleEmojiReact = (status: Status, emoji: string) =>
const simpleEmojiReact = (status: Status, emoji: string, custom?: string) =>
(dispatch: AppDispatch) => {
const emojiReacts: ImmutableList<ImmutableMap<string, any>> = status.pleroma.get('emoji_reactions') || ImmutableList();
@ -43,7 +43,7 @@ const simpleEmojiReact = (status: Status, emoji: string) =>
if (emoji === '👍') {
dispatch(favourite(status));
} else {
dispatch(emojiReact(status, emoji));
dispatch(emojiReact(status, emoji, custom));
}
}).catch(err => {
console.error(err);
@ -70,11 +70,11 @@ const fetchEmojiReacts = (id: string, emoji: string) =>
});
};
const emojiReact = (status: Status, emoji: string) =>
const emojiReact = (status: Status, emoji: string, custom?: string) =>
(dispatch: AppDispatch, getState: () => RootState) => {
if (!isLoggedIn(getState)) return dispatch(noOp());
dispatch(emojiReactRequest(status, emoji));
dispatch(emojiReactRequest(status, emoji, custom));
return api(getState)
.put(`/api/v1/pleroma/statuses/${status.get('id')}/reactions/${emoji}`)
@ -120,10 +120,11 @@ const fetchEmojiReactsFail = (id: string, error: AxiosError) => ({
error,
});
const emojiReactRequest = (status: Status, emoji: string) => ({
const emojiReactRequest = (status: Status, emoji: string, custom?: string) => ({
type: EMOJI_REACT_REQUEST,
status,
emoji,
custom,
skipLoading: true,
});

3
app/soapbox/components/account.tsx
View File

@ -91,6 +91,7 @@ export interface IAccount {
showEdit?: boolean
approvalStatus?: StatusApprovalStatus
emoji?: string
emojiUrl?: string
note?: string
}
@ -116,6 +117,7 @@ const Account = ({
showEdit = false,
approvalStatus,
emoji,
emojiUrl,
note,
}: IAccount) => {
const overflowRef = useRef<HTMLDivElement>(null);
@ -193,6 +195,7 @@ const Account = ({
<Emoji
className='absolute bottom-0 -right-1.5 h-5 w-5'
emoji={emoji}
src={emojiUrl}
/>
)}
</LinkEl>

9
app/soapbox/components/status-action-bar.tsx
View File

@ -538,7 +538,8 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
allowedEmoji,
).reduce((acc, cur) => acc + cur.get('count'), 0);
const meEmojiReact = getReactForStatus(status, allowedEmoji) as keyof typeof reactMessages | undefined;
const meEmojiReact = getReactForStatus(status, allowedEmoji);
const meEmojiName = meEmojiReact?.get('name') as keyof typeof reactMessages | undefined;
const reactMessages = {
'👍': messages.reactionLike,
@ -550,7 +551,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
'': messages.favourite,
};
const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiReact || ''] || messages.favourite);
const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiName || ''] || messages.favourite);
const menu = _makeMenu(publicStatus);
let reblogIcon = require('@tabler/icons/repeat.svg');
@ -635,7 +636,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
icon={require('@tabler/icons/heart.svg')}
filled
color='accent'
active={Boolean(meEmojiReact)}
active={Boolean(meEmojiName)}
count={emojiReactCount}
emoji={meEmojiReact}
text={withLabels ? meEmojiTitle : undefined}
@ -648,7 +649,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
color='accent'
filled
onClick={handleFavouriteClick}
active={Boolean(meEmojiReact)}
active={Boolean(meEmojiName)}
count={favouriteCount}
text={withLabels ? meEmojiTitle : undefined}
/>

6
app/soapbox/components/status-action-button.tsx
View File

@ -4,6 +4,8 @@ import React from 'react';
import { Text, Icon, Emoji } from 'soapbox/components/ui';
import { shortNumberFormat } from 'soapbox/utils/numbers';
import type { Map as ImmutableMap } from 'immutable';
const COLORS = {
accent: 'accent',
success: 'success',
@ -31,7 +33,7 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
active?: boolean
color?: Color
filled?: boolean
emoji?: string
emoji?: ImmutableMap<string, any>
text?: React.ReactNode
}
@ -42,7 +44,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
if (emoji) {
return (
<span className='flex h-6 w-6 items-center justify-center'>
<Emoji className='h-full w-full p-0.5' emoji={emoji} />
<Emoji className='h-full w-full p-0.5' emoji={emoji.get('name')} src={emoji.get('url')} />
</span>
);
} else {

6
app/soapbox/components/status-reaction-wrapper.tsx
View File

@ -60,9 +60,9 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
}
};
const handleReact = (emoji: string): void => {
const handleReact = (emoji: string, custom?: string): void => {
if (ownAccount) {
dispatch(simpleEmojiReact(status, emoji));
dispatch(simpleEmojiReact(status, emoji, custom));
} else {
handleUnauthorized();
}
@ -71,7 +71,7 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
};
const handleClick: React.EventHandler<React.MouseEvent> = e => {
const meEmojiReact = getReactForStatus(status, soapboxConfig.allowedEmoji) || '👍';
const meEmojiReact = getReactForStatus(status, soapboxConfig.allowedEmoji)?.get('name') || '👍';
if (isUserTouching()) {
if (ownAccount) {

11
app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
View File

@ -5,9 +5,9 @@ import { usePopper } from 'react-popper';
import { Emoji as EmojiComponent, HStack, IconButton } from 'soapbox/components/ui';
import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown';
import { useSoapboxConfig } from 'soapbox/hooks';
import { useFeatures, useSoapboxConfig } from 'soapbox/hooks';
import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
import type { Emoji } from 'soapbox/features/emoji';
interface IEmojiButton {
/** Unicode emoji character. */
@ -39,7 +39,7 @@ const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabInd
interface IEmojiSelector {
onClose?(): void
/** Event handler when an emoji is clicked. */
onReact(emoji: string): void
onReact(emoji: string, custom?: string): void
/** Element that triggers the EmojiSelector Popper */
referenceElement: HTMLElement | null
placement?: Placement
@ -62,6 +62,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
all = true,
}): JSX.Element => {
const soapboxConfig = useSoapboxConfig();
const { customEmojiReacts } = useFeatures();
const [expanded, setExpanded] = useState(false);
@ -102,7 +103,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
};
const handlePickEmoji = (emoji: Emoji) => {
onReact((emoji as NativeEmoji).native);
onReact(emoji.custom ? emoji.id : emoji.native, emoji.custom ? emoji.imageUrl : undefined);
};
useEffect(() => () => {
@ -148,7 +149,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
visible={expanded}
setVisible={setExpanded}
update={update}
withCustom={false}
withCustom={customEmojiReacts}
onPickEmoji={handlePickEmoji}
/>
) : (

4
app/soapbox/components/ui/emoji/emoji.tsx
View File

@ -10,7 +10,7 @@ interface IEmoji extends React.ImgHTMLAttributes<HTMLImageElement> {
/** A single emoji image. */
const Emoji: React.FC<IEmoji> = (props): JSX.Element | null => {
const { emoji, alt, ...rest } = props;
const { emoji, alt, src, ...rest } = props;
const codepoints = toCodePoints(removeVS16s(emoji));
const filename = codepoints.join('-');
@ -20,7 +20,7 @@ const Emoji: React.FC<IEmoji> = (props): JSX.Element | null => {
<img
draggable='false'
alt={alt || emoji}
src={joinPublicPath(`packs/emoji/${filename}.svg`)}
src={src || joinPublicPath(`packs/emoji/${filename}.svg`)}
{...rest}
/>
);

2
app/soapbox/features/emoji/index.ts
View File

@ -28,7 +28,7 @@ export interface CustomEmoji {
export interface NativeEmoji {
id: string
colons: string
custom?: boolean
custom?: false
unified: string
native: string
}

1
app/soapbox/features/notifications/components/notification.tsx
View File

@ -269,6 +269,7 @@ const Notification: React.FC<INotificaton> = (props) => {
return (
<Emoji
emoji={notification.emoji}
src={notification.emoji_url || undefined}
className='h-4 w-4 flex-none'
/>
);

1
app/soapbox/features/status/components/status-interaction-bar.tsx
View File

@ -154,6 +154,7 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
key={i}
className='h-4.5 w-4.5 flex-none'
emoji={e.get('name')}
src={e.get('url')}
/>
);
})}

30
app/soapbox/features/ui/components/modals/reactions-modal.tsx
View File

@ -1,6 +1,6 @@
import clsx from 'clsx';
import { List as ImmutableList } from 'immutable';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions';
@ -17,6 +17,12 @@ const messages = defineMessages({
all: { id: 'reactions.all', defaultMessage: 'All' },
});
interface IAccountWithReaction {
id: string
reaction: string
reactionUrl?: string
}
interface IReactionsModal {
onClose: (string: string) => void
statusId: string
@ -54,7 +60,7 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
reactions!.forEach(reaction => items.push(
{
text: <div className='flex items-center gap-1'>
<Emoji className='h-4 w-4' emoji={reaction.name} />
<Emoji className='h-4 w-4' emoji={reaction.name} src={reaction.url || undefined} />
{reaction.count}
</div>,
action: () => setReaction(reaction.name),
@ -65,17 +71,25 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
return <Tabs items={items} activeItem={reaction || 'all'} />;
};
const accounts = useMemo((): ImmutableList<IAccountWithReaction> | undefined => {
if (!reactions) return;
if (reaction) {
const reactionRecord = reactions.find(({ name }) => name === reaction);
if (reactionRecord) return reactionRecord.accounts.map(account => ({ id: account, reaction: reaction, reactionUrl: reactionRecord.url || undefined })).toList();
} else {
return reactions.map(({ accounts, name, url }) => accounts.map(account => ({ id: account, reaction: name, reactionUrl: url }))).flatten() as ImmutableList<IAccountWithReaction>;
}
}, [reactions, reaction]);
useEffect(() => {
fetchData();
}, []);
const accounts = reactions && (reaction
? reactions.find(({ name }) => name === reaction)?.accounts.map(account => ({ id: account, reaction: reaction }))
: reactions.map(({ accounts, name }) => accounts.map(account => ({ id: account, reaction: name }))).flatten()) as ImmutableList<{ id: string, reaction: string }>;
let body;
if (!accounts) {
if (!accounts || !reactions) {
body = <Spinner />;
} else {
const emptyMessage = <FormattedMessage id='status.reactions.empty' defaultMessage='No one has reacted to this post yet. When someone does, they will show up here.' />;
@ -91,7 +105,7 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
itemClassName='pb-3'
>
{accounts.map((account) =>
<AccountContainer key={`${account.id}-${account.reaction}`} id={account.id} emoji={account.reaction} />,
<AccountContainer key={`${account.id}-${account.reaction}`} id={account.id} emoji={account.reaction} emojiUrl={account.reactionUrl} />,
)}
</ScrollableList>
</>);

1
app/soapbox/normalizers/notification.ts
View File

@ -17,6 +17,7 @@ export const NotificationRecord = ImmutableRecord({
chat_message: null as ImmutableMap<string, any> | string | null, // pleroma:chat_mention
created_at: new Date(),
emoji: null as string | null, // pleroma:emoji_reaction
emoji_url: null as string | null, // pleroma:emoji_reaction
id: '',
status: null as EmbeddedEntity<Status>,
target: null as EmbeddedEntity<Account>, // move

2
app/soapbox/reducers/statuses.ts
View File

@ -242,7 +242,7 @@ export default function statuses(state = initialState, action: AnyAction): State
return state
.updateIn(
[action.status.get('id'), 'pleroma', 'emoji_reactions'],
emojiReacts => simulateEmojiReact(emojiReacts as any, action.emoji),
emojiReacts => simulateEmojiReact(emojiReacts as any, action.emoji, action.custom),
);
case UNEMOJI_REACT_REQUEST:
return state

1
app/soapbox/reducers/user-lists.ts
View File

@ -82,6 +82,7 @@ export const ReactionRecord = ImmutableRecord({
accounts: ImmutableOrderedSet<string>(),
count: 0,
name: '',
url: null as string | null,
});
const ReactionListRecord = ImmutableRecord({

58
app/soapbox/utils/__tests__/emoji-reacts.test.ts
View File

@ -52,15 +52,15 @@ describe('mergeEmojiFavourites', () => {
describe('with existing 👍 reacts', () => {
const emojiReacts = fromJS([
{ 'count': 20, 'me': false, 'name': '👍' },
{ 'count': 15, 'me': false, 'name': '❤' },
{ 'count': 7, 'me': false, 'name': '😯' },
{ 'count': 20, 'me': false, 'name': '👍', 'url': undefined },
{ 'count': 15, 'me': false, 'name': '❤', 'url': undefined },
{ 'count': 7, 'me': false, 'name': '😯', 'url': undefined },
]) as ImmutableList<ImmutableMap<string, any>>;
it('combines 👍 reacts with favourites', () => {
expect(mergeEmojiFavourites(emojiReacts, favouritesCount, favourited)).toEqual(fromJS([
{ 'count': 32, 'me': true, 'name': '👍' },
{ 'count': 15, 'me': false, 'name': '❤' },
{ 'count': 7, 'me': false, 'name': '😯' },
{ 'count': 32, 'me': true, 'name': '👍', 'url': undefined },
{ 'count': 15, 'me': false, 'name': '❤', 'url': undefined },
{ 'count': 7, 'me': false, 'name': '😯', 'url': undefined },
]));
});
});
@ -146,12 +146,12 @@ describe('getReactForStatus', () => {
],
},
}));
expect(getReactForStatus(status, ALLOWED_EMOJI)).toEqual('❤');
expect(getReactForStatus(status, ALLOWED_EMOJI)?.get('name')).toEqual('❤');
});
it('returns a thumbs-up for a favourite', () => {
const status = normalizeStatus(fromJS({ favourites_count: 1, favourited: true }));
expect(getReactForStatus(status)).toEqual('👍');
expect(getReactForStatus(status)?.get('name')).toEqual('👍');
});
it('returns undefined when a status has no reacts (or favourites)', () => {
@ -173,24 +173,36 @@ describe('getReactForStatus', () => {
describe('simulateEmojiReact', () => {
it('adds the emoji to the list', () => {
const emojiReacts = fromJS([
{ 'count': 2, 'me': false, 'name': '👍' },
{ 'count': 2, 'me': false, 'name': '❤' },
{ 'count': 2, 'me': false, 'name': '👍', 'url': undefined },
{ 'count': 2, 'me': false, 'name': '❤', 'url': undefined },
]) as ImmutableList<ImmutableMap<string, any>>;
expect(simulateEmojiReact(emojiReacts, '❤')).toEqual(fromJS([
{ 'count': 2, 'me': false, 'name': '👍' },
{ 'count': 3, 'me': true, 'name': '❤' },
{ 'count': 2, 'me': false, 'name': '👍', 'url': undefined },
{ 'count': 3, 'me': true, 'name': '❤', 'url': undefined },
]));
});
it('creates the emoji if it didn\'t already exist', () => {
const emojiReacts = fromJS([
{ 'count': 2, 'me': false, 'name': '👍' },
{ 'count': 2, 'me': false, 'name': '❤' },
{ 'count': 2, 'me': false, 'name': '👍', 'url': undefined },
{ 'count': 2, 'me': false, 'name': '❤', 'url': undefined },
]) as ImmutableList<ImmutableMap<string, any>>;
expect(simulateEmojiReact(emojiReacts, '😯')).toEqual(fromJS([
{ 'count': 2, 'me': false, 'name': '👍' },
{ 'count': 2, 'me': false, 'name': '❤' },
{ 'count': 1, 'me': true, 'name': '😯' },
{ 'count': 2, 'me': false, 'name': '👍', 'url': undefined },
{ 'count': 2, 'me': false, 'name': '❤', 'url': undefined },
{ 'count': 1, 'me': true, 'name': '😯', 'url': undefined },
]));
});
it('adds a custom emoji to the list', () => {
const emojiReacts = fromJS([
{ 'count': 2, 'me': false, 'name': '👍', 'url': undefined },
{ 'count': 2, 'me': false, 'name': '❤', 'url': undefined },
]) as ImmutableList<ImmutableMap<string, any>>;
expect(simulateEmojiReact(emojiReacts, 'soapbox', 'https://gleasonator.com/emoji/Gleasonator/soapbox.png')).toEqual(fromJS([
{ 'count': 2, 'me': false, 'name': '👍', 'url': undefined },
{ 'count': 2, 'me': false, 'name': '❤', 'url': undefined },
{ 'count': 1, 'me': true, 'name': 'soapbox', 'url': 'https://gleasonator.com/emoji/Gleasonator/soapbox.png' },
]));
});
});
@ -218,4 +230,16 @@ describe('simulateUnEmojiReact', () => {
{ 'count': 2, 'me': false, 'name': '❤' },
]));
});
it ('removes custom emoji from the list', () => {
const emojiReacts = fromJS([
{ 'count': 2, 'me': false, 'name': '👍' },
{ 'count': 2, 'me': false, 'name': '❤' },
{ 'count': 1, 'me': true, 'name': 'soapbox', 'url': 'https://gleasonator.com/emoji/Gleasonator/soapbox.png' },
]) as ImmutableList<ImmutableMap<string, any>>;
expect(simulateUnEmojiReact(emojiReacts, 'soapbox')).toEqual(fromJS([
{ 'count': 2, 'me': false, 'name': '👍' },
{ 'count': 2, 'me': false, 'name': '❤' },
]));
});
});

10
app/soapbox/utils/emoji-reacts.ts
View File

@ -74,19 +74,19 @@ export const reduceEmoji = (emojiReacts: ImmutableList<EmojiReact>, favouritesCo
allowedEmoji,
));
export const getReactForStatus = (status: any, allowedEmoji = ALLOWED_EMOJI): string | undefined => {
export const getReactForStatus = (status: any, allowedEmoji = ALLOWED_EMOJI): EmojiReact | undefined => {
const result = reduceEmoji(
status.pleroma.get('emoji_reactions', ImmutableList()),
status.favourites_count || 0,
status.favourited,
allowedEmoji,
).filter(e => e.get('me') === true)
.getIn([0, 'name']);
.get(0);
return typeof result === 'string' ? result : undefined;
return typeof result?.get('name') === 'string' ? result : undefined;
};
export const simulateEmojiReact = (emojiReacts: ImmutableList<EmojiReact>, emoji: string) => {
export const simulateEmojiReact = (emojiReacts: ImmutableList<EmojiReact>, emoji: string, url?: string) => {
const idx = emojiReacts.findIndex(e => e.get('name') === emoji);
const emojiReact = emojiReacts.get(idx);
@ -94,12 +94,14 @@ export const simulateEmojiReact = (emojiReacts: ImmutableList<EmojiReact>, emoji
return emojiReacts.set(idx, emojiReact.merge({
count: emojiReact.get('count') + 1,
me: true,
url,
}));
} else {
return emojiReacts.push(ImmutableMap({
count: 1,
me: true,
name: emoji,
url,
}));
}
};

5
app/soapbox/utils/features.ts
View File

@ -324,6 +324,11 @@ const getInstanceFeatures = (instance: Instance) => {
v.software === TAKAHE,
]),
/**
* Ability to add non-standard reactions to a status.
*/
customEmojiReacts: v.software === PLEROMA && gte(v.version, '2.5.50'),
/**
* Legacy DMs timeline where messages are displayed chronologically without groupings.
* @see GET /api/v1/timelines/direct