Merge branch 'big-emoji' into 'develop'

Display big emojis when there's no other content

See merge request soapbox-pub/soapbox-fe!589

app/soapbox/components/status_content.js

@@ -9,8 +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 { onlyEmoji } from 'soapbox/utils/rich_content';
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
+const BIG_EMOJI_LIMIT = 10;
 
 const mapStateToProps = state => ({
   greentext: getSoapboxConfig(state).get('greentext'),
@@ -88,14 +90,24 @@ class StatusContent extends React.PureComponent {
     }
   }
 
-  componentDidMount() {
+  setOnlyEmoji = () => {
+    if (this.node && this.state.onlyEmoji === undefined) {
+      this.setState({ onlyEmoji: onlyEmoji(this.node, BIG_EMOJI_LIMIT) });
+    }
+  }
+
+  refresh = () => {
     this.setCollapse();
     this._updateStatusLinks();
+    this.setOnlyEmoji();
+  }
+
+  componentDidMount() {
+    this.refresh();
   }
 
   componentDidUpdate() {
-    this.setCollapse();
-    this._updateStatusLinks();
+    this.refresh();
   }
 
   onMentionClick = (mention, e) => {
@@ -171,6 +183,7 @@ class StatusContent extends React.PureComponent {
 
   render() {
     const { status } = this.props;
+    const { onlyEmoji } = this.state;
 
     if (status.get('content').length === 0) {
       return null;
@@ -185,6 +198,7 @@ class StatusContent extends React.PureComponent {
       'status__content--with-action': this.props.onClick && this.context.router,
       'status__content--with-spoiler': status.get('spoiler_text').length > 0,
       'status__content--collapsed': this.state.collapsed === true,
+      'status__content--big': onlyEmoji,
     });
 
     if (isRtl(status.get('search_index'))) {
@@ -250,7 +264,9 @@ class StatusContent extends React.PureComponent {
         <div
           tabIndex='0'
           ref={this.setRef}
-          className='status__content'
+          className={classnames('status__content', {
+            'status__content--big': onlyEmoji,
+          })}
           style={directionStyle}
           dangerouslySetInnerHTML={content}
           lang={status.get('language')}

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 { onlyEmoji } from 'soapbox/utils/rich_content';
+
+const BIG_EMOJI_LIMIT = 1;
 
 const messages = defineMessages({
   today: { id: 'chats.dividers.today', defaultMessage: 'Today' },
@@ -120,6 +123,12 @@ class ChatMessageList extends ImmutablePureComponent {
       link.setAttribute('rel', 'ugc nofollow noopener');
       link.setAttribute('target', '_blank');
     });
+
+    if (onlyEmoji(c, BIG_EMOJI_LIMIT)) {
+      c.classList.add('chat-message__bubble--onlyEmoji');
+    } else {
+      c.classList.remove('chat-message__bubble--onlyEmoji');
+    }
   }
 
   isNearBottom = () => {

app/soapbox/utils/rich_content.js

@@ -0,0 +1,11 @@
+// Returns `true` if the node contains only emojis, up to a limit
+export const onlyEmoji = (node, limit = 1) => {
+  if (!node) return false;
+  if (node.textContent.replaceAll(' ', '') !== '') return false;
+  const emojis = Array.from(node.querySelectorAll('img.emojione'));
+  if (emojis.length === 0) return false;
+  if (emojis.length > limit) return false;
+  const images = Array.from(node.querySelectorAll('img'));
+  if (images.length > emojis.length) return false;
+  return true;
+};

app/styles/chats.scss

@@ -163,6 +163,15 @@
         pointer-events: all;
       }
     }
+
+    &--onlyEmoji {
+      background: transparent !important;
+
+      img.emojione {
+        width: 36px !important;
+        height: 36px !important;
+      }
+    }
   }
 
   &--me .chat-message__bubble {

app/styles/components/detailed-status.scss

@@ -36,6 +36,13 @@
       line-height: 24px;
       margin: -1px 0 0;
     }
+
+    &--big {
+      img.emojione {
+        width: 56px;
+        height: 56px;
+      }
+    }
   }
 
   .video-player,

app/styles/components/status.scss

@@ -66,6 +66,16 @@
     margin: 20px 0;
     display: block;
   }
+
+  &--big {
+    font-size: 32px !important;
+    line-height: normal !important;
+
+    img.emojione {
+      width: 36px;
+      height: 36px;
+    }
+  }
 }
 
 .status__content > ul,