From 95b2b19699d05414caad2b5f411249c3fe5f4fd4 Mon Sep 17 00:00:00 2001
From: Jeroen Claassens <support@favware.tech>
Date: Mon, 19 Aug 2024 22:46:56 +0200
Subject: [PATCH] feat(emoji): add support for `jumbo` size emojis

---
 packages/core/demo/index.html                 |  4 +++
 .../DiscordCustomEmoji.ts                     | 36 ++++++++++++++++---
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html
index 6606bad76..4875fb1de 100644
--- a/packages/core/demo/index.html
+++ b/packages/core/demo/index.html
@@ -225,6 +225,10 @@ <h3 class="title">Custom Discord Emojis</h3>
 							</discord-embed-fields>
 						</discord-embed>
 					</discord-message>
+					<discord-message profile="favna"> They can also be jumbo sized to represent if the message only has emojis: </discord-message>
+					<discord-message profile="favna">
+						<discord-custom-emoji jumbo name="skyra" url="https://github.com/NM-EEA-Y.png"></discord-custom-emoji>
+					</discord-message>
 				</discord-messages>
 				<h3 class="title">Server Invites</h3>
 				<discord-messages>
diff --git a/packages/core/src/components/discord-custom-emoji/DiscordCustomEmoji.ts b/packages/core/src/components/discord-custom-emoji/DiscordCustomEmoji.ts
index 036edcbce..3b2f132c8 100644
--- a/packages/core/src/components/discord-custom-emoji/DiscordCustomEmoji.ts
+++ b/packages/core/src/components/discord-custom-emoji/DiscordCustomEmoji.ts
@@ -1,5 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import type { Emoji } from '../../types.js';
 import { getGlobalEmojiUrl } from '../../util.js';
@@ -22,6 +23,12 @@ export class DiscordCustomEmoji extends LitElement {
 			vertical-align: bottom;
 		}
 
+		.discord-custom-emoji .discord-custom-jumbo-emoji-image {
+			width: 3rem;
+			height: 3rem;
+			min-height: 3rem;
+		}
+
 		.discord-embed-custom-emoji {
 			display: inline-block;
 		}
@@ -65,6 +72,14 @@ export class DiscordCustomEmoji extends LitElement {
 	@property({ type: Boolean, attribute: 'embed-emoji' })
 	public accessor embedEmoji: boolean;
 
+	/**
+	 * Determines whether or not the emoji is of "jumbo size",
+	 * This means it is larger and is what Discord uses when the message exclusively has emojis,
+	 * up to a maximum of 30 emojis.
+	 */
+	@property({ type: Boolean, attribute: 'jumbo' })
+	public accessor jumbo: boolean;
+
 	public override willUpdate() {
 		if (!this.url && Boolean(this.name)) {
 			const emojiFromGlobal = getGlobalEmojiUrl(this.name) ?? this.customEmojisMap[this.name];
@@ -78,11 +93,24 @@ export class DiscordCustomEmoji extends LitElement {
 
 	protected override render() {
 		const name = `:${this.name}:`;
-		const emojiClassName = this.embedEmoji ? 'discord-embed-custom-emoji' : 'discord-custom-emoji';
-		const emojiImageClassName = this.embedEmoji ? 'discord-embed-custom-emoji-image' : 'discord-custom-emoji-image';
 
-		return html`<span class="${emojiClassName}"
-			><img aria-label=${name} src=${ifDefined(this.url)} alt=${name} draggable="false" class="${emojiImageClassName}"
+		console.log(name, this.jumbo);
+
+		return html`<span
+			class=${classMap({
+				'discord-embed-custom-emoji': this.embedEmoji,
+				'discord-custom-emoji': !this.embedEmoji
+			})}
+			><img
+				aria-label=${name}
+				src=${ifDefined(this.url)}
+				alt=${name}
+				draggable="false"
+				class=${classMap({
+					'discord-embed-custom-emoji-image': this.embedEmoji,
+					'discord-custom-emoji-image': !this.embedEmoji,
+					'discord-custom-jumbo-emoji-image': this.jumbo
+				})}
 		/></span> `;
 	}
 }