jaredandClaude Opus 4.8
1b8f554584
Every ReadReceiptAvatars row and every useMemberAvatar registered its own global RoomStateEvent.Members listener — ~6 per receipt row — each firing on any membership / display-name / avatar change in ANY room. Add a module-level MemberChangeStore (mirroring the PERF-1 presence store) that registers exactly ONE global Members listener and fans out to subscribers keyed by roomId|userId. Two hooks: useRoomMemberChange (single) and useRoomMembersChange (multi, one effect). useMemberAvatar and ReadReceiptAvatars use them; behavior (re-render triggers) is byte-for-byte equivalent. Unsubscribe is idempotent via a set-identity guard; the multi-hook key is order-independent. Unit-tested (key-scoped fan-out, single shared listener, idempotent unsubscribe). Reviewed by two passes (lifecycle/closure + behavioral equivalence) — clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { Room } from 'matrix-js-sdk';
|
|
import { useMatrixClient } from './useMatrixClient';
|
|
import { useMediaAuthentication } from './useMediaAuthentication';
|
|
import { useRoomMemberChange } from './useRoomMemberChange';
|
|
import { getMemberName } from '../utils/room';
|
|
import { mxcUrlToHttp } from '../utils/matrix';
|
|
|
|
export type MemberAvatar = {
|
|
name: string;
|
|
avatarUrl: string | undefined;
|
|
};
|
|
|
|
/**
|
|
* Resolve a room member's display name and avatar http url, staying reactive to
|
|
* that member's profile (name/avatar/membership) changes.
|
|
*
|
|
* Stays reactive to this member's profile (name/avatar/membership) changes via
|
|
* the shared member-change store (one global listener for the whole app).
|
|
*/
|
|
export const useMemberAvatar = (
|
|
room: Room,
|
|
userId: string,
|
|
width = 32,
|
|
height = 32,
|
|
resizeMethod = 'crop',
|
|
): MemberAvatar => {
|
|
const mx = useMatrixClient();
|
|
const useAuthentication = useMediaAuthentication();
|
|
|
|
useRoomMemberChange(room.roomId, userId);
|
|
|
|
const name = getMemberName(room, userId);
|
|
const avatarMxc = room.getMember(userId)?.getMxcAvatarUrl();
|
|
const avatarUrl = avatarMxc
|
|
? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, width, height, resizeMethod) ?? undefined)
|
|
: undefined;
|
|
|
|
return { name, avatarUrl };
|
|
};
|