Show custom emoji first in suggestions

This commit is contained in:
Ajay Bura 2022-07-16 08:14:12 +05:30 committed by Ajay Bura
parent 89eb1334fc
commit 5325485ff3
3 changed files with 65 additions and 47 deletions

View file

@ -203,10 +203,10 @@ function EmojiBoard({ onSelect, searchRef }) {
return;
}
const packs = getRelevantPacks(
initMatrix.matrixClient.getRoom(selectedRoomId),
)
.filter((pack) => pack.usage.indexOf('emoticon') !== -1)
const room = initMatrix.matrixClient.getRoom(selectedRoomId);
if (room) {
const packs = getRelevantPacks(room.client, [room])
.filter((pack) => pack.usage.includes('emoticon'))
.filter((pack) => pack.getEmojis().length !== 0);
// Set an index for each pack so that we know where to jump when the user uses the nav
@ -214,7 +214,9 @@ function EmojiBoard({ onSelect, searchRef }) {
packs[i].packIndex = i;
}
console.log(packs)
setAvailableEmojis(packs);
}
};
const onOpen = () => {
@ -291,7 +293,8 @@ function EmojiBoard({ onSelect, searchRef }) {
<div className="emoji-board__nav-custom">
{
availableEmojis.map((pack) => {
const src = initMatrix.matrixClient.mxcUrlToHttp(pack.avatar ?? pack.images[0].mxc);
const src = initMatrix.matrixClient
.mxcUrlToHttp(pack.avatar ?? pack.getEmojis()[0].mxc);
return (
<IconButton
onClick={() => openGroup(recentOffset + pack.packIndex)}

View file

@ -3,50 +3,58 @@ import { emojis } from './emoji';
// https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
class ImagePack {
static parsePack(rawPack, room) {
if (typeof rawPack.images === 'undefined') {
static parsePack(packContent, room) {
if (packContent.images === undefined) {
return null;
}
const pack = rawPack.pack ?? {};
const pack = packContent.pack ?? {};
const displayName = pack.display_name ?? (room ? room.name : undefined);
const avatar = pack.avatar_url ?? (room ? room.getMxcAvatarUrl() : undefined);
const usage = pack.usage ?? ['emoticon', 'sticker'];
const displayName = pack.display_name ?? room?.name ?? undefined;
const avatar = pack.avatar_url ?? room?.getMxcAvatarUrl() ?? undefined;
const packUsage = pack.usage ?? ['emoticon', 'sticker'];
const { attribution } = pack;
const images = Object.entries(rawPack.images).flatMap((e) => {
const data = e[1];
const shortcode = e[0];
const emoticons = [];
const stickers = [];
Object.entries(packContent.images).forEach(([shortcode, data]) => {
const mxc = data.url;
const body = data.body ?? shortcode;
const usage = data.usage ?? packUsage;
const { info } = data;
const usage_ = data.usage ?? usage;
if (mxc) {
return [{
shortcode, mxc, body, info, usage: usage_,
}];
if (!mxc) return;
const image = {
shortcode, mxc, body, usage, info,
};
if (usage.includes('emoticon')) {
emoticons.push(image);
}
if (usage.includes('sticker')) {
stickers.push(image);
}
return [];
});
return new ImagePack(displayName, avatar, usage, attribution, images);
return new ImagePack(displayName, avatar, packUsage, attribution, emoticons, stickers);
}
constructor(displayName, avatar, usage, attribution, images) {
constructor(displayName, avatar, usage, attribution, emoticons, stickers) {
this.displayName = displayName;
this.avatar = avatar;
this.usage = usage;
this.attribution = attribution;
this.images = images;
this.emoticons = emoticons;
this.stickers = stickers;
}
getEmojis() {
return this.images.filter((i) => i.usage.indexOf('emoticon') !== -1);
return this.emoticons;
}
getStickers() {
return this.images.filter((i) => i.usage.indexOf('sticker') !== -1);
return this.stickers;
}
}
@ -57,11 +65,11 @@ function getUserImagePack(mx) {
}
const userImagePack = ImagePack.parsePack(accountDataEmoji.event.content);
if (userImagePack) userImagePack.displayName ??= 'Your Emoji';
if (userImagePack) userImagePack.displayName ??= 'Personal Emoji';
return userImagePack;
}
function getPacksInRoom(room) {
function getRoomImagePacks(room) {
const packs = room.currentState.getStateEvents('im.ponies.room_emotes');
return packs
@ -69,18 +77,23 @@ function getPacksInRoom(room) {
.filter((p) => p !== null);
}
function getRelevantPacks(room) {
return [].concat(
getUserImagePack(room.client) ?? [],
getPacksInRoom(room),
);
/**
* @param {MatrixClient} mx Provide if you want to include user personal pack
* @param {Room[]} rooms Provide rooms if you want to include rooms pack
* @returns {ImagePack[]} packs
*/
function getRelevantPacks(mx, rooms) {
const userPack = mx ? getUserImagePack(mx) : [];
const roomsPack = rooms?.flatMap(getRoomImagePacks) ?? [];
return [].concat(userPack, roomsPack);
}
function getShortcodeToEmoji(room) {
const allEmoji = new Map();
emojis.forEach((emoji) => {
if (emoji.shortcodes.constructor.name === 'Array') {
if (Array.isArray(emoji.shortcodes)) {
emoji.shortcodes.forEach((shortcode) => {
allEmoji.set(shortcode, emoji);
});
@ -89,7 +102,7 @@ function getShortcodeToEmoji(room) {
}
});
getRelevantPacks(room).reverse()
getRelevantPacks(room.client, [room])
.flatMap((pack) => pack.getEmojis())
.forEach((emoji) => {
allEmoji.set(emoji.shortcode, emoji);
@ -101,7 +114,7 @@ function getShortcodeToEmoji(room) {
function getShortcodeToCustomEmoji(room) {
const allEmoji = new Map();
getRelevantPacks(room).reverse()
getRelevantPacks(room.client, [room])
.flatMap((pack) => pack.getEmojis())
.forEach((emoji) => {
allEmoji.set(emoji.shortcode, emoji);
@ -112,18 +125,16 @@ function getShortcodeToCustomEmoji(room) {
function getEmojiForCompletion(room) {
const allEmoji = new Map();
getRelevantPacks(room).reverse()
getRelevantPacks(room.client, [room])
.flatMap((pack) => pack.getEmojis())
.forEach((emoji) => {
allEmoji.set(emoji.shortcode, emoji);
});
return emojis.filter((e) => !allEmoji.has(e.shortcode))
.concat(Array.from(allEmoji.values()));
return Array.from(allEmoji.values()).concat(emojis.filter((e) => !allEmoji.has(e.shortcode)));
}
export {
getUserImagePack,
getShortcodeToEmoji, getShortcodeToCustomEmoji,
getRelevantPacks, getEmojiForCompletion,
};

View file

@ -21,7 +21,7 @@ import AsyncSearch from '../../../util/AsyncSearch';
import Text from '../../atoms/text/Text';
import ScrollView from '../../atoms/scroll/ScrollView';
import FollowingMembers from '../../molecules/following-members/FollowingMembers';
import { addRecentEmoji } from '../emoji-board/recent';
import { addRecentEmoji, getRecentEmojis } from '../emoji-board/recent';
const commands = [{
name: 'markdown',
@ -214,8 +214,12 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
},
':': () => {
const emojis = getEmojiForCompletion(mx.getRoom(roomId));
const recentEmoji = getRecentEmojis(20);
asyncSearch.setup(emojis, { keys: ['shortcode'], isContain: true, limit: 20 });
setCmd({ prefix, suggestions: emojis.slice(26, 46) });
setCmd({
prefix,
suggestions: recentEmoji.length > 0 ? recentEmoji : emojis.slice(26, 46),
});
},
'@': () => {
const members = mx.getRoom(roomId).getJoinedMembers().map((member) => ({