Function showAvatarsOn

source/features/reactions-avatars.tsx:65–92

(reactionsContainer: Element)

}

function showAvatarsOn(reactionsContainer: Element): void {
	const reactions = $$optional([
		'button[aria-pressed]', // Discussions, releases, PRs, old issues
		'button[aria-checked]', // React issues
	], reactionsContainer)
		.map(button => getParticipants(button)); // Get all participants for each reaction
	if (reactions.length === 0) {
		return;
	}

	const avatarLimit = arbitraryAvatarLimit - (reactions.length * approximateHeaderLength);
	const flatParticipants = flatZip(reactions, avatarLimit);

	for (const {button, username, imageUrl} of flatParticipants) {
		button.append(
			<span className="avatar-user avatar rgh-reactions-avatar p-0 tmp-p-0 flex-self-center">
				<img
					src={imageUrl}
					className="d-block"
					width={avatarSize}
					height={avatarSize}
					alt={`@${username}`}
					loading="lazy"
				/>
			</span>,
		);
	}
}

const viewportObserver = new IntersectionObserver(changes => {
	for (const change of changes) {