Use stable image pack identifiers

.changeset/feat-stable-image-pack.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Updated emojis to use stable 1.19 identifiers

src/app/components/image-pack-view/RoomImagePack.tsx

@@ -24,7 +24,7 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
   const creators = useRoomCreators(room);
 
   const permissions = useRoomPermissions(creators, powerLevels);
-  const canEditImagePack = permissions.stateEvent(CustomStateEvent.PoniesRoomEmotes, userId);
+  const canEditImagePack = permissions.stateEvent(CustomStateEvent.ImagePack, userId);
 
   const fallbackPack = useMemo(() => {
     const fakePackId = randomStr(4);
@@ -46,7 +46,7 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
 
       await mx.sendStateEvent(
         address.roomId,
-        CustomStateEvent.PoniesRoomEmotes,
+        CustomStateEvent.ImagePack,
         packContent,
         address.stateKey
       );

src/app/features/common-settings/emojis-stickers/RoomPacks.tsx

@@ -53,7 +53,7 @@ function CreatePackTile({ packs, roomId }: Readonly<CreatePackTileProps>) {
             display_name: name,
           },
         };
-        await mx.sendStateEvent(roomId, CustomStateEvent.PoniesRoomEmotes, content, stateKey);
+        await mx.sendStateEvent(roomId, CustomStateEvent.ImagePack, content, stateKey);
       },
       [mx, roomId]
     )
@@ -147,7 +147,7 @@ export function RoomPacks({ onViewPack }: Readonly<RoomPacksProps>) {
   const creators = useRoomCreators(room);
 
   const permissions = useRoomPermissions(creators, powerLevels);
-  const canEdit = permissions.stateEvent(CustomStateEvent.PoniesRoomEmotes, mx.getSafeUserId());
+  const canEdit = permissions.stateEvent(CustomStateEvent.ImagePack, mx.getSafeUserId());
 
   const unfilteredPacks = useRoomImagePacks(room);
   const packs = useMemo(() => unfilteredPacks.filter((pack) => !pack.deleted), [unfilteredPacks]);
@@ -161,7 +161,7 @@ export function RoomPacks({ onViewPack }: Readonly<RoomPacksProps>) {
         const addr = removedPacks[i];
         if (!addr) continue;
         // oxlint-disable-next-line no-await-in-loop
-        await mx.sendStateEvent(room.roomId, CustomStateEvent.PoniesRoomEmotes, {}, addr.stateKey);
+        await mx.sendStateEvent(room.roomId, CustomStateEvent.ImagePack, {}, addr.stateKey);
       }
     }, [mx, room, removedPacks])
   );

src/app/features/room-settings/permissions/usePermissionItems.ts

@@ -183,7 +183,7 @@ export const usePermissionGroups = (): PermissionGroup[] => {
         {
           location: {
             state: true,
-            key: CustomStateEvent.PoniesRoomEmotes,
+            key: CustomStateEvent.ImagePack,
           },
           name: 'Manage Emojis & Stickers',
         },

src/app/features/settings/emojis-stickers/GlobalPacks.tsx

@@ -307,9 +307,13 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
   const [applyState, applyChanges] = useAsyncCallback(
     useCallback(async () => {
       const content =
-        mx
-          .getAccountData(CustomAccountDataEvent.PoniesEmoteRooms)
-          ?.getContent<EmoteRoomsContent>() ?? {};
+        (mx
+          .getAccountData(CustomAccountDataEvent.ImagePackRooms)
+          ?.getContent<EmoteRoomsContent>() ||
+          mx
+            .getAccountData(CustomAccountDataEvent.PoniesEmoteRooms)
+            ?.getContent<EmoteRoomsContent>()) ??
+        {};
       const updatedContent: EmoteRoomsContent = JSON.parse(JSON.stringify(content));
 
       selectedPacks.forEach((addr) => {
@@ -326,7 +330,7 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
         }
       });
 
-      await mx.setAccountData(CustomAccountDataEvent.PoniesEmoteRooms, updatedContent);
+      await mx.setAccountData(CustomAccountDataEvent.ImagePackRooms, updatedContent);
     }, [mx, selectedPacks, removedPacks])
   );
 

