Use jumbo emoji for short emoji-only messages (#207)

* Display messages containing only <7 emoji bigger

* Amending PR: Address mentioned concerns

This fixes several concerns raised during the PR review process.  A summary of the changes
implemented is below:
- Size jumbo emoji using the text-h1 class, instead of hardcoding a size
- Increase the emoji limit to 10
- Re-wrap m.text messages in a p tag, fixing a bug where newlines were lost
This commit is contained in:
Emi 2021-12-26 23:54:07 -05:00 committed by GitHub
parent 9854f4eb2d
commit 6ff339b552
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 3 deletions

View file

@ -172,13 +172,42 @@ const MessageBody = React.memo(({
// if body is not string it is a React element. // if body is not string it is a React element.
if (typeof body !== 'string') return <div className="message__body">{body}</div>; if (typeof body !== 'string') return <div className="message__body">{body}</div>;
const content = isCustomHTML let content = isCustomHTML
? twemojify(sanitizeCustomHtml(body), undefined, true, false) ? twemojify(sanitizeCustomHtml(body), undefined, true, false)
: <p>{twemojify(body, undefined, true)}</p>; : twemojify(body, undefined, true);
// Determine if this message should render with large emojis
// Criteria:
// - Contains only emoji
// - Contains no more than 10 emoji
let emojiOnly = false;
if (content.type === 'img') {
// If this messages contains only a single (inline) image
emojiOnly = true;
} else if (content.constructor.name === 'Array') {
// Otherwise, it might be an array of images / texb
// Count the number of emojis
const nEmojis = content.filter((e) => e.type === 'img').length;
// Make sure there's no text besides whitespace
if (nEmojis <= 10 && content.every((element) => (
(typeof element === 'object' && element.type === 'img')
|| (typeof element === 'string' && /^\s*$/g.test(element))
))) {
emojiOnly = true;
}
}
if (!isCustomHTML) {
// If this is a plaintext message, wrap it in a <p> element (automatically applying
// white-space: pre-wrap) in order to preserve newlines
content = (<p>{content}</p>);
}
return ( return (
<div className="message__body"> <div className="message__body">
<div className="text text-b1"> <div className={`text ${emojiOnly ? 'text-h1' : 'text-b1'}`}>
{ msgType === 'm.emote' && ( { msgType === 'm.emote' && (
<> <>
{'* '} {'* '}

View file

@ -198,6 +198,7 @@
opacity: 0; opacity: 0;
} }
} }
.data-mx-spoiler--visible { .data-mx-spoiler--visible {
background-color: var(--bg-surface-active) !important; background-color: var(--bg-surface-active) !important;
color: inherit !important; color: inherit !important;