From 63e9cb3cd8314c433b4a4b4ec3ffea40f1ec18a9 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Mon, 10 Feb 2025 22:02:23 +0300
Subject: [PATCH] feat: show supported formats in file categories

+ minor language change
---
 src/lib/sections/settings/Vertd.svelte |  2 +-
 src/routes/+page.svelte                | 50 +++++++++++++++++++-------
 2 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/lib/sections/settings/Vertd.svelte b/src/lib/sections/settings/Vertd.svelte
index e1971b5..e2c33ce 100644
--- a/src/lib/sections/settings/Vertd.svelte
+++ b/src/lib/sections/settings/Vertd.svelte
@@ -55,7 +55,7 @@
 				class="inline-block -mt-1 mr-2 bg-accent-red p-2 rounded-full overflow-visible"
 				color="black"
 			/>
-			Converting Video
+			Video conversion
 		</h2>
 		<p
 			class={clsx("text-sm font-normal", {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2ff183a..081cbc4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,7 +10,18 @@
 	// -- JovannMC
 
 	import Uploader from "$lib/components/functional/Uploader.svelte";
+	import { converters } from "$lib/converters";
 	import { AudioLines, Check, Film, Image } from "lucide-svelte";
+
+	const getSupportedFormats = (name: string) =>
+		converters.find((c) => c.name === name)?.supportedFormats.join(", ") ||
+		"none";
+
+	const supportedFormats = {
+		images: getSupportedFormats("libvips"),
+		audio: getSupportedFormats("ffmpeg"),
+		video: getSupportedFormats("vertd"),
+	};
 </script>
 
 <div class="max-w-6xl w-full mx-auto px-6 md:px-8">
@@ -40,7 +51,7 @@
 	<hr />
 
 	<div class="mt-10 md:mt-16">
-		<h2 class="text-center text-4xl">VERT Supports...</h2>
+		<h2 class="text-center text-4xl">VERT supports...</h2>
 
 		<div class="grid gap-4 md:grid-cols-3 mt-8">
 			<div class="file-category-card">
@@ -51,7 +62,13 @@
 					<span>Images</span>
 				</div>
 
-				<p>Animated images are not supported (yet).</p>
+				<div class="flex flex-col text-center justify-center">
+					<p>Animated images are not supported (yet).</p>
+					<p>
+						<b>Supported formats:</b>
+						{supportedFormats.images}
+					</p>
+				</div>
 			</div>
 
 			<div class="file-category-card">
@@ -62,9 +79,15 @@
 					<span>Audio</span>
 				</div>
 
-				<p class="flex items-center justify-center gap-2">
-					<Check size="20" /> Fully supported
-				</p>
+				<div class="flex flex-col text-center justify-between">
+					<p class="flex items-center justify-center gap-2">
+						<Check size="20" /> Fully supported
+					</p>
+					<p>
+						<b>Supported formats:</b>
+						{supportedFormats.audio}
+					</p>
+				</div>
 			</div>
 
 			<div class="file-category-card">
@@ -74,13 +97,16 @@
 					</div>
 					<span>Video *</span>
 				</div>
-				<p>
-					Video requires special setup. <a
-						target="_blank"
-						href="https://github.com/VERT-sh/VERT/wiki/How-to-convert-video-with-VERT"
-						>Learn more</a
-					>
-				</p>
+				<div class="flex flex-col text-center justify-between">
+					<p>
+						Video requires special setup. <a
+							target="_blank"
+							href="https://github.com/VERT-sh/VERT/wiki/How-to-convert-video-with-VERT"
+							>Learn more</a
+						>.
+					</p>
+					<p><b>Supported formats:</b> {supportedFormats.video}</p>
+				</div>
 			</div>
 		</div>
 	</div>