diff --git a/app/soapbox/components/status_content.js b/app/soapbox/components/status_content.js index 5aa79645e..468f158f0 100644 --- a/app/soapbox/components/status_content.js +++ b/app/soapbox/components/status_content.js @@ -9,18 +9,10 @@ import classnames from 'classnames'; import Icon from 'soapbox/components/icon'; import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { addGreentext } from 'soapbox/utils/greentext'; +import { justEmojis } from 'soapbox/utils/rich_content'; const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) - -const justEmojis = (node, limit = 10) => { - if (!node) return false; - if (node.textContent.replaceAll(' ', '') !== '') return false; - const emojis = [...node.querySelectorAll('img.emojione')]; - if (emojis.length > limit) return false; - const images = [...node.querySelectorAll('img')]; - if (images.length > emojis.length) return false; - return true; -}; +const BIG_EMOJI_LIMIT = 10; const mapStateToProps = state => ({ greentext: getSoapboxConfig(state).get('greentext'), @@ -98,10 +90,16 @@ class StatusContent extends React.PureComponent { } } + setJustEmojis = () => { + if (this.node && this.state.justEmojis === undefined) { + this.setState({ justEmojis: justEmojis(this.node, BIG_EMOJI_LIMIT) }); + } + } + refresh = () => { this.setCollapse(); this._updateStatusLinks(); - this.setState({ justEmojis: justEmojis(this.node) }); + this.setJustEmojis(); } componentDidMount() { diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js index 426075504..ec15dd7f6 100644 --- a/app/soapbox/features/chats/components/chat_message_list.js +++ b/app/soapbox/features/chats/components/chat_message_list.js @@ -15,6 +15,9 @@ import Bundle from 'soapbox/features/ui/components/bundle'; import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container'; import { initReportById } from 'soapbox/actions/reports'; import { createSelector } from 'reselect'; +import { justEmojis } from 'soapbox/utils/rich_content'; + +const BIG_EMOJI_LIMIT = 1; const messages = defineMessages({ today: { id: 'chats.dividers.today', defaultMessage: 'Today' }, @@ -120,6 +123,10 @@ class ChatMessageList extends ImmutablePureComponent { link.setAttribute('rel', 'ugc nofollow noopener'); link.setAttribute('target', '_blank'); }); + + if (justEmojis(c, BIG_EMOJI_LIMIT)) { + c.classList.add('chat-message__bubble--onlyEmoji'); + } } isNearBottom = () => { diff --git a/app/soapbox/utils/rich_content.js b/app/soapbox/utils/rich_content.js new file mode 100644 index 000000000..bbafbac78 --- /dev/null +++ b/app/soapbox/utils/rich_content.js @@ -0,0 +1,10 @@ +// Returns `true` if the node contains only emojis, up to a limit +export const justEmojis = (node, limit = 1) => { + if (!node) return false; + if (node.textContent.replaceAll(' ', '') !== '') return false; + const emojis = [...node.querySelectorAll('img.emojione')]; + if (emojis.length > limit) return false; + const images = [...node.querySelectorAll('img')]; + if (images.length > emojis.length) return false; + return true; +}; diff --git a/app/styles/chats.scss b/app/styles/chats.scss index bd5d25318..61f9a1169 100644 --- a/app/styles/chats.scss +++ b/app/styles/chats.scss @@ -163,6 +163,15 @@ pointer-events: all; } } + + &--onlyEmoji { + background: transparent; + + img.emojione { + width: 36px !important; + height: 36px !important; + } + } } &--me .chat-message__bubble {