From 6386e8a652b7ce560330cb2f81f6b180e12f1af6 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Wed, 12 Nov 2025 19:51:18 +0000
Subject: [PATCH] feat: more lax requirements for custom images

---
 src/components/submit-form/index.tsx |  4 +++-
 src/lib/images.tsx                   | 20 ++++++++++----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/submit-form/index.tsx b/src/components/submit-form/index.tsx
index 6e26196..ff59a47 100644
--- a/src/components/submit-form/index.tsx
+++ b/src/components/submit-form/index.tsx
@@ -228,7 +228,7 @@ export default function SubmitForm() {
 					<hr className="grow border-zinc-300" />
 				</div>
 
-				<div className="max-w-md w-full self-center">
+				<div className="max-w-md w-full self-center flex flex-col items-center">
 					<Dropzone onDrop={handleDrop}>
 						<p className="text-center text-sm">
 							Drag and drop your images here
@@ -236,6 +236,8 @@ export default function SubmitForm() {
 							or click to open
 						</p>
 					</Dropzone>
+
+					<span className="text-xs text-zinc-400 mt-2">Animated images currently not supported.</span>
 				</div>
 
 				<ImageList files={files} setFiles={setFiles} />
diff --git a/src/lib/images.tsx b/src/lib/images.tsx
index 2e0fee8..7201173 100644
--- a/src/lib/images.tsx
+++ b/src/lib/images.tsx
@@ -1,5 +1,5 @@
-// This file's extension is .tsx because I am using JSX for satori to generate images
-// These are disabled because satori is not Next.JS and is turned into an image anyways
+// This file's extension is .tsx because JSX is used for satori to generate images
+// Warnings below are disabled since satori is not Next.JS and is turned into an image anyways
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable @next/next/no-img-element */
 
@@ -14,9 +14,9 @@ import satori, { Font } from "satori";
 
 import { Mii } from "@prisma/client";
 
-const MIN_IMAGE_DIMENSIONS = 128;
-const MAX_IMAGE_DIMENSIONS = 1024;
-const MAX_IMAGE_SIZE = 1024 * 1024; // 1 MB
+const MIN_IMAGE_DIMENSIONS = [128, 128];
+const MAX_IMAGE_DIMENSIONS = [1920, 1080];
+const MAX_IMAGE_SIZE = 4 * 1024 * 1024; // 4 MB
 const ALLOWED_MIME_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"];
 
 //#region Image validation
@@ -43,12 +43,12 @@ export async function validateImage(file: File): Promise<{ valid: boolean; error
 		if (
 			!metadata.width ||
 			!metadata.height ||
-			metadata.width < MIN_IMAGE_DIMENSIONS ||
-			metadata.width > MAX_IMAGE_DIMENSIONS ||
-			metadata.height < MIN_IMAGE_DIMENSIONS ||
-			metadata.height > MAX_IMAGE_DIMENSIONS
+			metadata.width < MIN_IMAGE_DIMENSIONS[0] ||
+			metadata.width > MAX_IMAGE_DIMENSIONS[0] ||
+			metadata.height < MIN_IMAGE_DIMENSIONS[1] ||
+			metadata.height > MAX_IMAGE_DIMENSIONS[1]
 		) {
-			return { valid: false, error: "Image dimensions are invalid. Width and height must be between 128px and 1024px" };
+			return { valid: false, error: "Image dimensions are invalid. Resolution must be between 128x128 and 1920x1080" };
 		}
 
 		// Check for inappropriate content