increase max image size so magnified images support palette and tile

lang/en-US/commands.json

@@ -11,7 +11,7 @@
         },
         "images": {
             "too_big": "This image is too big to %ACTION%!",
-            "max_size": "The maximum size for an image is 512px²."
+            "max_size": "The maximum size for an image is 1024px²."
         },
         "stats": {
             "footer": "Made with love",

src/client/message.ts

@@ -29,7 +29,7 @@ const ExtendedMessage = {
 			this.components.at(-1).components[0].type === ComponentType.Button //checks there isn't a select menu
 		) {
 			const deleteRow = ActionRowBuilder.from(this.components.at(-1)).addComponents(
-				hasAuthorID === true ? deleteMessage : deleteInteraction,
+				hasAuthorID ? deleteMessage : deleteInteraction,
 			);
 
 			return this.edit({
@@ -40,7 +40,7 @@ const ExtendedMessage = {
 			components: [
 				...this.components,
 				new ActionRowBuilder<ButtonBuilder>().addComponents([
-					hasAuthorID === true ? deleteMessage : deleteInteraction,
+					hasAuthorID ? deleteMessage : deleteInteraction,
 				]),
 			],
 		});

src/commands/images/magnify.ts

@@ -1,9 +1,9 @@
 import { SlashCommand } from "@interfaces";
-import { ActionRowBuilder, ButtonBuilder, SlashCommandBuilder } from "discord.js";
+import { SlashCommandBuilder } from "discord.js";
 import { ChatInputCommandInteraction, Message } from "@client";
 import { magnifyToAttachment } from "@images/magnify";
 import getImage from "@helpers/getImage";
-import { tile, palette } from "@helpers/buttons";
+import { imageButtons } from "@helpers/buttons";
 
 export const command: SlashCommand = {
 	data: new SlashCommandBuilder()
@@ -38,7 +38,7 @@ export const command: SlashCommand = {
 		await interaction
 			.editReply({
 				files: [file],
-				components: [new ActionRowBuilder<ButtonBuilder>().addComponents(palette)],
+				components: [imageButtons],
 			})
 			.then((message: Message) => message.deleteButton());
 	},

src/components/buttons/image/magnify.ts

@@ -2,10 +2,8 @@ import { Component } from "@interfaces";
 import { info } from "@helpers/logger";
 import { Client, Message, ButtonInteraction, EmbedBuilder } from "@client";
 import { magnifyToAttachment } from "@images/magnify";
-import { palette } from "@helpers/buttons";
+import { imageButtons } from "@helpers/buttons";
 import getImage from "@helpers/getImage";
-import { ActionRowBuilder } from "discord.js";
-import { ButtonBuilder } from "discord.js";
 
 export default {
 	id: "magnify",
@@ -25,7 +23,7 @@ export default {
 						.setTimestamp(),
 				],
 				files: [attachment],
-				components: [new ActionRowBuilder<ButtonBuilder>().addComponents(palette)],
+				components: [imageButtons],
 				fetchReply: true,
 			})
 			.then((message: Message) => {

src/components/buttons/image/tile.ts

@@ -2,9 +2,7 @@ import { Component } from "@interfaces";
 import { info } from "@helpers/logger";
 import { Client, Message, ButtonInteraction, EmbedBuilder } from "@client";
 import { tileToAttachment, tileTooBig } from "@images/tile";
-import { magnify, palette } from "@helpers/buttons";
-import { ActionRowBuilder } from "discord.js";
-import { ButtonBuilder } from "discord.js";
+import { imageButtons } from "@helpers/buttons";
 import getImage from "@helpers/getImage";
 
 export default {
@@ -27,7 +25,7 @@ export default {
 						.setTimestamp(),
 				],
 				files: [attachment],
-				components: [new ActionRowBuilder<ButtonBuilder>().addComponents(magnify, palette)],
+				components: [imageButtons],
 				fetchReply: true,
 			})
 			.then((message: Message) => {

src/helpers/images/palette.ts

@@ -41,7 +41,8 @@ export interface AllColors {
  */
 export async function palette(origin: ImageSource) {
 	const imageToDraw = await loadImage(origin);
-	if (imageToDraw.width * imageToDraw.height > 262144) return { image: null, embed: null };
+	// 1048576px is the same size as a magnified image
+	if (imageToDraw.width * imageToDraw.height > 1048576) return { image: null, embed: null };
 	const canvas: Canvas = createCanvas(imageToDraw.width, imageToDraw.height);
 	const context = canvas.getContext("2d");
 	context.drawImage(imageToDraw, 0, 0);
@@ -197,9 +198,7 @@ export async function paletteTooBig(
 		embeds: [
 			new EmbedBuilder()
 				.setTitle(
-					interaction
-						.strings()
-						.command.images.too_big.replace("%ACTION%", "take the palette of"),
+					interaction.strings().command.images.too_big.replace("%ACTION%", "take the palette of"),
 				)
 				.setDescription(interaction.strings().command.images.max_size)
 				.setColor(colors.red),

src/helpers/images/tile.ts

@@ -26,7 +26,8 @@ interface TileOptions {
 export async function tile(origin: ImageSource, options: TileOptions = {}): Promise<Buffer> {
 	const input = await loadImage(origin).catch((err) => Promise.reject(err));
 
-	if (input.width * input.height * 3 > 262144) return null;
+	// 1048576px is the same size as a magnified image
+	if (input.width * input.height * 3 > 1048576) return null;
 
 	const canvas = createCanvas(input.width * 3, input.height * 3);
 	const context = canvas.getContext("2d");

src/helpers/prefixCommandHandler.ts

@@ -3,8 +3,7 @@ import { magnifyToAttachment } from "./images/magnify";
 import getImage from "./getImage";
 import { tileToAttachment, tileTooBig } from "./images/tile";
 import { paletteToAttachment, paletteTooBig } from "./images/palette";
-import { ActionRowBuilder, ButtonBuilder } from "discord.js";
-import { imageButtons, palette } from "./buttons";
+import { imageButtons } from "./buttons";
 
 export default async function prefixCommandHandler(message: Message) {
 	const args = message.content.split(" ");
@@ -19,7 +18,7 @@ export default async function prefixCommandHandler(message: Message) {
 			return await message
 				.reply({
 					files: [await magnifyToAttachment(url)],
-					components: [new ActionRowBuilder<ButtonBuilder>().addComponents(palette)],
+					components: [imageButtons],
 				})
 				.then((message: Message) => message.deleteButton());
 		case "t":