hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix emoji size in Avatar

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-11-23 12:27:01 +05:30
parent 647d085c5f
commit f897809202
2 changed files with 28 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/atoms/avatar/Avatar.scss
View file

@ -24,7 +24,7 @@
height: var(--av-extra-small); height: var(--av-extra-small);
} }
img { > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;

58
src/app/organisms/room/common.jsx
View file

@ -1,20 +1,16 @@
import React from 'react'; import React from 'react';
import parse from 'html-react-parser'; import { twemojify } from '../../../util/twemojify';
import twemoji from 'twemoji';
import { sanitizeText } from '../../../util/sanitize';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil'; import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';
const getEmojifiedJsx = (username) => parse(twemoji.parse(sanitizeText(username)));
function getTimelineJSXMessages() { function getTimelineJSXMessages() {
return { return {
join(user) { join(user) {
return ( return (
<> <>
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
{' joined the room'} {' joined the room'}
</> </>
); );
@ -23,27 +19,27 @@ function getTimelineJSXMessages() {
const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : ''; const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
return ( return (
<> <>
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
{' left the room'} {' left the room'}
{getEmojifiedJsx(reasonMsg)} {twemojify(reasonMsg)}
</> </>
); );
}, },
invite(inviter, user) { invite(inviter, user) {
return ( return (
<> <>
<b>{getEmojifiedJsx(inviter)}</b> <b>{twemojify(inviter)}</b>
{' invited '} {' invited '}
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
</> </>
); );
}, },
cancelInvite(inviter, user) { cancelInvite(inviter, user) {
return ( return (
<> <>
<b>{getEmojifiedJsx(inviter)}</b> <b>{twemojify(inviter)}</b>
{' canceled '} {' canceled '}
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
{'\'s invite'} {'\'s invite'}
</> </>
); );
@ -51,7 +47,7 @@ function getTimelineJSXMessages() {
rejectInvite(user) { rejectInvite(user) {
return ( return (
<> <>
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
{' rejected the invitation'} {' rejected the invitation'}
</> </>
); );
@ -60,10 +56,10 @@ function getTimelineJSXMessages() {
const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : ''; const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
return ( return (
<> <>
<b>{getEmojifiedJsx(actor)}</b> <b>{twemojify(actor)}</b>
{' kicked '} {' kicked '}
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
{getEmojifiedJsx(reasonMsg)} {twemojify(reasonMsg)}
</> </>
); );
}, },
@ -71,26 +67,26 @@ function getTimelineJSXMessages() {
const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : ''; const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
return ( return (
<> <>
<b>{getEmojifiedJsx(actor)}</b> <b>{twemojify(actor)}</b>
{' banned '} {' banned '}
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
{getEmojifiedJsx(reasonMsg)} {twemojify(reasonMsg)}
</> </>
); );
}, },
unban(actor, user) { unban(actor, user) {
return ( return (
<> <>
<b>{getEmojifiedJsx(actor)}</b> <b>{twemojify(actor)}</b>
{' unbanned '} {' unbanned '}
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
</> </>
); );
}, },
avatarSets(user) { avatarSets(user) {
return ( return (
<> <>
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
{' set the avatar'} {' set the avatar'}
</> </>
); );
@ -98,7 +94,7 @@ function getTimelineJSXMessages() {
avatarChanged(user) { avatarChanged(user) {
return ( return (
<> <>
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
{' changed the avatar'} {' changed the avatar'}
</> </>
); );
@ -106,7 +102,7 @@ function getTimelineJSXMessages() {
avatarRemoved(user) { avatarRemoved(user) {
return ( return (
<> <>
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
{' removed the avatar'} {' removed the avatar'}
</> </>
); );
@ -114,27 +110,27 @@ function getTimelineJSXMessages() {
nameSets(user, newName) { nameSets(user, newName) {
return ( return (
<> <>
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
{' set the display name to '} {' set the display name to '}
<b>{getEmojifiedJsx(newName)}</b> <b>{twemojify(newName)}</b>
</> </>
); );
}, },
nameChanged(user, newName) { nameChanged(user, newName) {
return ( return (
<> <>
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
{' changed the display name to '} {' changed the display name to '}
<b>{getEmojifiedJsx(newName)}</b> <b>{twemojify(newName)}</b>
</> </>
); );
}, },
nameRemoved(user, lastName) { nameRemoved(user, lastName) {
return ( return (
<> <>
<b>{getEmojifiedJsx(user)}</b> <b>{twemojify(user)}</b>
{' removed the display name '} {' removed the display name '}
<b>{getEmojifiedJsx(lastName)}</b> <b>{twemojify(lastName)}</b>
</> </>
); );
}, },
@ -147,7 +143,7 @@ function getUsersActionJsx(roomId, userIds, actionStr) {
if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId)); if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId));
return getUsername(userId); return getUsername(userId);
}; };
const getUserJSX = (userId) => <b>{getEmojifiedJsx(getUserDisplayName(userId))}</b>; const getUserJSX = (userId) => <b>{twemojify(getUserDisplayName(userId))}</b>;
if (!Array.isArray(userIds)) return 'Idle'; if (!Array.isArray(userIds)) return 'Idle';
if (userIds.length === 0) return 'Idle'; if (userIds.length === 0) return 'Idle';
const MAX_VISIBLE_COUNT = 3; const MAX_VISIBLE_COUNT = 3;