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) => ({