feat: clearer busy/error msg on conversion page

messages/en.json

@@ -74,7 +74,13 @@
 			"cant_convert": "We can't convert this file.",
 			"vertd_server": "what are you doing..? you're supposed to run the vertd server!",
 			"unsupported_format": "Only image, video, audio, and document files are supported",
-			"vertd_not_found": "Could not find the vertd instance to start video conversion. Are you sure the instance URL is set correctly?"
+			"vertd_not_found": "Could not find the vertd instance to start video conversion. Are you sure the instance URL is set correctly?",
+			"worker_downloading": "The {type} converter is currently being initialized, please wait a few moments.",
+			"worker_error": "The {type} converter had an error during initialization, please try again later.",
+			"worker_timeout": "The {type} converter is taking longer than expected to initialize, please wait a few moments.",
+			"audio": "audio",
+			"doc": "document",
+			"image": "image"
 		}
 	},
 	"settings": {

src/lib/converters/converter.svelte.ts

@@ -1,10 +1,6 @@
 import type { VertFile } from "$lib/types";
 
-export type WorkerStatus =
-	| "not-ready"
-	| "downloading"
-	| "ready"
-	| "error";
+export type WorkerStatus = "not-ready" | "downloading" | "ready" | "error";
 
 export class FormatInfo {
 	public name: string;
@@ -42,6 +38,25 @@ export class Converter {
 	public status: WorkerStatus = $state("not-ready");
 	public readonly reportsProgress: boolean = false;
 
+	private timeoutId?: number;
+
+	constructor(public readonly timeout: number = 10) {
+		this.startTimeout();
+	}
+
+	private startTimeout() {
+		this.timeoutId = setTimeout(() => {
+			if (this.status !== "ready") this.status = "not-ready";
+		}, this.timeout * 1000);
+	}
+
+	protected clearTimeout() {
+		if (this.timeoutId) {
+			clearTimeout(this.timeoutId);
+			this.timeoutId = undefined;
+		}
+	}
+
 	/**
 	 * Convert a file to a different format.
 	 * @param input The input file.

src/routes/convert/+page.svelte

@@ -202,6 +202,57 @@
 					</p>
 				</div>
 			{/if}
+		{:else if currentConverter && currentConverter.status === "downloading"}
+			<div
+				class="h-full flex flex-col text-center justify-center text-failure"
+			>
+				<p class="font-body font-bold">{m["convert.errors.cant_convert"]()}</p>
+				<p class="font-normal">
+					{m["convert.errors.worker_downloading"]({ 
+						type: isAudio 
+							? m["convert.errors.audio"]() 
+							: isVideo 
+								? "Video" 
+								: isDocument 
+									? m["convert.errors.doc"]() 
+									: m["convert.errors.image"]()
+					})}
+				</p>
+			</div>
+		{:else if currentConverter && currentConverter.status === "error"}
+			<div
+				class="h-full flex flex-col text-center justify-center text-failure"
+			>
+				<p class="font-body font-bold">{m["convert.errors.cant_convert"]()}</p>
+				<p class="font-normal">
+					{m["convert.errors.worker_error"]({ 
+						type: isAudio 
+							? m["convert.errors.audio"]() 
+							: isVideo 
+								? "Video" 
+								: isDocument 
+									? m["convert.errors.doc"]() 
+									: m["convert.errors.image"]()
+					})}
+				</p>
+			</div>
+		{:else if currentConverter && currentConverter.status === "not-ready"}
+			<div
+				class="h-full flex flex-col text-center justify-center text-failure"
+			>
+				<p class="font-body font-bold">{m["convert.errors.cant_convert"]()}</p>
+				<p class="font-normal">
+					{m["convert.errors.worker_timeout"]({ 
+						type: isAudio 
+							? m["convert.errors.audio"]() 
+							: isVideo 
+								? "Video" 
+								: isDocument 
+									? m["convert.errors.doc"]() 
+									: m["convert.errors.image"]()
+					})}
+				</p>
+			</div>
 		{:else if isVideo && !isAudio && !isImage && !isDocument && !$vertdLoaded}
 			<div
 				class="h-full flex flex-col text-center justify-center text-failure"