From e8cdb18dd59f4ac2c3b79d40eede89d0ab40fa45 Mon Sep 17 00:00:00 2001 From: Maya Date: Tue, 2 Sep 2025 14:16:40 +0800 Subject: [PATCH] feat: conversion quality ui --- messages/en.json | 7 ++- .../components/functional/FancyInput.svelte | 3 ++ src/lib/converters/ffmpeg.svelte.ts | 12 +++++ src/lib/sections/settings/Conversion.svelte | 54 +++++++++++++++++-- src/lib/sections/settings/index.svelte.ts | 7 ++- src/routes/about/+page.svelte | 1 + 6 files changed, 79 insertions(+), 5 deletions(-) diff --git a/messages/en.json b/messages/en.json index de11f31..4956e45 100644 --- a/messages/en.json +++ b/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, not including the file extension. You can put these following templates in the format, which will be replaced with the relevant information: %name% for the original file name, %extension% for the original file extension, and %date% 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", diff --git a/src/lib/components/functional/FancyInput.svelte b/src/lib/components/functional/FancyInput.svelte index f60275b..4bb8711 100644 --- a/src/lib/components/functional/FancyInput.svelte +++ b/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(); @@ -26,6 +28,7 @@ { 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]; \ No newline at end of file diff --git a/src/lib/sections/settings/Conversion.svelte b/src/lib/sections/settings/Conversion.svelte index 8b15fd5..cc15705 100644 --- a/src/lib/sections/settings/Conversion.svelte +++ b/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(); @@ -21,7 +27,9 @@
-

{m["settings.conversion.filename_format"]()}

+

+ {m["settings.conversion.filename_format"]()} +

{@html m["settings.conversion.filename_description"]()}

@@ -33,6 +41,46 @@ type="text" />
+
+
+

+ {m["settings.conversion.quality"]()} +

+

+ {m["settings.conversion.quality_description"]()} +

+
+
+
+

+ {m["settings.conversion.quality_images"]()} +

+ +
+
+

+ {m["settings.conversion.quality_audio"]()} +

+ + b.toString(), + )} + selected={settings.ffmpegQuality.toString()} + onselect={(option: string) => + (settings.ffmpegQuality = + option as ConversionBitrate)} + settingsStyle + /> +
+
+
-
- + diff --git a/src/lib/sections/settings/index.svelte.ts b/src/lib/sections/settings/index.svelte.ts index a53b844..509686e 100644 --- a/src/lib/sections/settings/index.svelte.ts +++ b/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() { diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index e553c9b..1437ef6 100644 --- a/src/routes/about/+page.svelte +++ b/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(