feat: add converter status to category cards

src/lib/converters/ffmpeg.svelte.ts

@@ -32,6 +32,7 @@ export class FFmpegConverter extends Converter {
 		log(["converters", this.name], `created converter`);
 		if (!browser) return;
 		try {
+			// this is just to cache the wasm and js for when we actually use it. we're not using this ffmpeg instance
 			this.ffmpeg = new FFmpeg();
 			(async () => {
 				const baseURL =
@@ -40,7 +41,6 @@ export class FFmpegConverter extends Converter {
 					coreURL: `${baseURL}/ffmpeg-core.js`,
 					wasmURL: `${baseURL}/ffmpeg-core.wasm`,
 				});
-				// this is just to cache the wasm and js for when we actually use it. we're not using this ffmpeg instance
 				this.ready = true;
 			})();
 		} catch (err) {

src/routes/+page.svelte

@@ -11,17 +11,29 @@
 
 	import Uploader from "$lib/components/functional/Uploader.svelte";
 	import { converters } from "$lib/converters";
+	import { vertdLoaded } from "$lib/store/index.svelte";
 	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"),
-	};
+	const status = $derived({
+		images: {
+			ready: converters.find((c) => c.name === "libvips")?.ready,
+			formats: getSupportedFormats("libvips"),
+		},
+		audio: {
+			ready: converters.find((c) => c.name === "ffmpeg")?.ready,
+			formats: getSupportedFormats("ffmpeg"),
+		},
+		video: {
+			ready:
+				converters.find((c) => c.name === "vertd")?.ready &&
+				$vertdLoaded,
+			formats: getSupportedFormats("vertd"),
+		},
+	});
 </script>
 
 <div class="max-w-6xl w-full mx-auto px-6 md:px-8">
@@ -66,9 +78,13 @@
 					<p class="flex items-center justify-center gap-2">
 						<Check size="20" /> Fully supported
 					</p>
+					<p>
+						<b>Status: </b>
+						{status.images.ready ? "ready" : "not ready"}
+					</p>
 					<p>
 						<b>Supported formats:</b>
-						{supportedFormats.images}
+						{status.images.formats}
 					</p>
 				</div>
 			</div>
@@ -85,9 +101,13 @@
 					<p class="flex items-center justify-center gap-2">
 						<Check size="20" /> Fully supported
 					</p>
+					<p>
+						<b>Status: </b>
+						{status.audio.ready ? "ready" : "not ready"}
+					</p>
 					<p>
 						<b>Supported formats:</b>
-						{supportedFormats.audio}
+						{status.audio.formats}
 					</p>
 				</div>
 			</div>
@@ -107,7 +127,14 @@
 							>Learn more</a
 						>.
 					</p>
-					<p><b>Supported formats:</b> {supportedFormats.video}</p>
+					<p>
+						<b>Status: </b>
+						{status.video.ready ? "ready" : "not ready"}
+					</p>
+					<p>
+						<b>Supported formats:</b>
+						{status.video.formats}
+					</p>
 				</div>
 			</div>
 		</div>