diff --git a/src/app.scss b/src/app.scss index 77faba0..45409bc 100644 --- a/src/app.scss +++ b/src/app.scss @@ -259,4 +259,20 @@ body { h6 { @apply font-display font-semibold; } + + code { + @apply font-mono bg-gray-200 rounded-md px-1 dynadark:bg-panel-alt dynadark:text-white; + } + + p a { + @apply text-accent underline; + } + + input[type="text"] { + @apply w-full p-3 rounded-lg bg-panel border-2 border-button pl-3 pr-[4rem]; + } + + input[type="text"]::placeholder { + @apply text-muted font-normal; + } } diff --git a/src/lib/components/functional/Uploader.svelte b/src/lib/components/functional/Uploader.svelte index c2fc624..7ccb42b 100644 --- a/src/lib/components/functional/Uploader.svelte +++ b/src/lib/components/functional/Uploader.svelte @@ -24,11 +24,19 @@ if (oldLength !== files.files.length) goto("/convert"); }; - const uploadFiles = () => { + const uploadFiles = async () => { const input = document.createElement("input"); input.type = "file"; input.multiple = true; - input.accept = converters + // filter converters to ones where await converter.valid() is true + const filteredConverters = ( + await Promise.all( + converters.map(async (c) => { + if (await c.valid()) return c; + }), + ) + ).filter((c) => typeof c !== "undefined"); + input.accept = filteredConverters .map((c) => c.supportedFormats.join(",")) .join(","); input.onchange = (e) => { diff --git a/src/lib/consts.ts b/src/lib/consts.ts index ca9b209..2b1f62f 100644 --- a/src/lib/consts.ts +++ b/src/lib/consts.ts @@ -1,4 +1,4 @@ -export const GITHUB_URL = 'https://github.com/VERT-sh/VERT'; -export const GITHUB_API_URL = 'https://api.github.com/repos/VERT-sh/VERT'; - -export const DISCORD_URL = 'https://discord.gg/kqevGxYPak'; +export const GITHUB_URL_VERT = "https://github.com/VERT-sh/VERT"; +export const GITHUB_URL_VERTD = "https://github.com/VERT-sh/vertd"; +export const GITHUB_API_URL = "https://api.github.com/repos/VERT-sh/VERT"; +export const DISCORD_URL = "https://discord.gg/kqevGxYPak"; diff --git a/src/lib/converters/converter.svelte.ts b/src/lib/converters/converter.svelte.ts index 4bf4163..9183c2b 100644 --- a/src/lib/converters/converter.svelte.ts +++ b/src/lib/converters/converter.svelte.ts @@ -28,4 +28,8 @@ export class Converter { ): Promise { throw new Error("Not implemented"); } + + public async valid(): Promise { + return true; + } } diff --git a/src/lib/converters/index.ts b/src/lib/converters/index.ts index 9a86904..79c84bf 100644 --- a/src/lib/converters/index.ts +++ b/src/lib/converters/index.ts @@ -1,9 +1,9 @@ import { FFmpegConverter } from "./ffmpeg.svelte"; -//import { VertdConverter } from "./vertd.svelte"; +import { VertdConverter } from "./vertd.svelte"; import { VipsConverter } from "./vips.svelte"; export const converters = [ new VipsConverter(), new FFmpegConverter(), - //new VertdConverter(), + new VertdConverter(), ]; diff --git a/src/lib/converters/vertd.svelte.ts b/src/lib/converters/vertd.svelte.ts index f00a71d..08d4fbd 100644 --- a/src/lib/converters/vertd.svelte.ts +++ b/src/lib/converters/vertd.svelte.ts @@ -1,4 +1,5 @@ import { log } from "$lib/logger"; +import { Settings } from "$lib/sections/settings/index.svelte"; import { VertFile } from "$lib/types"; import { Converter } from "./converter.svelte"; @@ -25,13 +26,15 @@ interface UploadResponse { interface RouteMap { "/api/upload": UploadResponse; + "/api/version": string; } const vertdFetch = async ( url: U, options: RequestInit, ): Promise => { - const res = await fetch(`http://127.0.0.1:8080${url}`, options); + const domain = Settings.instance.settings.vertdURL; + const res = await fetch(`${domain}${url}`, options); const text = await res.text(); let json: VertdResponse = null!; try { @@ -99,7 +102,8 @@ export class VertdConverter extends Converter { public ready = $state(false); public reportsProgress = true; public supportedFormats = [".mkv", ".mp4", ".webm", ".avi"]; - private log: (msg: string) => void = () => {}; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + private log: (...msg: any[]) => void = () => {}; constructor() { super(); @@ -126,7 +130,10 @@ export class VertdConverter extends Converter { }); return new Promise((resolve, reject) => { - const ws = new WebSocket(`ws://localhost:8080/api/ws`); + const apiUrl = Settings.instance.settings.vertdURL; + const ws = new WebSocket( + `ws://${apiUrl.replace("http://", "").replace("https://", "")}/api/ws`, + ); ws.onopen = () => { this.log("opened ws connection to vertd"); const msg: StartJobMessage = { @@ -156,7 +163,7 @@ export class VertdConverter extends Converter { case "jobFinished": { this.log("job finished"); ws.close(); - const url = `http://localhost:8080/api/download/${msg.data.jobId}/${uploadRes.auth}`; + const url = `${apiUrl}/api/download/${msg.data.jobId}/${uploadRes.auth}`; this.log(`downloading from ${url}`); const res = await fetch(url).then((res) => res.blob()); resolve( @@ -178,4 +185,20 @@ export class VertdConverter extends Converter { }; }); } + + public async valid(): Promise { + if (!Settings.instance.settings.vertdURL) { + return false; + } + + try { + await vertdFetch("/api/version", { + method: "GET", + }); + return true; + } catch (e) { + this.log(e as unknown as string); + return false; + } + } } diff --git a/src/lib/sections/about/Credits.svelte b/src/lib/sections/about/Credits.svelte index 9254c53..5fd9a6a 100644 --- a/src/lib/sections/about/Credits.svelte +++ b/src/lib/sections/about/Credits.svelte @@ -1,7 +1,7 @@ @@ -64,7 +64,7 @@ Big thanks to all these people for helping out! @@ -76,7 +76,7 @@ Seems like no one has contributed yet... diff --git a/src/lib/sections/about/Resources.svelte b/src/lib/sections/about/Resources.svelte index 68c27cb..3c0d71f 100644 --- a/src/lib/sections/about/Resources.svelte +++ b/src/lib/sections/about/Resources.svelte @@ -1,6 +1,6 @@ @@ -24,7 +24,7 @@ Discord { - const savedSettings = localStorage.getItem("settings"); - if (savedSettings) { - const parsedSettings = JSON.parse(savedSettings); - settings = { - ...settings, - ...parsedSettings, - }; - } - }); + const { settings }: { settings: Settings } = $props(); @@ -67,32 +43,11 @@ - -
-
-

Second option

-

- This is just a sample option. This should not show up on - the live website. JOVANN, DO NOT ADD THIS TO THE LIVE - WEBSITE. PLEASE. JOVANN!!!! -

-
-
- -
- -
diff --git a/src/lib/sections/settings/Vertd.svelte b/src/lib/sections/settings/Vertd.svelte new file mode 100644 index 0000000..65e1514 --- /dev/null +++ b/src/lib/sections/settings/Vertd.svelte @@ -0,0 +1,45 @@ + + + +
+

+ + vertd +

+
+
+

+ VERT allows fully functional video conversion via the + vertd project. It acts as an FFmpeg wrapper on + a given server, allowing for GPU accelerated local* video + conversion. We currently don't provide our own instance due + to upkeep costs of servers with the necessary hardware for + speedy conversion. You can host your own instance by + downloading the binaries + here. +

+
+

Instance URL

+ +
+
+
+
+ diff --git a/src/lib/sections/settings/index.svelte.ts b/src/lib/sections/settings/index.svelte.ts new file mode 100644 index 0000000..7df8e4e --- /dev/null +++ b/src/lib/sections/settings/index.svelte.ts @@ -0,0 +1,31 @@ +export { default as Appearance } from "./Appearance.svelte"; +export { default as Conversion } from "./Conversion.svelte"; +export { default as Vertd } from "./Vertd.svelte"; + +export interface ISettings { + filenameFormat: string; + vertdURL: string; +} + +export class Settings { + public static instance = new Settings(); + + public settings: ISettings = $state({ + filenameFormat: "VERT_%name%", + vertdURL: "", + }); + + public save() { + localStorage.setItem("settings", JSON.stringify(this.settings)); + } + + public load() { + const ls = localStorage.getItem("settings"); + if (!ls) return; + const settings: ISettings = JSON.parse(ls); + this.settings = { + ...this.settings, + ...settings, + }; + } +} diff --git a/src/lib/sections/settings/index.ts b/src/lib/sections/settings/index.ts deleted file mode 100644 index a216ea0..0000000 --- a/src/lib/sections/settings/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as Appearance } from "./Appearance.svelte"; -export { default as Conversion } from "./Conversion.svelte"; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e5ca680..7d7117e 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -28,9 +28,10 @@ import { quintOut } from "svelte/easing"; import "../app.scss"; import { writable } from "svelte/store"; - import { DISCORD_URL, GITHUB_URL } from "$lib/consts"; + import { DISCORD_URL, GITHUB_URL_VERT } from "$lib/consts"; import { type Toast as ToastType, toasts } from "$lib/store/ToastProvider"; import Toast from "$lib/components/visual/Toast.svelte"; + import { Settings } from "$lib/sections/settings/index.svelte"; let { children } = $props(); let shouldGoBack = writable(false); @@ -123,6 +124,10 @@ goingLeft = false; } }); + + onMount(() => { + Settings.instance.load(); + }); @@ -239,7 +244,7 @@ class="w-full h-full" items={{ //"Privacy policy": "#", - "Source code": GITHUB_URL, + "Source code": GITHUB_URL_VERT, "Discord server": DISCORD_URL, }} /> diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte index 74eb035..7bbbc43 100644 --- a/src/routes/settings/+page.svelte +++ b/src/routes/settings/+page.svelte @@ -1,7 +1,47 @@
@@ -13,13 +53,13 @@
-
- + +
- -
- + +
+