feat: conversion quality ui

messages/en.json

@@ -93,7 +93,12 @@
 			"title": "Conversion",
 			"filename_format": "File name format",
 			"filename_description": "This will determine the name of the file on download, <b>not including the file extension.</b> You can put these following templates in the format, which will be replaced with the relevant information: <b>%name%</b> for the original file name, <b>%extension%</b> for the original file extension, and <b>%date%</b> for a date string of when the file was converted.",
-			"placeholder": "VERT_%name%"
+			"placeholder": "VERT_%name%",
+			"quality": "Conversion quality",
+			"quality_description": "This changes the default output quality of the converted files (in its category). Higher values may result in longer conversion times and file size.",
+			"quality_video": "This changes the default output quality of the converted video files. Higher values may result in longer conversion times and file size.",
+			"quality_audio": "Audio (kbps)",
+			"quality_images": "Image (%)"
 		},
 		"vertd": {
 			"title": "Video conversion",

src/lib/components/functional/FancyInput.svelte

@@ -8,6 +8,7 @@
 		prefix?: string;
 		type?: string;
 		min?: number;
+		max?: number;
 	};
 
 	let {
@@ -19,6 +20,7 @@
 		prefix,
 		type = "text",
 		min = 0,
+		max = 100,
 	}: Props = $props();
 </script>
 
@@ -26,6 +28,7 @@
 	<input
 		{type}
 		{min}
+		{max}
 		bind:value
 		{placeholder}
 		{disabled}

src/lib/converters/ffmpeg.svelte.ts

@@ -465,3 +465,15 @@ const getCodecs = (ext: string): { video: string; audio: string } => {
 			return { video: "libx264", audio: "aac" };
 	}
 };
+
+export const CONVERSION_BITRATES = [
+    "auto",
+    320,
+    256,
+    192,
+    128,
+    96,
+    64,
+    32,
+] as const;
+export type ConversionBitrate = (typeof CONVERSION_BITRATES)[number];

src/lib/sections/settings/Conversion.svelte

@@ -3,7 +3,13 @@
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import { RefreshCwIcon } from "lucide-svelte";
 	import type { ISettings } from "./index.svelte";
+	import {
+		CONVERSION_BITRATES,
+		type ConversionBitrate,
+	} from "$lib/converters/ffmpeg.svelte";
 	import { m } from "$lib/paraglide/messages";
+	import Dropdown from "$lib/components/functional/Dropdown.svelte";
+	import FancyInput from "$lib/components/functional/FancyInput.svelte";
 
 	const { settings }: { settings: ISettings } = $props();
 </script>
@@ -21,7 +27,9 @@
 		<div class="flex flex-col gap-8">
 			<div class="flex flex-col gap-4">
 				<div class="flex flex-col gap-2">
-					<p class="text-base font-bold">{m["settings.conversion.filename_format"]()}</p>
+					<p class="text-base font-bold">
+						{m["settings.conversion.filename_format"]()}
+					</p>
 					<p class="text-sm text-muted font-normal">
 						{@html m["settings.conversion.filename_description"]()}
 					</p>
@@ -33,6 +41,46 @@
 					type="text"
 				/>
 			</div>
+			<div class="flex flex-col gap-4">
+				<div class="flex flex-col gap-2">
+					<p class="text-base font-bold">
+						{m["settings.conversion.quality"]()}
+					</p>
+					<p class="text-sm text-muted font-normal">
+						{m["settings.conversion.quality_description"]()}
+					</p>
+				</div>
+				<div class="grid grid-cols-2 gap-3">
+					<div class="flex flex-col gap-2">
+						<p class="text-sm font-bold">
+							{m["settings.conversion.quality_images"]()}
+						</p>
+						<FancyInput
+							bind:value={
+								settings.magickQuality as unknown as string
+							}
+							type="number"
+							min={1}
+							max={100}
+						/>
+					</div>
+					<div class="flex flex-col gap-2">
+						<p class="text-sm font-bold">
+							{m["settings.conversion.quality_audio"]()}
+						</p>
+						<Dropdown
+							options={CONVERSION_BITRATES.map((b) =>
+								b.toString(),
+							)}
+							selected={settings.ffmpegQuality.toString()}
+							onselect={(option: string) =>
+								(settings.ffmpegQuality =
+									option as ConversionBitrate)}
+							settingsStyle
+						/>
+					</div>
+				</div>
+			</div>
 		</div>
-	</div>
-</Panel>
+	</div></Panel
+>

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

@@ -1,4 +1,5 @@
 import { PUB_VERTD_URL } from "$env/static/public";
+import type { ConversionBitrate } from "$lib/converters/ffmpeg.svelte";
 import type { ConversionSpeed } from "$lib/converters/vertd.svelte";
 
 export { default as Appearance } from "./Appearance.svelte";
@@ -10,7 +11,9 @@ export interface ISettings {
 	filenameFormat: string;
 	plausible: boolean;
 	vertdURL: string;
-	vertdSpeed: ConversionSpeed;
+	vertdSpeed: ConversionSpeed; // videos
+	magickQuality: number; // images
+	ffmpegQuality: ConversionBitrate; // audio (or audio <-> video)
 }
 
 export class Settings {
@@ -21,6 +24,8 @@ export class Settings {
 		plausible: true,
 		vertdURL: PUB_VERTD_URL,
 		vertdSpeed: "slow",
+		magickQuality: 100,
+		ffmpegQuality: "auto",
 	});
 
 	public save() {

src/routes/about/+page.svelte

@@ -90,6 +90,7 @@
 			const excludedNames = new Set([
 				...mainContribs.map((c) => c.github.split("/").pop()),
 				...notableContribs.map((c) => c.github.split("/").pop()),
+				"Z2r-YT"
 			]);
 
 			const filteredContribs = allContribs.filter(