Show global image packs in emoji picker

src/app/organisms/emoji-board/custom-emoji.js

@@ -3,8 +3,8 @@ import { emojis } from './emoji';
 // https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
 
 class ImagePack {
-  static parsePack(packContent, room) {
+  static parsePack(eventId, packContent, room) {
-    if (packContent.images === undefined) {
+    if (!eventId || typeof packContent?.images !== 'object') {
       return null;
     }
 
@@ -36,10 +36,25 @@ class ImagePack {
       }
     });
 
-    return new ImagePack(displayName, avatar, packUsage, attribution, emoticons, stickers);
+    return new ImagePack(eventId, {
+      displayName,
+      avatar,
+      usage: packUsage,
+      attribution,
+      emoticons,
+      stickers,
+    });
   }
 
-  constructor(displayName, avatar, usage, attribution, emoticons, stickers) {
+  constructor(id, {
+    displayName,
+    avatar,
+    usage,
+    attribution,
+    emoticons,
+    stickers,
+  }) {
+    this.id = id;
     this.displayName = displayName;
     this.avatar = avatar;
     this.usage = usage;
@@ -58,35 +73,60 @@ class ImagePack {
   }
 }
 
+function getGlobalImagePacks(mx) {
+  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent();
+  if (typeof globalContent !== 'object') return null;
+
+  const { rooms } = globalContent;
+  if (typeof rooms !== 'object') return null;
+
+  const roomIds = Object.keys(rooms);
+
+  const packs = roomIds.flatMap((roomId) => {
+    if (typeof rooms[roomId] !== 'object') return [];
+    const room = mx.getRoom(roomId);
+    const stateKeys = Object.keys(rooms[roomId]);
+
+    return stateKeys.map((stateKey) => {
+      const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+      return ImagePack.parsePack(data?.getId(), data?.getContent(), room);
+    }).filter((pack) => pack !== null);
+  });
+
+  return packs;
+}
+
 function getUserImagePack(mx) {
   const accountDataEmoji = mx.getAccountData('im.ponies.user_emotes');
   if (!accountDataEmoji) {
     return null;
   }
 
-  const userImagePack = ImagePack.parsePack(accountDataEmoji.event.content);
+  const userImagePack = ImagePack.parsePack(mx.getUserId(), accountDataEmoji.event.content);
   if (userImagePack) userImagePack.displayName ??= 'Personal Emoji';
   return userImagePack;
 }
 
 function getRoomImagePacks(room) {
-  const packs = room.currentState.getStateEvents('im.ponies.room_emotes');
+  const dataEvents = room.currentState.getStateEvents('im.ponies.room_emotes');
 
-  return packs
+  return dataEvents
-    .map((p) => ImagePack.parsePack(p.event.content, room))
+    .map((data) => ImagePack.parsePack(data.getId(), data.getContent(), room))
-    .filter((p) => p !== null);
+    .filter((pack) => pack !== null);
 }
 
 /**
- * @param {MatrixClient} mx Provide if you want to include user personal pack
+ * @param {MatrixClient} mx Provide if you want to include user personal/global 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 globalPacks = mx ? getGlobalImagePacks(mx) : [];
+  const globalPackIds = new Set(globalPacks.map((pack) => pack.id));
   const roomsPack = rooms?.flatMap(getRoomImagePacks) ?? [];
 
-  return [].concat(userPack, roomsPack);
+  return [].concat(userPack, globalPacks, roomsPack.filter((pack) => !globalPackIds.has(pack.id)));
 }
 
 function getShortcodeToEmoji(room) {