src/app/features/space-settings/permissions/usePermissionItems.ts

@@ -131,7 +131,7 @@ export const usePermissionGroups = (): PermissionGroup[] => {
         {
           location: {
             state: true,
-            key: CustomStateEvent.PoniesRoomEmotes,
+            key: CustomStateEvent.ImagePack,
           },
           name: 'Manage Emojis & Stickers',
         },

src/app/hooks/useImagePacks.ts

@@ -110,7 +110,10 @@ export const useGlobalImagePacks = (): ImagePack[] => {
     mx,
     useCallback(
       (mEvent) => {
-        if (mEvent.getType() === (CustomAccountDataEvent.PoniesEmoteRooms as string)) {
+        if (
+          mEvent.getType() === (CustomAccountDataEvent.ImagePackRooms as string) ||
+          mEvent.getType() === (CustomAccountDataEvent.PoniesEmoteRooms as string)
+        ) {
           setGlobalPacks((prev) => {
             const next = getGlobalImagePacks(mx);
             return imagePackListEqual(prev, next) ? prev : next;
@@ -129,7 +132,8 @@ export const useGlobalImagePacks = (): ImagePack[] => {
         const roomId = mEvent.getRoomId();
         const stateKey = mEvent.getStateKey();
         if (
-          eventType === (CustomStateEvent.PoniesRoomEmotes as string) &&
+          (eventType === (CustomStateEvent.ImagePack as string) ||
+            eventType === (CustomStateEvent.PoniesRoomEmotes as string)) &&
           roomId &&
           typeof stateKey === 'string'
         ) {
@@ -178,7 +182,8 @@ export const useRoomImagePack = (room: Room, stateKey: string): ImagePack | unde
       (mEvent) => {
         if (
           mEvent.getRoomId() === room.roomId &&
-          mEvent.getType() === (CustomStateEvent.PoniesRoomEmotes as string) &&
+          (mEvent.getType() === (CustomStateEvent.ImagePack as string) ||
+            mEvent.getType() === (CustomStateEvent.PoniesRoomEmotes as string)) &&
           mEvent.getStateKey() === stateKey
         ) {
           setRoomPack((prev) => {
@@ -217,7 +222,8 @@ export const useRoomImagePacks = (room: Room): ImagePack[] => {
       (mEvent) => {
         if (
           mEvent.getRoomId() === room.roomId &&
-          mEvent.getType() === (CustomStateEvent.PoniesRoomEmotes as string)
+          (mEvent.getType() === (CustomStateEvent.ImagePack as string) ||
+            mEvent.getType() === (CustomStateEvent.PoniesRoomEmotes as string))
         ) {
           setRoomPacks((prev) => {
             const next = getRoomImagePacks(room);
@@ -270,7 +276,8 @@ export const useRoomsImagePacks = (rooms: Room[]) => {
       (mEvent) => {
         if (
           rooms.find((room) => room.roomId === mEvent.getRoomId()) &&
-          mEvent.getType() === (CustomStateEvent.PoniesRoomEmotes as string)
+          (mEvent.getType() === (CustomStateEvent.ImagePack as string) ||
+            mEvent.getType() === (CustomStateEvent.PoniesRoomEmotes as string))
         ) {
           setRoomPacks((prev) => {
             const next = rooms.flatMap(getRoomImagePacks);

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

@@ -38,23 +38,37 @@ export function makeImagePacks(packEvents: MatrixEvent[]): ImagePack[] {
 }
 
 export function getRoomImagePack(room: Room, stateKey: string): ImagePack | undefined {
-  const packEvent = getStateEvent(room, CustomStateEvent.PoniesRoomEmotes, stateKey);
+  const packEvent =
+    getStateEvent(room, CustomStateEvent.ImagePack, stateKey) ||
+    getStateEvent(room, CustomStateEvent.PoniesRoomEmotes, stateKey);
   if (!packEvent) return undefined;
   const packId = packEvent.getId();
   if (!packId) return undefined;
   return ImagePack.fromMatrixEvent(packId, packEvent);
 }
 
 export function getRoomImagePacks(room: Room): ImagePack[] {
-  const packEvents = getStateEvents(room, CustomStateEvent.PoniesRoomEmotes);
-  return makeImagePacks(packEvents);
+  const packEventsStable = getStateEvents(room, CustomStateEvent.ImagePack);
+  const packEventsUnstable = getStateEvents(room, CustomStateEvent.PoniesRoomEmotes);
+
+  const uniquePackEvents = new Map<string, MatrixEvent>();
+  packEventsUnstable.forEach((ev) => {
+    const key = ev.getStateKey();
+    if (typeof key === 'string') uniquePackEvents.set(key, ev);
+  });
+  packEventsStable.forEach((ev) => {
+    const key = ev.getStateKey();
+    if (typeof key === 'string') uniquePackEvents.set(key, ev);
+  });
+
+  return makeImagePacks(Array.from(uniquePackEvents.values()));
 }
 
 export function getGlobalImagePacks(mx: MatrixClient): ImagePack[] {
-  const emoteRoomsContent = getAccountData(
-    mx,
-    CustomAccountDataEvent.PoniesEmoteRooms
-  )?.getContent();
+  const emoteRoomsContent =
+    getAccountData(mx, CustomAccountDataEvent.ImagePackRooms)?.getContent() ||
+    getAccountData(mx, CustomAccountDataEvent.PoniesEmoteRooms)?.getContent();
+
   if (typeof emoteRoomsContent !== 'object') return [];
 
   const { rooms: roomIdToPackInfo } = emoteRoomsContent;
@@ -67,13 +81,25 @@ export function getGlobalImagePacks(mx: MatrixClient): ImagePack[] {
     const room = mx.getRoom(roomId);
     if (!room) return [];
     const packStateKeyToUnknown = roomIdToPackInfo[roomId];
-    const packEvents = getStateEvents(room, CustomStateEvent.PoniesRoomEmotes);
-    const globalPackEvents = packEvents.filter((mE) => {
-      const stateKey = mE.getStateKey();
-      if (typeof stateKey === 'string') return !!packStateKeyToUnknown[stateKey];
-      return false;
+
+    const packEventsStable = getStateEvents(room, CustomStateEvent.ImagePack);
+    const packEventsUnstable = getStateEvents(room, CustomStateEvent.PoniesRoomEmotes);
+
+    const uniquePackEvents = new Map<string, MatrixEvent>();
+    packEventsUnstable.forEach((ev) => {
+      const key = ev.getStateKey();
+      if (typeof key === 'string' && !!packStateKeyToUnknown[key]) {
+        uniquePackEvents.set(key, ev);
+      }
     });
-    return makeImagePacks(globalPackEvents);
+    packEventsStable.forEach((ev) => {
+      const key = ev.getStateKey();
+      if (typeof key === 'string' && !!packStateKeyToUnknown[key]) {
+        uniquePackEvents.set(key, ev);
+      }
+    });
+
+    return makeImagePacks(Array.from(uniquePackEvents.values()));
   });
 
   return packs;

src/client/slidingSync.ts

@@ -86,6 +86,7 @@ const buildListRequiredState = (): MSC3575RoomSubscription['required_state'] =>
   [EventType.RoomMember, MSC3575_STATE_KEY_ME],
   ['m.space.child', MSC3575_WILDCARD],
   [EventType.GroupCallMemberPrefix, MSC3575_WILDCARD],
+  [CustomStateEvent.ImagePack, MSC3575_WILDCARD],
   [CustomStateEvent.PoniesRoomEmotes, MSC3575_WILDCARD],
   [CustomStateEvent.RoomAbbreviations, ''],
   [CustomStateEvent.RoomBanner, ''],

src/types/matrix-sdk-events.d.ts

@@ -62,6 +62,7 @@ type BookmarkItemContent = {
 
 declare module 'matrix-js-sdk/lib/@types/event' {
   interface StateEvents {
+    [prefix.MATRIX_STATE_ROOM_IMAGE_PACK_PROPERTY_NAME]: PackContent;
     [prefix.MATRIX_UNSTABLE_STATE_ROOM_EMOTES_PROPERTY_NAME]: PackContent;
     [prefix.MATRIX_CINNY_UNSTABLE_STATE_ROOM_POWER_LEVELS_LABEL_PROPERTY_NAME]: PowerLevelTagsEventContent;
     [prefix.MATRIX_ELEMENT_UNSTABLE_STATE_ROOM_WIDGET_PROPERTY_NAME]: RoomWidgetEventContent;
@@ -76,6 +77,7 @@ declare module 'matrix-js-sdk/lib/@types/event' {
     [prefix.MATRIX_CINNY_UNSTABLE_ACCOUNT_SPACES_PROPERTY_NAME]: InCinnySpacesContent;
     [prefix.MATRIX_ACCOUNT_RECENT_EMOJIS_PROPERTY_NAME]: IRecentEmojiContent;
     [prefix.MATRIX_LEGACY_ELEMENT_UNSTABLE_ACCOUNT_RECENT_EMOJIS_PROPERTY_NAME]: IRecentEmojiContent;
+    [prefix.MATRIX_ACCOUNT_EMOTE_ROOMS_PROPERTY_NAME]: EmoteRoomsContent;
     [prefix.MATRIX_UNSTABLE_ACCOUNT_USER_EMOTES_PROPERTY_NAME]: PackContent;
     [prefix.MATRIX_UNSTABLE_ACCOUNT_EMOTE_ROOMS_PROPERTY_NAME]: EmoteRoomsContent;
     [prefix.MATRIX_SABLE_UNSTABLE_ACCOUNT_NICKNAMES_PROPERTY_NAME]: Record<string, string>;

src/types/matrix/accountData.ts

@@ -5,6 +5,7 @@ export const CustomAccountDataEvent = {
   LegacyElementRecentEmoji:
     prefix.MATRIX_LEGACY_ELEMENT_UNSTABLE_ACCOUNT_RECENT_EMOJIS_PROPERTY_NAME,
   RecentEmoji: prefix.MATRIX_ACCOUNT_RECENT_EMOJIS_PROPERTY_NAME,
+  ImagePackRooms: prefix.MATRIX_ACCOUNT_EMOTE_ROOMS_PROPERTY_NAME,
   PoniesUserEmotes: prefix.MATRIX_UNSTABLE_ACCOUNT_USER_EMOTES_PROPERTY_NAME,
   PoniesEmoteRooms: prefix.MATRIX_UNSTABLE_ACCOUNT_EMOTE_ROOMS_PROPERTY_NAME,
   SableNicknames: prefix.MATRIX_SABLE_UNSTABLE_ACCOUNT_NICKNAMES_PROPERTY_NAME,

src/types/matrix/room.ts

@@ -1,4 +1,5 @@
 import type { IImageInfo } from './common';
+import * as prefix from '$unstable/prefixes';
 
 export type IMemberContent = {
   avatar_url?: string;
@@ -9,6 +10,7 @@ export type IMemberContent = {
 };
 
 export const CustomStateEvent = {
+  ImagePack: prefix.MATRIX_STATE_ROOM_IMAGE_PACK_PROPERTY_NAME,
   PoniesRoomEmotes: 'im.ponies.room_emotes',
   PowerLevelTags: 'in.cinny.room.power_level_tags',
   RoomWidget: 'im.vector.modular.widgets',

src/unstable/prefixes/msc/accountdata.ts

@@ -7,4 +7,5 @@
  */
 export const MATRIX_UNSTABLE_ACCOUNT_USER_EMOTES_PROPERTY_NAME = 'im.ponies.user_emotes';
 
+export const MATRIX_ACCOUNT_EMOTE_ROOMS_PROPERTY_NAME = 'm.image_pack.rooms';
 export const MATRIX_UNSTABLE_ACCOUNT_EMOTE_ROOMS_PROPERTY_NAME = 'im.ponies.emote_rooms';

src/unstable/prefixes/msc/state_events.ts

@@ -1,6 +1,7 @@
 // state event related unstable prefixes
 // don't import this file directly, import '$unstable/prefixes'
 
+export const MATRIX_STATE_ROOM_IMAGE_PACK_PROPERTY_NAME = 'm.room.image_pack';
 export const MATRIX_UNSTABLE_STATE_ROOM_EMOTES_PROPERTY_NAME = 'im.ponies.room_emotes';
 /**
  * unstable prefix for call rooms