diff --git a/src/app/organisms/emoji-board/EmojiBoard.jsx b/src/app/organisms/emoji-board/EmojiBoard.jsx
index a161acce..13e393f5 100644
--- a/src/app/organisms/emoji-board/EmojiBoard.jsx
+++ b/src/app/organisms/emoji-board/EmojiBoard.jsx
@@ -203,18 +203,20 @@ function EmojiBoard({ onSelect, searchRef }) {
return;
}
- const packs = getRelevantPacks(
- initMatrix.matrixClient.getRoom(selectedRoomId),
- )
- .filter((pack) => pack.usage.indexOf('emoticon') !== -1)
- .filter((pack) => pack.getEmojis().length !== 0);
+ 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
- for (let i = 0; i < packs.length; i += 1) {
- packs[i].packIndex = i;
+ // Set an index for each pack so that we know where to jump when the user uses the nav
+ for (let i = 0; i < packs.length; i += 1) {
+ packs[i].packIndex = i;
+ }
+
+ console.log(packs)
+ setAvailableEmojis(packs);
}
-
- setAvailableEmojis(packs);
};
const onOpen = () => {
@@ -291,7 +293,8 @@ function EmojiBoard({ onSelect, searchRef }) {
{
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 (
openGroup(recentOffset + pack.packIndex)}
diff --git a/src/app/organisms/emoji-board/custom-emoji.js b/src/app/organisms/emoji-board/custom-emoji.js
index 9b949626..46685f2d 100644
--- a/src/app/organisms/emoji-board/custom-emoji.js
+++ b/src/app/organisms/emoji-board/custom-emoji.js
@@ -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,
};
diff --git a/src/app/organisms/room/RoomViewCmdBar.jsx b/src/app/organisms/room/RoomViewCmdBar.jsx
index 5bbc0aae..b8e45faf 100644
--- a/src/app/organisms/room/RoomViewCmdBar.jsx
+++ b/src/app/organisms/room/RoomViewCmdBar.jsx
@@ -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) => ({