feat: support animated WebP

Author: Jiralite

packages/discord.js/src/client/Client.js

@@ -779,6 +779,11 @@ exports.Client = Client;
  * @see {@link https://discord.js.org/docs/packages/rest/stable/ImageURLOptions:Interface}
  */
 
+/**
+ * @external EmojiURLOptions
+ * @see {@link https://discord.js.org/docs/packages/rest/stable/EmojiURLOptions:TypeAlias}
+ */
+
 /**
  * @external BaseImageURLOptions
  * @see {@link https://discord.js.org/docs/packages/rest/stable/BaseImageURLOptions:Interface}

packages/discord.js/src/structures/BaseGuildEmoji.js

@@ -58,7 +58,7 @@ class BaseGuildEmoji extends Emoji {
  * @method imageURL
  * @memberof BaseGuildEmoji
  * @instance
- * @param {ImageURLOptions} [options={}] Options for the image URL
+ * @param {EmojiURLOptions} [options={}] Options for the emoji URL
  * @returns {string}
  */
 

packages/discord.js/src/structures/Emoji.js

@@ -42,11 +42,20 @@ class Emoji extends Base {
 
   /**
    * Returns a URL for the emoji or `null` if this is not a custom emoji.
-   * @param {ImageURLOptions} [options={}] Options for the image URL
+   * @param {EmojiURLOptions} [options={}] Options for the emoji URL
    * @returns {?string}
    */
   imageURL(options = {}) {
-    return this.id && this.client.rest.cdn.emoji(this.id, this.animated, options);
+    if (!this.id) return null;
+
+    // Return a dynamic extension depending on whether the emoji is animated.
+    const resolvedOptions = { extension: options.extension, size: options.size };
+
+    if (!options.extension || options.extension === 'webp') {
+      resolvedOptions.animated = options.animated ?? (this.animated || undefined);
+    }
+
+    return this.client.rest.cdn.emoji(this.id, resolvedOptions);
   }
 
   /**

packages/discord.js/typings/index.d.ts

@@ -1,6 +1,6 @@
 import { Awaitable, JSONEncodable } from '@discordjs/util';
 import { Collection, ReadonlyCollection } from '@discordjs/collection';
-import { BaseImageURLOptions, ImageURLOptions, RawFile, REST, RESTOptions } from '@discordjs/rest';
+import { BaseImageURLOptions, EmojiURLOptions, ImageURLOptions, RawFile, REST, RESTOptions } from '@discordjs/rest';
 import { WebSocketManager, WebSocketManagerOptions } from '@discordjs/ws';
 import { AsyncEventEmitter } from '@vladfrangu/async_event_emitter';
 import {
@@ -610,7 +610,7 @@ export abstract class BaseGuild extends Base {
 
 export class BaseGuildEmoji extends Emoji {
   protected constructor(client: Client<true>, data: RawGuildEmojiData, guild: Guild | GuildPreview);
-  public imageURL(options?: ImageURLOptions): string;
+  public imageURL(options?: EmojiURLOptions): string;
   public get url(): string;
   public available: boolean | null;
   public get createdAt(): Date;
@@ -1276,7 +1276,7 @@ export class Emoji extends Base {
   public id: Snowflake | null;
   public name: string | null;
   public get identifier(): string;
-  public imageURL(options?: ImageURLOptions): string | null;
+  public imageURL(options?: EmojiURLOptions): string | null;
   public get url(): string | null;
   public toJSON(): unknown;
   public toString(): string;

packages/rest/__tests__/CDN.test.ts

@@ -50,28 +50,16 @@ test('discoverySplash default', () => {
 	expect(cdn.discoverySplash(id, hash)).toEqual(`${baseCDN}/discovery-splashes/${id}/${hash}.webp`);
 });
 
-test('emoji static', () => {
-	expect(cdn.emoji(id, false)).toEqual(`${baseCDN}/emojis/${id}.webp`);
-});
-
-test('emoji static with JPG extension', () => {
-	expect(cdn.emoji(id, false, { extension: 'jpg' })).toEqual(`${baseCDN}/emojis/${id}.jpg`);
-});
-
-test('emoji static with JPG extension with force static', () => {
-	expect(cdn.emoji(id, false, { extension: 'jpg', forceStatic: true })).toEqual(`${baseCDN}/emojis/${id}.jpg`);
+test('emoji', () => {
+	expect(cdn.emoji(id)).toEqual(`${baseCDN}/emojis/${id}.webp`);
 });
 
 test('emoji animated', () => {
-	expect(cdn.emoji(id, true)).toEqual(`${baseCDN}/emojis/${id}.gif`);
-});
-
-test('emoji animated with JPG extension', () => {
-	expect(cdn.emoji(id, true, { extension: 'jpg' })).toEqual(`${baseCDN}/emojis/${id}.gif`);
+	expect(cdn.emoji(id, { animated: true })).toEqual(`${baseCDN}/emojis/${id}.webp?animated=true`);
 });
 
-test('emoji animated with JPG extension with force static', () => {
-	expect(cdn.emoji(id, true, { extension: 'jpg', forceStatic: true })).toEqual(`${baseCDN}/emojis/${id}.jpg`);
+test('emoji with GIF format', () => {
+	expect(cdn.emoji(id, { extension: 'gif' })).toEqual(`${baseCDN}/emojis/${id}.gif`);
 });
 
 test('guildMemberAvatar default', () => {

packages/rest/src/lib/CDN.ts

@@ -26,6 +26,25 @@ export interface BaseImageURLOptions {
 	size?: ImageSize;
 }
 
+interface EmojiURLOptionsWebp extends BaseImageURLOptions {
+	/**
+	 * Whether to use the `animated` query parameter.
+	 *
+	 * @remarks An animated custom emoji with the WebP format utilises this query paramter to be animated.
+	 */
+	animated?: boolean;
+	extension?: 'webp';
+}
+
+interface EmojiURLOptionsNotWebP extends BaseImageURLOptions {
+	extension: Exclude<ImageExtension, 'webp'>;
+}
+
+/**
+ * The options used for emoji URLs.
+ */
+export type EmojiURLOptions = EmojiURLOptionsNotWebP | EmojiURLOptionsWebp;
+
 /**
  * The options used for image URLs with animated content
  */
@@ -44,6 +63,10 @@ export interface MakeURLOptions {
 	 * The allowed extensions that can be used
 	 */
 	allowedExtensions?: readonly string[];
+	/**
+	 * Whether to use the `animated` query parameter
+	 */
+	animated?: boolean;
 	/**
 	 * The base URL.
 	 *
@@ -162,11 +185,10 @@ export class CDN {
 	 * Generates an emoji's URL.
 	 *
 	 * @param emojiId - The emoji id
-	 * @param animated - Whether the emoji is animated
 	 * @param options - Optional options for the emoji
 	 */
-	public emoji(emojiId: string, animated: boolean, options?: Readonly<ImageURLOptions>): string {
-		return this.dynamicMakeURL(`/emojis/${emojiId}`, animated ? 'a_' : '', options);
+	public emoji(emojiId: string, options?: Readonly<EmojiURLOptions>): string {
+		return this.makeURL(`/emojis/${emojiId}`, options);
 	}
 
 	/**
@@ -326,6 +348,7 @@ export class CDN {
 			base = this.cdn,
 			extension = 'webp',
 			size,
+			animated,
 		}: Readonly<MakeURLOptions> = {},
 	): string {
 		// eslint-disable-next-line no-param-reassign
@@ -345,6 +368,10 @@ export class CDN {
 			url.searchParams.set('size', String(size));
 		}
 
+		if (animated !== undefined) {
+			url.searchParams.set('animated', String(animated));
+		}
+
 		return url.toString();
 	}
 }