fix(msc4459): fix room local image packs

Author: dozro

src/app/features/room/RoomInput.tsx

@@ -1137,7 +1137,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       if (!imagePacksUsedRef.current.has(key))
         imagePacksUsedRef.current.set(
           key,
-          getImagePackReferencesForMxc(key, mx, ImageUsage.Emoticon)
+          getImagePackReferencesForMxc(key, mx, ImageUsage.Emoticon, room)
         );
       moveCursor(editor);
       handleCloseAutocomplete();
@@ -1162,7 +1162,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       content[MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME] = getImagePackReferencesForMxcWrappedInMap(
         mxc,
         mx,
-        ImageUsage.Sticker
+        ImageUsage.Sticker,
+        room
       );
 
       /**
@@ -1181,7 +1182,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       content[MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME] = getImagePackReferencesForMxcWrappedInMap(
         mxc,
         mx,
-        ImageUsage.Sticker
+        ImageUsage.Sticker,
+        room
       );
 
       if (replyDraft) {

src/app/utils/matrix.ts

@@ -420,6 +420,12 @@ export const toggleReaction = (
   mx.sendEvent(
     room.roomId,
     EventType.Reaction as string as unknown as keyof TimelineEvents,
-    getReactionContent(targetEventId, key, mx, rShortcode) as TimelineEvents[keyof TimelineEvents]
+    getReactionContent(
+      targetEventId,
+      key,
+      mx,
+      room,
+      rShortcode
+    ) as TimelineEvents[keyof TimelineEvents]
   );
 };

src/app/utils/messageReaction.ts

@@ -1,13 +1,14 @@
 import { MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME } from '$types/matrix/common';
 import type { MatrixReactionEvent } from '$types/matrix/common';
-import type { MatrixClient } from 'matrix-js-sdk';
+import type { MatrixClient, Room } from 'matrix-js-sdk';
 import { ImageUsage } from '$plugins/custom-emoji';
 import { getImagePackReferencesForMxcWrappedInMap } from './msc4459helper';
 
 export const getReactionContent = (
   eventId: string,
   key: string,
   matrixClient: MatrixClient,
+  room: Room,
   shortcode?: string
 ): MatrixReactionEvent => ({
   'm.relates_to': {
@@ -20,6 +21,7 @@ export const getReactionContent = (
   [MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME]: getImagePackReferencesForMxcWrappedInMap(
     key,
     matrixClient,
-    ImageUsage.Emoticon
+    ImageUsage.Emoticon,
+    room
   ),
 });

src/app/utils/msc4459helper.ts

@@ -1,8 +1,8 @@
-import { getGlobalImagePacks } from '$plugins/custom-emoji/utils';
+import { getGlobalImagePacks, getRoomImagePacks } from '$plugins/custom-emoji/utils';
 import type { ImagePack } from '$plugins/custom-emoji/ImagePack';
 import type { MSC4459ImagePackReference } from '$types/matrix/common';
 import { SerializableMap } from '$types/wrapper/SerializableMap';
-import type { MatrixClient } from 'matrix-js-sdk';
+import type { MatrixClient, Room } from 'matrix-js-sdk';
 import type { ImageUsage } from '$plugins/custom-emoji';
 import { SerializableSet } from '$types/wrapper/SerializableSet';
 import { getViaServers } from '$plugins/via-servers';
@@ -12,26 +12,31 @@ import { isRoomPrivate } from './roomVisibility';
 export function getImagePackReferencesForMxcWrappedInMap(
   mxcUrl: string,
   matrixClient: MatrixClient,
-  imageUsage: ImageUsage
+  imageUsage: ImageUsage,
+  room: Room
 ): SerializableMap<string, MSC4459ImagePackReference> {
   const retMap = new SerializableMap<string, MSC4459ImagePackReference>();
-  retMap.set(mxcUrl, getImagePackReferencesForMxc(mxcUrl, matrixClient, imageUsage));
+  if (!mxcUrl.startsWith('mxc')) return retMap;
+  const result = getImagePackReferencesForMxc(mxcUrl, matrixClient, imageUsage, room);
+  // if the result is undefined return the empty map, to not produce invalid entries
+  if (!result?.room_id) return retMap;
+  retMap.set(mxcUrl, result);
   return retMap;
 }
 
-export function getImagePackReferencesForMxc(
+function getImagePackReferencesForMxcInternal(
   mxcUrl: string,
   matrixClient: MatrixClient,
-  imageUsage: ImageUsage
-): MSC4459ImagePackReference {
-  const globalImgPacks: ImagePack[] = getGlobalImagePacks(matrixClient);
-  if (!mxcUrl.startsWith('mxc')) return {};
-  const imgPkRef = globalImgPacks
+  packs: ImagePack[],
+  imageUsage: ImageUsage,
+  bypassPrivateFilter = false
+) {
+  return packs
     .filter((val) => val.getImages(imageUsage).find((img) => img.url === mxcUrl))
     .map((pack) => {
       const img = pack.getImages(imageUsage).find((val) => val.url === mxcUrl);
       const room = matrixClient.getRoom(pack.address?.roomId);
-      if (!room || isRoomPrivate(matrixClient, room)) return;
+      if (!room || (isRoomPrivate(matrixClient, room) && !bypassPrivateFilter)) return;
       const viaServers = new SerializableSet<string>();
       if (room)
         getViaServers(room).forEach((via) => {
@@ -47,6 +52,34 @@ export function getImagePackReferencesForMxc(
         shortcode: img?.shortcode,
       } satisfies MSC4459ImagePackReference;
     })
-    .at(0);
-  return imgPkRef ?? {};
+    .find((val) => val != undefined);
+}
+
+export function getImagePackReferencesForMxc(
+  mxcUrl: string,
+  matrixClient: MatrixClient,
+  imageUsage: ImageUsage,
+  room: Room
+): MSC4459ImagePackReference {
+  if (!mxcUrl.startsWith('mxc')) return {};
+  const globalImgPacks: ImagePack[] = getGlobalImagePacks(matrixClient);
+  const roomLocalImgPacks: ImagePack[] = getRoomImagePacks(room);
+  const roomLocalMatch = getImagePackReferencesForMxcInternal(
+    mxcUrl,
+    matrixClient,
+    roomLocalImgPacks,
+    imageUsage,
+    true
+  );
+  // prefer room local match as they're probably often more relevant
+  if (roomLocalMatch) return roomLocalMatch;
+  const globalMatch = getImagePackReferencesForMxcInternal(
+    mxcUrl,
+    matrixClient,
+    globalImgPacks,
+    imageUsage,
+    false
+  );
+
+  return globalMatch ?? {};
 }