feat: add vertd speed options

src/app.scss

@@ -224,7 +224,8 @@ body {
 	background-size: 100vw 100vh;
 }
 
-::selection, ::-moz-selection {
+::selection,
+::-moz-selection {
 	@apply bg-accent-blue text-on-accent;
 }
 
@@ -278,7 +279,8 @@ body {
 		@apply text-accent underline;
 	}
 
-	input[type="text"] {
+	input[type="text"],
+	select.dropdown {
 		@apply w-full p-3 rounded-lg bg-panel border-2 border-button pl-3 pr-[4rem];
 	}
 
@@ -286,7 +288,7 @@ body {
 		@apply text-muted font-normal;
 	}
 
-	input[type=text]:focus {
+	input[type="text"]:focus {
 		@apply outline outline-accent outline-2;
 	}
 }

src/lib/components/functional/Dropdown.svelte

@@ -9,6 +9,7 @@
 		selected?: string;
 		onselect?: (option: string) => void;
 		disabled?: boolean;
+		settingsStyle?: boolean;
 	};
 
 	let {
@@ -16,6 +17,7 @@
 		selected = $bindable(options[0]),
 		onselect,
 		disabled,
+		settingsStyle,
 	}: Props = $props();
 
 	let open = $state(false);
@@ -49,13 +51,21 @@
 </script>
 
 <div
-	class="relative w-full min-w-fit text-xl font-medium text-center"
+	class="relative w-full min-w-fit {settingsStyle
+		? 'font-normal'
+		: 'text-xl font-medium'} text-center"
 	bind:this={dropdown}
 >
 	<button
-		class="font-display w-full justify-center overflow-hidden relative cursor-pointer px-3 py-3.5 bg-button {disabled
+		class="font-display w-full {settingsStyle
+			? 'justify-between'
+			: 'justify-center'} overflow-hidden relative cursor-pointer {settingsStyle
+			? 'px-4'
+			: 'px-3'} py-3.5 bg-button {disabled
 			? 'opacity-50'
-			: ''} flex items-center rounded-full focus:!outline-none"
+			: ''} flex items-center {settingsStyle
+			? 'rounded-xl'
+			: 'rounded-full'} focus:!outline-none"
 		onclick={toggle}
 		onmouseenter={() => (hover = true)}
 		onmouseleave={() => (hover = false)}
@@ -73,7 +83,11 @@
 						duration,
 						easing: quintOut,
 					}}
-					class="col-start-1 row-start-1 text-center font-body font-medium"
+					class="col-start-1 row-start-1 {settingsStyle
+						? 'text-left'
+						: 'text-center'} font-body {settingsStyle
+						? 'font-normal'
+						: 'font-medium'}"
 				>
 					{selected}
 				</p>

src/lib/converters/vertd.svelte.ts

@@ -51,12 +51,22 @@ const vertdFetch = async <U extends keyof RouteMap>(
 };
 
 // ws types
+
+export type ConversionSpeed =
+	| "verySlow"
+	| "slower"
+	| "slow"
+	| "medium"
+	| "fast"
+	| "ultraFast";
+
 interface StartJobMessage {
 	type: "startJob";
 	data: {
 		token: string;
 		jobId: string;
 		to: string;
+		speed: ConversionSpeed;
 	};
 }
 
@@ -135,6 +145,7 @@ export class VertdConverter extends Converter {
 				`ws://${apiUrl.replace("http://", "").replace("https://", "")}/api/ws`,
 			);
 			ws.onopen = () => {
+				const speed = Settings.instance.settings.vertdSpeed;
 				this.log("opened ws connection to vertd");
 				const msg: StartJobMessage = {
 					type: "startJob",
@@ -142,6 +153,7 @@ export class VertdConverter extends Converter {
 						jobId: uploadRes.id,
 						token: uploadRes.auth,
 						to,
+						speed,
 					},
 				};
 				ws.send(JSON.stringify(msg));

src/lib/sections/settings/Vertd.svelte

@@ -4,6 +4,7 @@
 	import { ServerIcon } from "lucide-svelte";
 	import type { Settings } from "./index.svelte";
 	import clsx from "clsx";
+	import Dropdown from "$lib/components/functional/Dropdown.svelte";
 
 	let vertdCommit = $state<string | null>(null);
 	let abortController: AbortController | null = null;
@@ -84,6 +85,60 @@
 						bind:value={settings.settings.vertdURL}
 					/>
 				</div>
+				<div class="flex flex-col gap-4">
+					<div class="flex flex-col gap-2">
+						<p class="text-base font-bold">Conversion speed</p>
+						<p class="text-sm text-muted font-normal">
+							This describes the tradeoff between speed and
+							quality. Faster speeds will result in lower quality,
+							but will get the job done quicker.
+						</p>
+					</div>
+					<!-- <select
+						bind:value={settings.settings.vertdSpeed}
+						class="w-1/2 dropdown"
+					>
+						<option value="verySlow">Very Slow</option>
+						<option value="slower">Slower</option>
+						<option value="slow">Slow</option>
+						<option value="medium">Medium</option>
+						<option value="fast">Fast</option>
+						<option value="ultraFast">Ultra Fast</option>
+					</select> -->
+					<Dropdown
+						options={[
+							"Very Slow",
+							"Slower",
+							"Slow",
+							"Medium",
+							"Fast",
+							"Ultra Fast",
+						]}
+						settingsStyle
+						onselect={(selected) => {
+							switch (selected) {
+								case "Very Slow":
+									settings.settings.vertdSpeed = "verySlow";
+									break;
+								case "Slower":
+									settings.settings.vertdSpeed = "slower";
+									break;
+								case "Slow":
+									settings.settings.vertdSpeed = "slow";
+									break;
+								case "Medium":
+									settings.settings.vertdSpeed = "medium";
+									break;
+								case "Fast":
+									settings.settings.vertdSpeed = "fast";
+									break;
+								case "Ultra Fast":
+									settings.settings.vertdSpeed = "ultraFast";
+									break;
+							}
+						}}
+					/>
+				</div>
 			</div>
 		</div>
 	</div>

src/lib/sections/settings/index.svelte.ts

@@ -1,3 +1,5 @@
+import type { ConversionSpeed } from "$lib/converters/vertd.svelte";
+
 export { default as Appearance } from "./Appearance.svelte";
 export { default as Conversion } from "./Conversion.svelte";
 export { default as Vertd } from "./Vertd.svelte";
@@ -5,6 +7,7 @@ export { default as Vertd } from "./Vertd.svelte";
 export interface ISettings {
 	filenameFormat: string;
 	vertdURL: string;
+	vertdSpeed: ConversionSpeed;
 }
 
 export class Settings {
@@ -13,6 +16,7 @@ export class Settings {
 	public settings: ISettings = $state({
 		filenameFormat: "VERT_%name%",
 		vertdURL: "",
+		vertdSpeed: "slow",
 	});
 
 	public save() {