diff --git a/messages/en.json b/messages/en.json
index 380b2e5..6fb0e81 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -289,6 +289,11 @@
"us": "Washington, USA",
"custom": "Custom"
},
+ "custom_headers": {
+ "label": "Custom headers",
+ "description": "Add custom headers to be sent with each request to the vertd instance, which could be used for authentication or other purposes (one per line).",
+ "placeholder": "Header-Name: Header Value"
+ },
"conversion_speed": {
"label": "Conversion speed",
"description": "This describes the tradeoff between speed and quality. Faster speeds will result in lower quality, but will get the job done quicker.",
diff --git a/src/lib/components/functional/FancyInput.svelte b/src/lib/components/functional/FancyInput.svelte
index b5b0313..8f1b7ce 100644
--- a/src/lib/components/functional/FancyInput.svelte
+++ b/src/lib/components/functional/FancyInput.svelte
@@ -1,9 +1,14 @@
@@ -22,32 +28,52 @@
{#if type === "checkbox"}
{#if checked}
-
-
+ {:else if multiline}
+
{:else}
{/if}
diff --git a/src/lib/components/functional/popups/SettingsModal.svelte b/src/lib/components/functional/popups/SettingsModal.svelte
index 35524df..4d2eb34 100644
--- a/src/lib/components/functional/popups/SettingsModal.svelte
+++ b/src/lib/components/functional/popups/SettingsModal.svelte
@@ -218,7 +218,7 @@
placeholder={setting.placeholder}
disabled={disabled ||
setting.disabled}
- oninput={(e) =>
+ oninput={(e: any) =>
handleSettingChange(
setting.customInputKey!,
e.currentTarget
@@ -238,7 +238,7 @@
] ??
setting.default}
placeholder={setting.placeholder}
- onchange={(e) =>
+ onchange={(e: any) =>
handleSettingChange(
setting.key,
e.currentTarget.checked,
@@ -295,7 +295,7 @@
] ??
setting.default}
placeholder={setting.placeholder}
- oninput={(e) =>
+ oninput={(e: any) =>
handleSettingChange(
setting.key,
e.currentTarget.value,
diff --git a/src/lib/converters/vertd.svelte.ts b/src/lib/converters/vertd.svelte.ts
index 15bc8af..f693cd8 100644
--- a/src/lib/converters/vertd.svelte.ts
+++ b/src/lib/converters/vertd.svelte.ts
@@ -2,7 +2,10 @@ import VertdErrorComponent from "$lib/components/functional/popups/VertdError.sv
import { error, log } from "$lib/util/logger";
import { m } from "$lib/paraglide/messages";
import { Settings } from "$lib/sections/settings/index.svelte";
-import { VertdInstance } from "$lib/sections/settings/vertdSettings.svelte";
+import {
+ VertdInstance,
+ getVertdCustomHeaders,
+} from "$lib/sections/settings/vertdSettings.svelte";
import { VertFile } from "$lib/types";
import { Converter, FormatInfo } from "./converter.svelte";
import { PUB_DISABLE_FAILURE_BLOCKS } from "$env/static/public";
@@ -60,16 +63,18 @@ export const vertdFetch: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} = async (url: any, options: RequestInit, body?: any) => {
const domain = await VertdInstance.instance.url();
+ const headers = new Headers(options.headers);
+ for (const [key, value] of Object.entries(getVertdCustomHeaders()))
+ headers.set(key, value);
// if there is a body, insert a Content-Type: application/json header
if (body) {
- options.headers = {
- "Content-Type": "application/json",
- ...(options.headers || {}),
- };
+ headers.set("Content-Type", "application/json");
options.body = JSON.stringify(body);
}
+ options.headers = headers;
+
const res = await fetch(domain + url, options);
const text = await res.text();
@@ -250,6 +255,7 @@ const createUploadTask = async (file: VertFile): Promise => {
formData.append("file", file.file, file.name);
const xhr = new XMLHttpRequest();
xhr.open("POST", `${apiUrl}/api/upload`, true);
+ const customHeaders = getVertdCustomHeaders();
const promise = new Promise((resolve, reject) => {
xhr.upload.addEventListener("progress", (e) => {
@@ -285,6 +291,9 @@ const createUploadTask = async (file: VertFile): Promise => {
reject(new Error("Conversion cancelled"));
};
+ for (const [key, value] of Object.entries(customHeaders))
+ xhr.setRequestHeader(key, value);
+
xhr.send(formData);
console.log("sent!");
});
@@ -299,6 +308,7 @@ const downloadFile = async (url: string, file: VertFile): Promise => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
+ const customHeaders = getVertdCustomHeaders();
return new Promise((resolve, reject) => {
xhr.addEventListener("progress", (e) => {
@@ -322,6 +332,9 @@ const downloadFile = async (url: string, file: VertFile): Promise => {
reject(xhr.statusText);
};
+ for (const [key, value] of Object.entries(customHeaders))
+ xhr.setRequestHeader(key, value);
+
xhr.send();
});
};
@@ -712,7 +725,7 @@ export class VertdConverter extends Converter {
// trim/crop/rotate - also have another ui for this prob
const animatedImages = [".gif", ".webp", ".apng"];
- if (animatedImages.includes(input.from)) {
+ if (animatedImages.includes(input.to)) {
return [fps, resolution, metadata];
} else {
return [
diff --git a/src/lib/sections/settings/Vertd.svelte b/src/lib/sections/settings/Vertd.svelte
index 508a6d6..0cd892a 100644
--- a/src/lib/sections/settings/Vertd.svelte
+++ b/src/lib/sections/settings/Vertd.svelte
@@ -8,7 +8,11 @@
import { vertdLoaded } from "$lib/store/index.svelte";
import { m } from "$lib/paraglide/messages";
import { link, sanitize } from "$lib/store/index.svelte";
- import { VertdInstance, type VertdInner } from "./vertdSettings.svelte";
+ import {
+ VertdInstance,
+ getVertdCustomHeaders,
+ type VertdInner,
+ } from "./vertdSettings.svelte";
import FancyInput from "$lib/components/functional/FancyInput.svelte";
let vertdCommit = $state(null);
@@ -24,7 +28,12 @@
vertdCommit = "loading";
VertdInstance.instance
.url()
- .then((u) => fetch(`${u}/api/version`, { signal }))
+ .then((u) =>
+ fetch(`${u}/api/version`, {
+ signal,
+ headers: getVertdCustomHeaders(),
+ }),
+ )
.then((res) => {
if (!res.ok) throw new Error("bad response");
vertdLoaded.set(false);
@@ -57,32 +66,41 @@
/>
{m["settings.vertd.title"]()}
-