improve custom emoji plugin

src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx

@@ -16,14 +16,14 @@ import { createEmoticonElement, moveCursor, replaceWithElement } from '../utils'
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
 import { useRelevantImagePacks } from '../../../hooks/useImagePacks';
 import { IEmoji, emojis } from '../../../plugins/emoji';
-import { ExtendedPackImage, PackUsage } from '../../../plugins/custom-emoji';
 import { useKeyDown } from '../../../hooks/useKeyDown';
 import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { ImageUsage, PackImageReader } from '../../../plugins/custom-emoji';
 
 type EmoticonCompleteHandler = (key: string, shortcode: string) => void;
 
-type EmoticonSearchItem = ExtendedPackImage | IEmoji;
+type EmoticonSearchItem = PackImageReader | IEmoji;
 
 type EmoticonAutocompleteProps = {
   imagePackRooms: Room[];
@@ -52,13 +52,13 @@ export function EmoticonAutocomplete({
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
 
-  const imagePacks = useRelevantImagePacks(mx, PackUsage.Emoticon, imagePackRooms);
+  const imagePacks = useRelevantImagePacks(mx, ImageUsage.Emoticon, imagePackRooms);
   const recentEmoji = useRecentEmoji(mx, 20);
 
   const searchList = useMemo(() => {
     const list: Array<EmoticonSearchItem> = [];
     return list.concat(
-      imagePacks.flatMap((pack) => pack.getImagesFor(PackUsage.Emoticon)),
+      imagePacks.flatMap((pack) => pack.getImages(ImageUsage.Emoticon)),
       emojis
     );
   }, [imagePacks]);

src/app/components/emoji-board/EmojiBoard.tsx

@@ -41,7 +41,6 @@ import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard
 import { useRelevantImagePacks } from '../../hooks/useImagePacks';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../hooks/useRecentEmoji';
-import { ExtendedPackImage, ImagePack, PackUsage } from '../../plugins/custom-emoji';
 import { isUserId, mxcUrlToHttp } from '../../utils/matrix';
 import { editableActiveElement, isIntersectingScrollView, targetFromEvent } from '../../utils/dom';
 import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
@@ -50,6 +49,7 @@ import { useThrottle } from '../../hooks/useThrottle';
 import { addRecentEmoji } from '../../plugins/recent-emoji';
 import { mobileOrTablet } from '../../utils/user-agent';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { ImagePack, ImageUsage, PackImageReader } from '../../plugins/custom-emoji';
 
 const RECENT_GROUP_ID = 'recent_group';
 const SEARCH_GROUP_ID = 'search_group';
@@ -359,16 +359,16 @@ function ImagePackSidebarStack({
 }: {
   mx: MatrixClient;
   packs: ImagePack[];
-  usage: PackUsage;
+  usage: ImageUsage;
   onItemClick: (id: string) => void;
   useAuthentication?: boolean;
 }) {
   const activeGroupId = useAtomValue(activeGroupIdAtom);
   return (
     <SidebarStack>
-      {usage === PackUsage.Emoticon && <SidebarDivider />}
+      {usage === ImageUsage.Emoticon && <SidebarDivider />}
       {packs.map((pack) => {
-        let label = pack.displayName;
+        let label = pack.meta.name;
         if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
         return (
           <SidebarBtn
@@ -384,7 +384,10 @@ function ImagePackSidebarStack({
                 height: toRem(24),
                 objectFit: 'contain',
               }}
-              src={mxcUrlToHttp(mx, pack.getPackAvatarUrl(usage) ?? '', useAuthentication) || pack.avatarUrl}
+              src={
+                mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ||
+                pack.meta.avatar
+              }
               alt={label || 'Unknown Pack'}
             />
           </SidebarBtn>
@@ -462,68 +465,76 @@ export function SearchEmojiGroup({
   tab: EmojiBoardTab;
   label: string;
   id: string;
-  emojis: Array<ExtendedPackImage | IEmoji>;
+  emojis: Array<PackImageReader | IEmoji>;
   useAuthentication?: boolean;
 }) {
   return (
     <EmojiGroup key={id} id={id} label={label}>
       {tab === EmojiBoardTab.Emoji
         ? searchResult.map((emoji) =>
-          'unicode' in emoji ? (
+            'unicode' in emoji ? (
-            <EmojiItem
+              <EmojiItem
-              key={emoji.unicode}
+                key={emoji.unicode}
-              label={emoji.label}
+                label={emoji.label}
-              type={EmojiType.Emoji}
+                type={EmojiType.Emoji}
-              data={emoji.unicode}
+                data={emoji.unicode}
-              shortcode={emoji.shortcode}
+                shortcode={emoji.shortcode}
-            >
+              >
-              {emoji.unicode}
+                {emoji.unicode}
-            </EmojiItem>
+              </EmojiItem>
-          ) : (
+            ) : (
-            <EmojiItem
+              <EmojiItem
-              key={emoji.shortcode}
+                key={emoji.shortcode}
-              label={emoji.body || emoji.shortcode}
+                label={emoji.body || emoji.shortcode}
-              type={EmojiType.CustomEmoji}
+                type={EmojiType.CustomEmoji}
-              data={emoji.url}
+                data={emoji.url}
-              shortcode={emoji.shortcode}
+                shortcode={emoji.shortcode}
-            >
+              >
-              <img
+                <img
-                loading="lazy"
+                  loading="lazy"
-                className={css.CustomEmojiImg}
+                  className={css.CustomEmojiImg}
-                alt={emoji.body || emoji.shortcode}
+                  alt={emoji.body || emoji.shortcode}
-                src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
+                  src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
-              />
+                />
-            </EmojiItem>
+              </EmojiItem>
+            )
           )
-        )
         : searchResult.map((emoji) =>
-          'unicode' in emoji ? null : (
+            'unicode' in emoji ? null : (
-            <StickerItem
+              <StickerItem
-              key={emoji.shortcode}
+                key={emoji.shortcode}
-              label={emoji.body || emoji.shortcode}
+                label={emoji.body || emoji.shortcode}
-              type={EmojiType.Sticker}
+                type={EmojiType.Sticker}
-              data={emoji.url}
+                data={emoji.url}
-              shortcode={emoji.shortcode}
+                shortcode={emoji.shortcode}
-            >
+              >
-              <img
+                <img
-                loading="lazy"
+                  loading="lazy"
-                className={css.StickerImg}
+                  className={css.StickerImg}
-                alt={emoji.body || emoji.shortcode}
+                  alt={emoji.body || emoji.shortcode}
-                src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
+                  src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
-              />
+                />
-            </StickerItem>
+              </StickerItem>
-          )
+            )
-        )}
+          )}
     </EmojiGroup>
   );
 }
 
 export const CustomEmojiGroups = memo(
-  ({ mx, groups, useAuthentication }: { mx: MatrixClient; groups: ImagePack[]; useAuthentication?: boolean }) => (
+  ({
+    mx,
+    groups,
+    useAuthentication,
+  }: {
+    mx: MatrixClient;
+    groups: ImagePack[];
+    useAuthentication?: boolean;
+  }) => (
     <>
       {groups.map((pack) => (
-        <EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
+        <EmojiGroup key={pack.id} id={pack.id} label={pack.meta.name || 'Unknown'}>
-          {pack.getEmojis().map((image) => (
+          {pack.getImages(ImageUsage.Emoticon).map((image) => (
             <EmojiItem
               key={image.shortcode}
               label={image.body || image.shortcode}
@@ -545,47 +556,57 @@ export const CustomEmojiGroups = memo(
   )
 );
 
-export const StickerGroups = memo(({ mx, groups, useAuthentication }: { mx: MatrixClient; groups: ImagePack[]; useAuthentication?: boolean }) => (
+export const StickerGroups = memo(
-  <>
+  ({
-    {groups.length === 0 && (
+    mx,
-      <Box
+    groups,
-        style={{ padding: `${toRem(60)} ${config.space.S500}` }}
+    useAuthentication,
-        alignItems="Center"
+  }: {
-        justifyContent="Center"
+    mx: MatrixClient;
-        direction="Column"
+    groups: ImagePack[];
-        gap="300"
+    useAuthentication?: boolean;
-      >
+  }) => (
-        <Icon size="600" src={Icons.Sticker} />
+    <>
-        <Box direction="Inherit">
+      {groups.length === 0 && (
-          <Text align="Center">No Sticker Packs!</Text>
+        <Box
-          <Text priority="300" align="Center" size="T200">
+          style={{ padding: `${toRem(60)} ${config.space.S500}` }}
-            Add stickers from user, room or space settings.
+          alignItems="Center"
-          </Text>
+          justifyContent="Center"
+          direction="Column"
+          gap="300"
+        >
+          <Icon size="600" src={Icons.Sticker} />
+          <Box direction="Inherit">
+            <Text align="Center">No Sticker Packs!</Text>
+            <Text priority="300" align="Center" size="T200">
+              Add stickers from user, room or space settings.
+            </Text>
+          </Box>
         </Box>
-      </Box>
+      )}
-    )}
+      {groups.map((pack) => (
-    {groups.map((pack) => (
+        <EmojiGroup key={pack.id} id={pack.id} label={pack.meta.name || 'Unknown'}>
-      <EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
+          {pack.getImages(ImageUsage.Sticker).map((image) => (
-        {pack.getStickers().map((image) => (
+            <StickerItem
-          <StickerItem
+              key={image.shortcode}
-            key={image.shortcode}
+              label={image.body || image.shortcode}
-            label={image.body || image.shortcode}
+              type={EmojiType.Sticker}
-            type={EmojiType.Sticker}
+              data={image.url}
-            data={image.url}
+              shortcode={image.shortcode}
-            shortcode={image.shortcode}
+            >
-          >
+              <img
-            <img
+                loading="lazy"
-              loading="lazy"
+                className={css.StickerImg}
-              className={css.StickerImg}
+                alt={image.body || image.shortcode}
-              alt={image.body || image.shortcode}
+                src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
-              src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
+              />
-            />
+            </StickerItem>
-          </StickerItem>
+          ))}
-        ))}
+        </EmojiGroup>
-      </EmojiGroup>
+      ))}
-    ))}
+    </>
-  </>
+  )
-));
+);
 
 export const NativeEmojiGroups = memo(
   ({ groups, labels }: { groups: IEmojiGroup[]; labels: IEmojiGroupLabels }) => (
@@ -609,7 +630,7 @@ export const NativeEmojiGroups = memo(
   )
 );
 
-const getSearchListItemStr = (item: ExtendedPackImage | IEmoji) => {
+const getSearchListItemStr = (item: PackImageReader | IEmoji) => {
   const shortcode = `:${item.shortcode}:`;
   if ('body' in item) {
     return [shortcode, item.body ?? ''];
@@ -646,7 +667,7 @@ export function EmojiBoard({
 }) {
   const emojiTab = tab === EmojiBoardTab.Emoji;
   const stickerTab = tab === EmojiBoardTab.Sticker;
-  const usage = emojiTab ? PackUsage.Emoticon : PackUsage.Sticker;
+  const usage = emojiTab ? ImageUsage.Emoticon : ImageUsage.Sticker;
 
   const setActiveGroupId = useSetAtom(activeGroupIdAtom);
   const mx = useMatrixClient();
@@ -661,8 +682,8 @@ export function EmojiBoard({
   const emojiPreviewTextRef = useRef<HTMLParagraphElement>(null);
 
   const searchList = useMemo(() => {
-    let list: Array<ExtendedPackImage | IEmoji> = [];
+    let list: Array<PackImageReader | IEmoji> = [];
-    list = list.concat(imagePacks.flatMap((pack) => pack.getImagesFor(usage)));
+    list = list.concat(imagePacks.flatMap((pack) => pack.getImages(usage)));
     if (emojiTab) list = list.concat(emojis);
     return list;
   }, [emojiTab, usage, imagePacks]);
@@ -688,7 +709,7 @@ export function EmojiBoard({
   const syncActiveGroupId = useCallback(() => {
     const targetEl = contentScrollRef.current;
     if (!targetEl) return;
-    const groupEls = [...targetEl.querySelectorAll('div[data-group-id]')] as HTMLElement[];
+    const groupEls = Array.from(targetEl.querySelectorAll('div[data-group-id]')) as HTMLElement[];
     const groupEl = groupEls.find((el) => isIntersectingScrollView(targetEl, el));
     const groupId = groupEl?.getAttribute('data-group-id') ?? undefined;
     setActiveGroupId(groupId);
@@ -735,7 +756,10 @@ export function EmojiBoard({
       } else if (emojiInfo.type === EmojiType.CustomEmoji && emojiPreviewRef.current) {
         const img = document.createElement('img');
         img.className = css.CustomEmojiImg;
-        img.setAttribute('src', mxcUrlToHttp(mx, emojiInfo.data, useAuthentication) || emojiInfo.data);
+        img.setAttribute(
+          'src',
+          mxcUrlToHttp(mx, emojiInfo.data, useAuthentication) || emojiInfo.data
+        );
         img.setAttribute('alt', emojiInfo.shortcode);
         emojiPreviewRef.current.textContent = '';
         emojiPreviewRef.current.appendChild(img);
@@ -903,8 +927,16 @@ export function EmojiBoard({
               {emojiTab && recentEmojis.length > 0 && (
                 <RecentEmojiGroup id={RECENT_GROUP_ID} label="Recent" emojis={recentEmojis} />
               )}
-              {emojiTab && <CustomEmojiGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />}
+              {emojiTab && (
-              {stickerTab && <StickerGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />}
+                <CustomEmojiGroups
+                  mx={mx}
+                  groups={imagePacks}
+                  useAuthentication={useAuthentication}
+                />
+              )}
+              {stickerTab && (
+                <StickerGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />
+              )}
               {emojiTab && <NativeEmojiGroups groups={emojiGroups} labels={emojiGroupLabels} />}
             </Box>
           </Scroll>

src/app/hooks/useImagePacks.ts

@@ -1,19 +1,19 @@
 import { ClientEvent, MatrixClient, MatrixEvent, Room, RoomStateEvent } from 'matrix-js-sdk';
 import { useEffect, useMemo } from 'react';
-import { getRelevantPacks, ImagePack, PackUsage } from '../plugins/custom-emoji';
 import { AccountDataEvent } from '../../types/matrix/accountData';
 import { StateEvent } from '../../types/matrix/room';
 import { useForceUpdate } from './useForceUpdate';
+import { getRelevantPacks, ImagePack, ImageUsage } from '../plugins/custom-emoji';
 
 export const useRelevantImagePacks = (
   mx: MatrixClient,
-  usage: PackUsage,
+  usage: ImageUsage,
   rooms: Room[]
 ): ImagePack[] => {
   const [forceCount, forceUpdate] = useForceUpdate();
 
   const relevantPacks = useMemo(
-    () => getRelevantPacks(mx, rooms).filter((pack) => pack.getImagesFor(usage).length > 0),
+    () => getRelevantPacks(mx, rooms).filter((pack) => pack.getImages(usage).length > 0),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [mx, usage, rooms, forceCount]
   );

src/app/plugins/custom-emoji.ts

@@ -1,303 +0,0 @@
-import { IImageInfo, MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
-import { AccountDataEvent } from '../../types/matrix/accountData';
-import { getAccountData, getStateEvents } from '../utils/room';
-import { StateEvent } from '../../types/matrix/room';
-
-// https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
-
-export type PackEventIdToUnknown = Record<string, unknown>;
-export type EmoteRoomIdToPackEvents = Record<string, PackEventIdToUnknown>;
-export type EmoteRoomsContent = {
-  rooms?: EmoteRoomIdToPackEvents;
-};
-
-export enum PackUsage {
-  Emoticon = 'emoticon',
-  Sticker = 'sticker',
-}
-
-export type PackImage = {
-  url: string;
-  body?: string;
-  usage?: PackUsage[];
-  info?: IImageInfo;
-};
-
-export type PackImages = Record<string, PackImage>;
-
-export type PackMeta = {
-  display_name?: string;
-  avatar_url?: string;
-  attribution?: string;
-  usage?: PackUsage[];
-};
-
-export type ExtendedPackImage = PackImage & {
-  shortcode: string;
-};
-
-export type PackContent = {
-  pack?: PackMeta;
-  images?: PackImages;
-};
-
-export class ImagePack {
-  public id: string;
-
-  public content: PackContent;
-
-  public displayName?: string;
-
-  public avatarUrl?: string;
-
-  public usage?: PackUsage[];
-
-  public attribution?: string;
-
-  public images: Map<string, ExtendedPackImage>;
-
-  public emoticons: ExtendedPackImage[];
-
-  public stickers: ExtendedPackImage[];
-
-  static parsePack(eventId: string, packContent: PackContent) {
-    if (!eventId || typeof packContent?.images !== 'object') {
-      return undefined;
-    }
-
-    return new ImagePack(eventId, packContent);
-  }
-
-  constructor(eventId: string, content: PackContent) {
-    this.id = eventId;
-    this.content = JSON.parse(JSON.stringify(content));
-
-    this.images = new Map();
-    this.emoticons = [];
-    this.stickers = [];
-
-    this.applyPackMeta(content);
-    this.applyImages(content);
-  }
-
-  applyPackMeta(content: PackContent) {
-    const pack = content.pack ?? {};
-
-    this.displayName = pack.display_name;
-    this.avatarUrl = pack.avatar_url;
-    this.usage = pack.usage ?? [PackUsage.Emoticon, PackUsage.Sticker];
-    this.attribution = pack.attribution;
-  }
-
-  applyImages(content: PackContent) {
-    this.images = new Map();
-    this.emoticons = [];
-    this.stickers = [];
-    if (!content.images) return;
-
-    Object.entries(content.images).forEach(([shortcode, data]) => {
-      const { url } = data;
-      const body = data.body ?? shortcode;
-      const usage = data.usage ?? this.usage;
-      const { info } = data;
-
-      if (!url) return;
-      const image: ExtendedPackImage = {
-        shortcode,
-        url,
-        body,
-        usage,
-        info,
-      };
-
-      this.images.set(shortcode, image);
-      if (usage && usage.includes(PackUsage.Emoticon)) {
-        this.emoticons.push(image);
-      }
-      if (usage && usage.includes(PackUsage.Sticker)) {
-        this.stickers.push(image);
-      }
-    });
-  }
-
-  getImages() {
-    return this.images;
-  }
-
-  getEmojis() {
-    return this.emoticons;
-  }
-
-  getStickers() {
-    return this.stickers;
-  }
-
-  getImagesFor(usage: PackUsage) {
-    if (usage === PackUsage.Emoticon) return this.getEmojis();
-    if (usage === PackUsage.Sticker) return this.getStickers();
-    return this.getEmojis();
-  }
-
-  getContent() {
-    return this.content;
-  }
-
-  getPackAvatarUrl(usage: PackUsage): string | undefined {
-    return this.avatarUrl || this.getImagesFor(usage)[0].url;
-  }
-
-  private updatePackProperty<K extends keyof PackMeta>(property: K, value: PackMeta[K]) {
-    if (this.content.pack === undefined) {
-      this.content.pack = {};
-    }
-    this.content.pack[property] = value;
-    this.applyPackMeta(this.content);
-  }
-
-  setAvatarUrl(avatarUrl?: string) {
-    this.updatePackProperty('avatar_url', avatarUrl);
-  }
-
-  setDisplayName(displayName?: string) {
-    this.updatePackProperty('display_name', displayName);
-  }
-
-  setAttribution(attribution?: string) {
-    this.updatePackProperty('attribution', attribution);
-  }
-
-  setUsage(usage?: PackUsage[]) {
-    this.updatePackProperty('usage', usage);
-  }
-
-  addImage(key: string, imgContent: PackImage) {
-    this.content.images = {
-      [key]: imgContent,
-      ...this.content.images,
-    };
-    this.applyImages(this.content);
-  }
-
-  removeImage(key: string) {
-    if (!this.content.images) return;
-    if (this.content.images[key] === undefined) return;
-    delete this.content.images[key];
-    this.applyImages(this.content);
-  }
-
-  updateImageKey(key: string, newKey: string) {
-    const { images } = this.content;
-    if (!images) return;
-    if (images[key] === undefined) return;
-    const copyImages: PackImages = {};
-    Object.keys(images).forEach((imgKey) => {
-      copyImages[imgKey === key ? newKey : imgKey] = images[imgKey];
-    });
-    this.content.images = copyImages;
-    this.applyImages(this.content);
-  }
-
-  private updateImageProperty<K extends keyof PackImage>(
-    key: string,
-    property: K,
-    value: PackImage[K]
-  ) {
-    if (!this.content.images) return;
-    if (this.content.images[key] === undefined) return;
-    this.content.images[key][property] = value;
-    this.applyImages(this.content);
-  }
-
-  setImageUrl(key: string, url: string) {
-    this.updateImageProperty(key, 'url', url);
-  }
-
-  setImageBody(key: string, body?: string) {
-    this.updateImageProperty(key, 'body', body);
-  }
-
-  setImageInfo(key: string, info?: IImageInfo) {
-    this.updateImageProperty(key, 'info', info);
-  }
-
-  setImageUsage(key: string, usage?: PackUsage[]) {
-    this.updateImageProperty(key, 'usage', usage);
-  }
-}
-
-export function packEventsToImagePacks(packEvents: MatrixEvent[]): ImagePack[] {
-  return packEvents.reduce<ImagePack[]>((imagePacks, packEvent) => {
-    const packId = packEvent?.getId();
-    const content = packEvent?.getContent() as PackContent | undefined;
-    if (!packId || !content) return imagePacks;
-    const pack = ImagePack.parsePack(packId, content);
-    if (pack) {
-      imagePacks.push(pack);
-    }
-    return imagePacks;
-  }, []);
-}
-
-export function getRoomImagePacks(room: Room): ImagePack[] {
-  const dataEvents = getStateEvents(room, StateEvent.PoniesRoomEmotes);
-  return packEventsToImagePacks(dataEvents);
-}
-
-export function getGlobalImagePacks(mx: MatrixClient): ImagePack[] {
-  const emoteRoomsContent = getAccountData(mx, AccountDataEvent.PoniesEmoteRooms)?.getContent() as
-    | EmoteRoomsContent
-    | undefined;
-  if (typeof emoteRoomsContent !== 'object') return [];
-
-  const { rooms } = emoteRoomsContent;
-  if (typeof rooms !== 'object') return [];
-
-  const roomIds = Object.keys(rooms);
-
-  const packs = roomIds.flatMap((roomId) => {
-    if (typeof rooms[roomId] !== 'object') return [];
-    const room = mx.getRoom(roomId);
-    if (!room) return [];
-    const packEventIdToUnknown = rooms[roomId];
-    const roomPacks = getStateEvents(room, StateEvent.PoniesRoomEmotes);
-    const globalPacks = roomPacks.filter((mE) => {
-      const packKey = mE.getStateKey();
-      if (typeof packKey === 'string') return !!packEventIdToUnknown[packKey];
-      return false;
-    });
-    return packEventsToImagePacks(globalPacks);
-  });
-
-  return packs;
-}
-
-export function getUserImagePack(mx: MatrixClient): ImagePack | undefined {
-  const userPackContent = getAccountData(mx, AccountDataEvent.PoniesUserEmotes)?.getContent() as
-    | PackContent
-    | undefined;
-  const userId = mx.getUserId();
-  if (!userPackContent || !userId) {
-    return undefined;
-  }
-
-  const userImagePack = ImagePack.parsePack(userId, userPackContent);
-  return userImagePack;
-}
-
-/**
- * @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
- */
-export function getRelevantPacks(mx?: MatrixClient, rooms?: Room[]): ImagePack[] {
-  const userPack = mx && getUserImagePack(mx);
-  const userPacks = userPack ? [userPack] : [];
-  const globalPacks = mx ? getGlobalImagePacks(mx) : [];
-  const globalPackIds = new Set(globalPacks.map((pack) => pack.id));
-  const roomsPack = rooms?.flatMap(getRoomImagePacks) ?? [];
-
-  return userPacks.concat(
-    globalPacks,
-    roomsPack.filter((pack) => !globalPackIds.has(pack.id))
-  );
-}

src/app/plugins/custom-emoji/ImagePack.ts

@@ -0,0 +1,74 @@
+import { MatrixEvent } from 'matrix-js-sdk';
+import { PackAddress } from './PackAddress';
+import { PackImageReader } from './PackImageReader';
+import { PackImagesReader } from './PackImagesReader';
+import { PackMetaReader } from './PackMetaReader';
+import { ImageUsage, PackContent } from './types';
+
+export class ImagePack {
+  public readonly id: string;
+
+  public readonly address: PackAddress | undefined;
+
+  public readonly meta: PackMetaReader;
+
+  public readonly images: PackImagesReader;
+
+  private emoticonMemo: PackImageReader[] | undefined;
+
+  private stickerMemo: PackImageReader[] | undefined;
+
+  constructor(id: string, content: PackContent, address: PackAddress | undefined) {
+    this.id = id;
+
+    this.address = address;
+
+    this.meta = new PackMetaReader(content.pack ?? {});
+    this.images = new PackImagesReader(content.images ?? {});
+  }
+
+  static fromMatrixEvent(id: string, matrixEvent: MatrixEvent) {
+    const roomId = matrixEvent.getRoomId();
+    const stateKey = matrixEvent.getStateKey();
+
+    const address =
+      roomId && typeof stateKey === 'string' ? new PackAddress(roomId, stateKey) : undefined;
+
+    const content = matrixEvent.getContent<PackContent>();
+
+    const imagePack: ImagePack = new ImagePack(id, content, address);
+
+    return imagePack;
+  }
+
+  public getImages(usage: ImageUsage): PackImageReader[] {
+    if (usage === ImageUsage.Emoticon && this.emoticonMemo) {
+      return this.emoticonMemo;
+    }
+    if (usage === ImageUsage.Sticker && this.stickerMemo) {
+      return this.stickerMemo;
+    }
+
+    const images = Array.from(this.images.collection.values()).filter((image) => {
+      const usg = image.usage ?? this.meta.usage;
+      return usg.includes(usage);
+    });
+
+    if (usage === ImageUsage.Emoticon) {
+      this.emoticonMemo = images;
+    }
+    if (usage === ImageUsage.Sticker) {
+      this.stickerMemo = images;
+    }
+
+    return images;
+  }
+
+  public getAvatarUrl(usage: ImageUsage): string | undefined {
+    if (this.meta.avatar) return this.meta.avatar;
+    const images = this.getImages(usage);
+    const firstImage = images[0];
+    if (firstImage) return firstImage.url;
+    return undefined;
+  }
+}

src/app/plugins/custom-emoji/PackAddress.ts

@@ -0,0 +1,10 @@
+export class PackAddress {
+  public readonly roomId: string;
+
+  public readonly stateKey: string;
+
+  constructor(roomId: string, stateKey: string) {
+    this.roomId = roomId;
+    this.stateKey = stateKey;
+  }
+}

src/app/plugins/custom-emoji/PackImageReader.ts

@@ -0,0 +1,43 @@
+import { IImageInfo } from '../../../types/matrix/common';
+import { ImageUsage, PackImage } from './types';
+
+export class PackImageReader {
+  public readonly shortcode: string;
+
+  public readonly url: string;
+
+  private readonly image: Omit<PackImage, 'url'>;
+
+  constructor(shortcode: string, url: string, image: Omit<PackImage, 'url'>) {
+    this.shortcode = shortcode;
+    this.url = url;
+
+    this.image = image;
+  }
+
+  static fromPackImage(shortcode: string, image: PackImage): PackImageReader | undefined {
+    const { url } = image;
+
+    if (typeof url !== 'string') return undefined;
+
+    return new PackImageReader(shortcode, url, image);
+  }
+
+  get body(): string | undefined {
+    const { body } = this.image;
+    return typeof body === 'string' ? body : undefined;
+  }
+
+  get info(): IImageInfo | undefined {
+    return this.image.info;
+  }
+
+  get usage(): ImageUsage[] | undefined {
+    const usg = this.image.usage;
+    if (!Array.isArray(usg)) return undefined;
+
+    const knownUsage = usg.filter((u) => u === ImageUsage.Emoticon || u === ImageUsage.Sticker);
+
+    return knownUsage.length > 0 ? knownUsage : undefined;
+  }
+}

src/app/plugins/custom-emoji/PackImagesReader.ts

@@ -0,0 +1,28 @@
+import { PackImageReader } from './PackImageReader';
+import { PackImages } from './types';
+
+export class PackImagesReader {
+  private readonly rawImages: PackImages;
+
+  private shortcodeToImages: Map<string, PackImageReader> | undefined;
+
+  constructor(images: PackImages) {
+    this.rawImages = images;
+  }
+
+  get collection(): Map<string, PackImageReader> {
+    if (this.shortcodeToImages) return this.shortcodeToImages;
+
+    const shortcodeToImages: Map<string, PackImageReader> = new Map();
+
+    Object.entries(this.rawImages).forEach(([shortcode, image]) => {
+      const imageReader = PackImageReader.fromPackImage(shortcode, image);
+      if (imageReader) {
+        shortcodeToImages.set(shortcode, imageReader);
+      }
+    });
+
+    this.shortcodeToImages = shortcodeToImages;
+    return this.shortcodeToImages;
+  }
+}

src/app/plugins/custom-emoji/PackMetaReader.ts

@@ -0,0 +1,39 @@
+import { PackMeta, ImageUsage } from './types';
+
+export class PackMetaReader {
+  private readonly meta: PackMeta;
+
+  constructor(meta: PackMeta) {
+    this.meta = meta;
+  }
+
+  get name(): string | undefined {
+    const displayName = this.meta.display_name;
+    if (typeof displayName === 'string') return displayName;
+    return undefined;
+  }
+
+  get avatar(): string | undefined {
+    const avatarURL = this.meta.avatar_url;
+    if (typeof avatarURL === 'string') return avatarURL;
+    return undefined;
+  }
+
+  get attribution(): string | undefined {
+    const { attribution } = this.meta;
+    if (typeof this.meta.attribution === 'string') return attribution;
+    return undefined;
+  }
+
+  get usage(): ImageUsage[] {
+    if (!Array.isArray(this.meta.usage)) return [ImageUsage.Emoticon, ImageUsage.Sticker];
+
+    const knownUsage = this.meta.usage.filter(
+      (u) => u === ImageUsage.Emoticon || u === ImageUsage.Sticker
+    );
+
+    if (knownUsage.length === 0) return [ImageUsage.Emoticon, ImageUsage.Sticker];
+
+    return knownUsage;
+  }
+}

src/app/plugins/custom-emoji/index.ts

@@ -0,0 +1,7 @@
+export * from './PackAddress';
+export * from './PackMetaReader';
+export * from './PackImageReader';
+export * from './PackImagesReader';
+export * from './ImagePack';
+export * from './types';
+export * from './utils';

src/app/plugins/custom-emoji/types.ts

@@ -0,0 +1,41 @@
+import { IImageInfo } from '../../../types/matrix/common';
+
+// https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
+
+/**
+ * im.ponies.emote_rooms content
+ */
+export type PackStateKeyToUnknown = Record<string, unknown>;
+export type RoomIdToPackInfo = Record<string, PackStateKeyToUnknown>;
+export type EmoteRoomsContent = {
+  rooms?: RoomIdToPackInfo;
+};
+
+/**
+ * Pack
+ */
+export enum ImageUsage {
+  Emoticon = 'emoticon',
+  Sticker = 'sticker',
+}
+
+export type PackImage = {
+  url: string;
+  body?: string;
+  usage?: ImageUsage[];
+  info?: IImageInfo;
+};
+
+export type PackImages = Record<string, PackImage>;
+
+export type PackMeta = {
+  display_name?: string;
+  avatar_url?: string;
+  attribution?: string;
+  usage?: ImageUsage[];
+};
+
+export type PackContent = {
+  pack?: PackMeta;
+  images?: PackImages;
+};

src/app/plugins/custom-emoji/utils.ts

@@ -0,0 +1,77 @@
+import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
+import { ImagePack } from './ImagePack';
+import { EmoteRoomsContent } from './types';
+import { StateEvent } from '../../../types/matrix/room';
+import { getAccountData, getStateEvents } from '../../utils/room';
+import { AccountDataEvent } from '../../../types/matrix/accountData';
+
+export function makeImagePacks(packEvents: MatrixEvent[]): ImagePack[] {
+  return packEvents.reduce<ImagePack[]>((imagePacks, packEvent) => {
+    const packId = packEvent.getId();
+    if (!packId) return imagePacks;
+    imagePacks.push(ImagePack.fromMatrixEvent(packId, packEvent));
+    return imagePacks;
+  }, []);
+}
+
+export function getRoomImagePacks(room: Room): ImagePack[] {
+  const packEvents = getStateEvents(room, StateEvent.PoniesRoomEmotes);
+  return makeImagePacks(packEvents);
+}
+
+export function getGlobalImagePacks(mx: MatrixClient): ImagePack[] {
+  const emoteRoomsContent = getAccountData(mx, AccountDataEvent.PoniesEmoteRooms)?.getContent() as
+    | EmoteRoomsContent
+    | undefined;
+  if (typeof emoteRoomsContent !== 'object') return [];
+
+  const { rooms: roomIdToPackInfo } = emoteRoomsContent;
+  if (typeof roomIdToPackInfo !== 'object') return [];
+
+  const roomIds = Object.keys(roomIdToPackInfo);
+
+  const packs = roomIds.flatMap((roomId) => {
+    if (typeof roomIdToPackInfo[roomId] !== 'object') return [];
+    const room = mx.getRoom(roomId);
+    if (!room) return [];
+    const packStateKeyToUnknown = roomIdToPackInfo[roomId];
+    const packEvents = getStateEvents(room, StateEvent.PoniesRoomEmotes);
+    const globalPackEvents = packEvents.filter((mE) => {
+      const stateKey = mE.getStateKey();
+      if (typeof stateKey === 'string') return !!packStateKeyToUnknown[stateKey];
+      return false;
+    });
+    return makeImagePacks(globalPackEvents);
+  });
+
+  return packs;
+}
+
+export function getUserImagePack(mx: MatrixClient): ImagePack | undefined {
+  const packEvent = getAccountData(mx, AccountDataEvent.PoniesUserEmotes);
+  const userId = mx.getUserId();
+  if (!packEvent || !userId) {
+    return undefined;
+  }
+
+  const userImagePack = ImagePack.fromMatrixEvent(userId, packEvent);
+  return userImagePack;
+}
+
+/**
+ * @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
+ */
+export function getRelevantPacks(mx?: MatrixClient, rooms?: Room[]): ImagePack[] {
+  const userPack = mx && getUserImagePack(mx);
+  const userPacks = userPack ? [userPack] : [];
+  const globalPacks = mx ? getGlobalImagePacks(mx) : [];
+  const globalPackIds = new Set(globalPacks.map((pack) => pack.id));
+  const roomsPack = rooms?.flatMap(getRoomImagePacks) ?? [];
+
+  return userPacks.concat(
+    globalPacks,
+    roomsPack.filter((pack) => !globalPackIds.has(pack.id))
+  );
+}