feat: warn when converting videos if vertd instance isn't found

+ add an easter egg if you try to upload the vertd server

yw realmy

src/lib/sections/settings/Vertd.svelte

@@ -5,6 +5,7 @@
 	import type { ISettings } from "./index.svelte";
 	import clsx from "clsx";
 	import Dropdown from "$lib/components/functional/Dropdown.svelte";
+	import { vertdLoaded } from "$lib/store/index.svelte";
 
 	let vertdCommit = $state<string | null>(null);
 	let abortController: AbortController | null = null;
@@ -12,7 +13,7 @@
 	const { settings }: { settings: ISettings } = $props();
 
 	$effect(() => {
-		if (settings.vertdURL) {
+		if (settings.vertdURL) {			
 			if (abortController) abortController.abort();
 			abortController = new AbortController();
 			const { signal } = abortController;
@@ -21,17 +22,23 @@
 			fetch(`${settings.vertdURL}/api/version`, { signal })
 				.then((res) => {
 					if (!res.ok) throw new Error("bad response");
+					vertdLoaded.set(false);
 					return res.json();
 				})
 				.then((data) => {
 					vertdCommit = data.data;
+					vertdLoaded.set(true);
 				})
 				.catch((err) => {
-					if (err.name !== "AbortError") vertdCommit = null;
+					if (err.name !== "AbortError") {
+						vertdCommit = null;
+						vertdLoaded.set(false);
+					}
 				});
 		} else {
 			if (abortController) abortController.abort();
 			vertdCommit = null;
+			vertdLoaded.set(false);
 		}
 
 		return () => {

src/lib/store/index.svelte.ts

@@ -231,6 +231,7 @@ export const showGradient = writable(true);
 export const gradientColor = writable("");
 export const goingLeft = writable(false);
 export const dropping = writable(false);
+export const vertdLoaded = writable(false);
 
 export const isMobile = writable(false);
 export const effects = writable(true);

src/routes/convert/+page.svelte

@@ -4,11 +4,13 @@
 	import Uploader from "$lib/components/functional/Uploader.svelte";
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import ProgressBar from "$lib/components/visual/ProgressBar.svelte";
+	import { converters } from "$lib/converters";
 	import {
 		effects,
 		files,
 		gradientColor,
 		showGradient,
+		vertdLoaded,
 	} from "$lib/store/index.svelte";
 	import { VertFile } from "$lib/types";
 	import {
@@ -96,12 +98,38 @@
 			</button>
 		</div>
 		{#if !file.converter}
+			{#if file.name.startsWith("vertd")}
+				<div
+					class="h-full flex flex-col text-center justify-center text-failure"
+				>
+					<p class="font-body font-bold">
+						We can't convert this file.
+					</p>
+					<p class="font-normal">
+						what are you doing..? you're supposed to run the vertd
+						server!
+					</p>
+				</div>
+			{:else}
+				<div
+					class="h-full flex flex-col text-center justify-center text-failure"
+				>
+					<p class="font-body font-bold">
+						We can't convert this file.
+					</p>
+					<p class="font-normal">
+						Only image, video, and audio files are supported
+					</p>
+				</div>
+			{/if}
+		{:else if isVideo && !$vertdLoaded}
 			<div
 				class="h-full flex flex-col text-center justify-center text-failure"
 			>
 				<p class="font-body font-bold">We can't convert this file.</p>
 				<p class="font-normal">
-					Only image, video, and audio files are supported
+					Could not find the vertd instance to start video conversion.
+					Are you sure the instance URL is set correctly?
 				</p>
 			</div>
 		{:else}