Skip to content

Commit

Permalink
chore(cdn): default to animated images (#7265)
Browse files Browse the repository at this point in the history 
Co-authored-by: Jiralite <33201955+Jiralite@users.noreply.github.com>
Co-authored-by: Almeida <almeidx@pm.me>
  • Loading branch information
@suneettipirneni @Jiralite @almeidx
3 people committed Jan 17, 2022
1 parent 101d7c5 commit 0951309
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 30 deletions.
46 changes: 22 additions & 24 deletions packages/rest/__tests__/CDN.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,95 +9,93 @@ const defaultAvatar = 1234 % 5;
const cdn = new CDN(base);

test('appAsset default', () => {
expect(cdn.appAsset(id, hash)).toBe(`${base}/app-assets/${id}/${hash}.png`);
expect(cdn.appAsset(id, hash)).toBe(`${base}/app-assets/${id}/${hash}.webp`);
});

test('appIcon default', () => {
expect(cdn.appIcon(id, hash)).toBe(`${base}/app-icons/${id}/${hash}.png`);
expect(cdn.appIcon(id, hash)).toBe(`${base}/app-icons/${id}/${hash}.webp`);
});

test('avatar default', () => {
expect(cdn.avatar(id, hash)).toBe(`${base}/avatars/${id}/${hash}.png`);
expect(cdn.avatar(id, hash)).toBe(`${base}/avatars/${id}/${hash}.webp`);
});

test('avatar dynamic-animated', () => {
expect(cdn.avatar(id, animatedHash, { dynamic: true })).toBe(`${base}/avatars/${id}/${animatedHash}.gif`);
expect(cdn.avatar(id, animatedHash)).toBe(`${base}/avatars/${id}/${animatedHash}.gif`);
});

test('avatar dynamic-not-animated', () => {
expect(cdn.avatar(id, hash, { dynamic: true })).toBe(`${base}/avatars/${id}/${hash}.png`);
expect(cdn.avatar(id, hash)).toBe(`${base}/avatars/${id}/${hash}.webp`);
});

test('banner default', () => {
expect(cdn.banner(id, hash)).toBe(`${base}/banners/${id}/${hash}.png`);
expect(cdn.banner(id, hash)).toBe(`${base}/banners/${id}/${hash}.webp`);
});

test('channelIcon default', () => {
expect(cdn.channelIcon(id, hash)).toBe(`${base}/channel-icons/${id}/${hash}.png`);
expect(cdn.channelIcon(id, hash)).toBe(`${base}/channel-icons/${id}/${hash}.webp`);
});

test('defaultAvatar default', () => {
expect(cdn.defaultAvatar(defaultAvatar)).toBe(`${base}/embed/avatars/${defaultAvatar}.png`);
expect(cdn.defaultAvatar(defaultAvatar)).toBe(`${base}/embed/avatars/${defaultAvatar}.webp`);
});

test('discoverySplash default', () => {
expect(cdn.discoverySplash(id, hash)).toBe(`${base}/discovery-splashes/${id}/${hash}.png`);
expect(cdn.discoverySplash(id, hash)).toBe(`${base}/discovery-splashes/${id}/${hash}.webp`);
});

test('emoji default', () => {
expect(cdn.emoji(id)).toBe(`${base}/emojis/${id}.png`);
expect(cdn.emoji(id)).toBe(`${base}/emojis/${id}.webp`);
});

test('emoji gif', () => {
expect(cdn.emoji(id, 'gif')).toBe(`${base}/emojis/${id}.gif`);
});

test('guildMemberAvatar default', () => {
expect(cdn.guildMemberAvatar(id, id, hash)).toBe(`${base}/guilds/${id}/users/${id}/avatars/${hash}.png`);
expect(cdn.guildMemberAvatar(id, id, hash)).toBe(`${base}/guilds/${id}/users/${id}/avatars/${hash}.webp`);
});

test('guildMemberAvatar dynamic-animated', () => {
expect(cdn.guildMemberAvatar(id, id, animatedHash, { dynamic: true })).toBe(
expect(cdn.guildMemberAvatar(id, id, animatedHash)).toBe(
`${base}/guilds/${id}/users/${id}/avatars/${animatedHash}.gif`,
);
});

test('guildMemberAvatar dynamic-not-animated', () => {
expect(cdn.guildMemberAvatar(id, id, hash, { dynamic: true })).toBe(
`${base}/guilds/${id}/users/${id}/avatars/${hash}.png`,
);
expect(cdn.guildMemberAvatar(id, id, hash)).toBe(`${base}/guilds/${id}/users/${id}/avatars/${hash}.webp`);
});

test('icon default', () => {
expect(cdn.icon(id, hash)).toBe(`${base}/icons/${id}/${hash}.png`);
expect(cdn.icon(id, hash)).toBe(`${base}/icons/${id}/${hash}.webp`);
});

test('icon dynamic-animated', () => {
expect(cdn.icon(id, animatedHash, { dynamic: true })).toBe(`${base}/icons/${id}/${animatedHash}.gif`);
expect(cdn.icon(id, animatedHash)).toBe(`${base}/icons/${id}/${animatedHash}.gif`);
});

test('icon dynamic-not-animated', () => {
expect(cdn.icon(id, hash, { dynamic: true })).toBe(`${base}/icons/${id}/${hash}.png`);
expect(cdn.icon(id, hash)).toBe(`${base}/icons/${id}/${hash}.webp`);
});

test('role icon default', () => {
expect(cdn.roleIcon(id, hash)).toBe(`${base}/role-icons/${id}/${hash}.png`);
expect(cdn.roleIcon(id, hash)).toBe(`${base}/role-icons/${id}/${hash}.webp`);
});

test('splash default', () => {
expect(cdn.splash(id, hash)).toBe(`${base}/splashes/${id}/${hash}.png`);
expect(cdn.splash(id, hash)).toBe(`${base}/splashes/${id}/${hash}.webp`);
});

test('sticker default', () => {
expect(cdn.sticker(id)).toBe(`${base}/stickers/${id}.png`);
});

test('stickerPackBanner default', () => {
expect(cdn.stickerPackBanner(id)).toBe(`${base}/app-assets/710982414301790216/store/${id}.png`);
expect(cdn.stickerPackBanner(id)).toBe(`${base}/app-assets/710982414301790216/store/${id}.webp`);
});

test('teamIcon default', () => {
expect(cdn.teamIcon(id, hash)).toBe(`${base}/team-icons/${id}/${hash}.png`);
expect(cdn.teamIcon(id, hash)).toBe(`${base}/team-icons/${id}/${hash}.webp`);
});

test('makeURL throws on invalid size', () => {
Expand All @@ -107,9 +105,9 @@ test('makeURL throws on invalid size', () => {

test('makeURL throws on invalid extension', () => {
// @ts-expect-error: Invalid extension
expect(() => cdn.avatar(id, animatedHash, { extension: 'tif' })).toThrow(RangeError);
expect(() => cdn.avatar(id, animatedHash, { extension: 'tif', forceStatic: true })).toThrow(RangeError);
});

test('makeURL valid size', () => {
expect(cdn.avatar(id, animatedHash, { size: 512 })).toBe(`${base}/avatars/${id}/${animatedHash}.png?size=512`);
expect(cdn.avatar(id, animatedHash, { size: 512 })).toBe(`${base}/avatars/${id}/${animatedHash}.gif?size=512`);
});
44 changes: 38 additions & 6 deletions packages/rest/src/lib/CDN.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,48 @@ import {
StickerExtension,
} from './utils/constants';

/**
* The options used for image URLs
*/
export interface BaseImageURLOptions {
/**
* The extension to use for the image URL
* @default 'webp'
*/
extension?: ImageExtension;
/**
* The size specified in the image URL
*/
size?: ImageSize;
}

/**
* The options used for image URLs with animated content
*/
export interface ImageURLOptions extends BaseImageURLOptions {
dynamic?: boolean;
/**
* Whether or not to prefer the static version of an image asset.
*/
forceStatic?: boolean;
}

/**
* The options to use when making a CDN URL
*/
export interface MakeURLOptions {
/**
* The extension to use for the image URL
* @default 'webp'
*/
extension?: string | undefined;
/**
* The size specified in the image URL
*/
size?: ImageSize;
allowedExtensions?: readonly string[];
/**
* The allowed extensions that can be used
*/
allowedExtensions?: ReadonlyArray<string>;
}

/**
Expand Down Expand Up @@ -158,7 +187,10 @@ export class CDN {
* @param extension The extension of the sticker
*/
public sticker(stickerId: string, extension?: StickerExtension): string {
return this.makeURL(`/stickers/${stickerId}`, { allowedExtensions: ALLOWED_STICKER_EXTENSIONS, extension });
return this.makeURL(`/stickers/${stickerId}`, {
allowedExtensions: ALLOWED_STICKER_EXTENSIONS,
extension: extension ?? 'png', // Stickers cannot have a `.webp` extension, so we default to a `.png`
});
}

/**
Expand Down Expand Up @@ -189,9 +221,9 @@ export class CDN {
private dynamicMakeURL(
route: string,
hash: string,
{ dynamic = false, ...options }: Readonly<ImageURLOptions> = {},
{ forceStatic = false, ...options }: Readonly<ImageURLOptions> = {},
): string {
return this.makeURL(route, dynamic && hash.startsWith('a_') ? { ...options, extension: 'gif' } : options);
return this.makeURL(route, !forceStatic && hash.startsWith('a_') ? { ...options, extension: 'gif' } : options);
}

/**
Expand All @@ -201,7 +233,7 @@ export class CDN {
*/
private makeURL(
route: string,
{ allowedExtensions = ALLOWED_EXTENSIONS, extension = 'png', size }: Readonly<MakeURLOptions> = {},
{ allowedExtensions = ALLOWED_EXTENSIONS, extension = 'webp', size }: Readonly<MakeURLOptions> = {},
): string {
extension = String(extension).toLowerCase();

Expand Down

0 comments on commit 0951309

Please sign in to comment.