{#key name}
,
diff --git a/src/lib/converters/ffmpeg.svelte.ts b/src/lib/converters/ffmpeg.svelte.ts
index 95cda30..da5bc50 100644
--- a/src/lib/converters/ffmpeg.svelte.ts
+++ b/src/lib/converters/ffmpeg.svelte.ts
@@ -3,6 +3,7 @@ import { Converter } from "./converter.svelte";
import type { OmitBetterStrict } from "$lib/types";
import { FFmpeg } from "@ffmpeg/ffmpeg";
import { browser } from "$app/environment";
+import { log } from "$lib/logger";
export class FFmpegConverter extends Converter {
private ffmpeg: FFmpeg = null!;
@@ -16,26 +17,27 @@ export class FFmpegConverter extends Converter {
".ogg",
".aac",
".m4a",
- ".opus",
".wma",
".m4a",
".amr",
".ac3",
- "alac",
+ ".alac",
".aiff",
];
constructor() {
super();
+ log(["converters", this.name], `created converter`);
if (!browser) return;
this.ffmpeg = new FFmpeg();
(async () => {
- const baseURL = "https://unpkg.com/@ffmpeg/core@latest/dist/esm";
+ const baseURL =
+ "https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.6/dist/esm";
await this.ffmpeg.load({
coreURL: `${baseURL}/ffmpeg-core.js`,
wasmURL: `${baseURL}/ffmpeg-core.wasm`,
});
-
+ // this is just to cache the wasm and js for when we actually use it. we're not using this ffmpeg instance
this.ready = true;
})();
}
@@ -45,13 +47,29 @@ export class FFmpegConverter extends Converter {
to: string,
): Promise {
if (!to.startsWith(".")) to = `.${to}`;
- // clone input.buffer
+ const ffmpeg = new FFmpeg();
+ const baseURL =
+ "https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.6/dist/esm";
+ await ffmpeg.load({
+ coreURL: `${baseURL}/ffmpeg-core.js`,
+ wasmURL: `${baseURL}/ffmpeg-core.wasm`,
+ });
const buf = new Uint8Array(input.buffer);
- await this.ffmpeg.writeFile("input", buf);
- await this.ffmpeg.exec(["-i", "input", "output" + to]);
- const output = (await this.ffmpeg.readFile(
+ await ffmpeg.writeFile("input", buf);
+ log(
+ ["converters", this.name],
+ `wrote ${input.name} to ffmpeg virtual fs`,
+ );
+ await ffmpeg.exec(["-i", "input", "output" + to]);
+ log(["converters", this.name], `executed ffmpeg command`);
+ const output = (await ffmpeg.readFile(
"output" + to,
)) as unknown as Uint8Array;
+ log(
+ ["converters", this.name],
+ `read ${input.name.split(".").slice(0, -1).join(".") + to} from ffmpeg virtual fs`,
+ );
+ ffmpeg.terminate();
return {
...input,
buffer: output.buffer,
diff --git a/src/lib/converters/vips.svelte.ts b/src/lib/converters/vips.svelte.ts
index 8abe9f6..c109118 100644
--- a/src/lib/converters/vips.svelte.ts
+++ b/src/lib/converters/vips.svelte.ts
@@ -3,6 +3,7 @@ import { Converter } from "./converter.svelte";
import VipsWorker from "$lib/workers/vips?worker";
import { browser } from "$app/environment";
import type { WorkerMessage, OmitBetterStrict } from "$lib/types";
+import { log } from "$lib/logger";
export class VipsConverter extends Converter {
private worker: Worker = browser ? new VipsWorker() : null!;
@@ -30,6 +31,7 @@ export class VipsConverter extends Converter {
constructor() {
super();
+ log(["converters", this.name], `created converter`);
if (!browser) return;
this.worker.onmessage = (e) => {
const message: WorkerMessage = e.data;
@@ -41,6 +43,7 @@ export class VipsConverter extends Converter {
input: OmitBetterStrict,
to: string,
): Promise {
+ log(["converters", this.name], `converting ${input.name} to ${to}`);
const res = await this.sendMessage({
type: "convert",
input: input as unknown as IFile,
@@ -48,6 +51,7 @@ export class VipsConverter extends Converter {
});
if (res.type === "finished") {
+ log(["converters", this.name], `converted ${input.name} to ${to}`);
return res.output;
}
diff --git a/src/lib/logger/index.ts b/src/lib/logger/index.ts
new file mode 100644
index 0000000..9cc2063
--- /dev/null
+++ b/src/lib/logger/index.ts
@@ -0,0 +1,42 @@
+import { browser } from "$app/environment";
+
+const randomColorFromStr = (str: string) => {
+ // generate a pleasant color from a string, using HSL
+ let hash = 0;
+ for (let i = 0; i < str.length; i++) {
+ hash = str.charCodeAt(i) + ((hash << 5) - hash);
+ }
+ const h = hash % 360;
+ return `hsl(${h}, 75%, 71%)`;
+};
+
+const whiteOrBlack = (hsl: string) => {
+ // determine if the text should be white or black based on the background color
+ const [, , l] = hsl
+ .replace("hsl(", "")
+ .replace(")", "")
+ .split(",")
+ .map((v) => parseInt(v));
+ return l > 70 ? "black" : "white";
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const log = (prefix: string | string[], ...args: any[]) => {
+ const prefixes = Array.isArray(prefix) ? prefix : [prefix];
+ if (!browser)
+ return console.log(prefixes.map((p) => `[${p}]`).join(" "), ...args);
+ const prefixesWithMeta = prefixes.map((p) => ({
+ prefix: p,
+ bgColor: randomColorFromStr(p),
+ textColor: whiteOrBlack(randomColorFromStr(p)),
+ }));
+
+ console.log(
+ `%c${prefixesWithMeta.map(({ prefix }) => prefix).join(" %c")}`,
+ ...prefixesWithMeta.map(
+ ({ bgColor, textColor }, i) =>
+ `color: ${textColor}; background-color: ${bgColor}; margin-left: ${i === 0 ? 0 : -6}px; padding: 0px 4px 0 4px; border-radius: 0px 9999px 9999px 0px;`,
+ ),
+ ...args,
+ );
+};
diff --git a/src/lib/store/index.svelte.ts b/src/lib/store/index.svelte.ts
index 9e67895..4c88dce 100644
--- a/src/lib/store/index.svelte.ts
+++ b/src/lib/store/index.svelte.ts
@@ -1,3 +1,4 @@
+import { log } from "$lib/logger";
import type { IFile } from "$lib/types";
class Files {
@@ -11,12 +12,18 @@ class Files {
result?: (IFile & { blobUrl: string; animating: boolean }) | null;
}[]
>([]);
- public beenToConverterPage = $state(false);
- public shouldShowAlert = $derived(
- !this.beenToConverterPage && this.files.length > 0,
- );
+}
+
+class Theme {
+ public dark = $state(false);
+ public toggle = () => {
+ this.dark = !this.dark;
+ log(["theme"], `set to ${this.dark ? "dark" : "light"}`);
+ };
}
export const files = new Files();
+export const theme = new Theme();
+
export const outputFilenameOption = ["default", "original"];
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index dc85a70..8bdfe30 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,14 +1,17 @@
@@ -68,7 +88,7 @@
{#key data.pathname}
@@ -105,10 +204,15 @@
start: !$shouldGoBack ? 250 : -250,
end: 0,
},
+ y: {
+ start: 100,
+ end: 0,
+ },
scale: {
start: 0.75,
end: 1,
},
+ origin: "top center",
}}
out:blur={{
duration,
@@ -118,10 +222,15 @@
start: 0,
end: !$shouldGoBack ? -250 : 250,
},
+ y: {
+ start: 0,
+ end: 100,
+ },
scale: {
start: 1,
end: 0.75,
},
+ origin: "top center",
}}
>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000..8348af2
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1,18 @@
+import { browser } from "$app/environment";
+import { theme } from "$lib/store/index.svelte";
+import { getCookie, setCookie } from "typescript-cookie";
+
+export const load = ({ data }) => {
+ if (!browser) return;
+ const themeStr = getCookie("theme");
+ if (typeof themeStr === "undefined") {
+ theme.dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+ setCookie("theme", theme.dark ? "dark" : "light", {
+ sameSite: "strict",
+ });
+ } else {
+ theme.dark = themeStr === "dark";
+ }
+ theme.dark = getCookie("theme") === "dark";
+ return data;
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 526bfa7..78f7607 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
import { goto } from "$app/navigation";
import Uploader from "$lib/components/functional/Uploader.svelte";
import { converters } from "$lib/converters";
+ import { log } from "$lib/logger/index.js";
import { files } from "$lib/store/index.svelte";
import { Check } from "lucide-svelte";
@@ -9,31 +10,79 @@
let ourFiles = $state();
- const runUpload = () => {
+ const runUpload = async () => {
+ const newFilePromises = (ourFiles || []).map(async (f) => {
+ return new Promise<(typeof files.files)[0] | void>(
+ (resolve, reject) => {
+ const from =
+ "." + f.name.toLowerCase().split(".").slice(-1);
+ const converter = converters.find((c) =>
+ c.supportedFormats.includes(from),
+ );
+ if (!converter) resolve();
+ const to =
+ converter?.supportedFormats.find((f) => f !== from) ||
+ converters[0].supportedFormats[0];
+ log(
+ ["uploader", "converter"],
+ `converting ${from} to ${to} using ${converter?.name || "... no converter??"}`,
+ );
+ const canvas = document.createElement("canvas");
+ const ctx = canvas.getContext("2d");
+ const img = new Image();
+ img.src = URL.createObjectURL(f);
+ const maxSize = 512;
+ img.onload = () => {
+ const scale = Math.max(
+ maxSize / img.width,
+ maxSize / img.height,
+ );
+ canvas.width = img.width * scale;
+ canvas.height = img.height * scale;
+ ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
+ // get the blob
+ canvas.toBlob(
+ (blob) => {
+ resolve({
+ file: f,
+ from,
+ to,
+ blobUrl:
+ blob === null
+ ? ""
+ : URL.createObjectURL(blob),
+ id: Math.random().toString(36).substring(2),
+ });
+ },
+ "image/jpeg",
+ 0.75,
+ );
+ };
+
+ img.onerror = () => {
+ resolve({
+ file: f,
+ from,
+ to,
+ blobUrl: "",
+ id: Math.random().toString(36).substring(2),
+ });
+ };
+ },
+ );
+ });
+ let oldLen = files.files.length;
files.files = [
...files.files,
- ...(ourFiles || []).map((f, i) => {
- const from = "." + f.name.toLowerCase().split(".").slice(-1);
- const converter = converters.find((c) =>
- c.supportedFormats.includes(from),
- );
- const to =
- converter?.supportedFormats.find((f) => f !== from) ||
- converters[0].supportedFormats[0];
- return {
- file: f,
- from,
- to,
- blobUrl: URL.createObjectURL(f),
- id: Math.random().toString(36).substring(2),
- };
- }),
+ ...(await Promise.all(newFilePromises)).filter(
+ (f) => typeof f !== "undefined",
+ ),
];
-
+ let newLen = files.files.length;
+ log(["uploader"], `handled ${newLen - oldLen} files`);
ourFiles = [];
- if (files.files.length > 0 && !files.beenToConverterPage)
- goto("/convert");
+ if (files.files.length > 0) goto("/convert");
};
@@ -83,7 +132,7 @@
- {#each ["Very fast, all processing done on device", "No ads, and open source", "Beautiful and straightforward UI"] as text, i}
+ {#each ["Very fast, all processing done on device", "No file or size limit", "No ads, and open source", "Beautiful and straightforward UI"] as text, i}
{@render sellingPoint(text)}
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 83c8c62..fb8b32f 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -54,27 +54,36 @@
🖼️ supported formats
- As of right now, VERT only supports image conversion of most popular - formats. Don't worry though, as we'll add more options and support for - more formats in the future! + As of right now, VERT supports image and audio conversion of most + popular formats. We'll add support for more formats in the future!
- 👨💻 source code + 🔗 resources
-- VERT is licensed under AGPL-3.0, and the source code can be found on GitHub. -
+-
+
- + Source code (hosted on GitHub, licensed under AGPL-3.0) + + +
- + Discord server (for chit-chat, suggestions, and support) + +