feat: use logging more often

src/lib/converters/ffmpeg.svelte.ts

@@ -37,7 +37,6 @@ export class FFmpegConverter extends Converter {
 				coreURL: `${baseURL}/ffmpeg-core.js`,
 				wasmURL: `${baseURL}/ffmpeg-core.wasm`,
 			});
-
 			this.ready = true;
 		})();
 	}
@@ -47,13 +46,21 @@ export class FFmpegConverter extends Converter {
 		to: string,
 	): Promise<IFile> {
 		if (!to.startsWith(".")) to = `.${to}`;
-		// clone input.buffer
 		const buf = new Uint8Array(input.buffer);
 		await this.ffmpeg.writeFile("input", buf);
+		log(
+			["converters", this.name],
+			`wrote ${input.name} to ffmpeg virtual fs`,
+		);
 		await this.ffmpeg.exec(["-i", "input", "output" + to]);
+		log(["converters", this.name], `executed ffmpeg command`);
 		const output = (await this.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`,
+		);
 		return {
 			...input,
 			buffer: output.buffer,

src/lib/converters/vips.svelte.ts

@@ -43,6 +43,7 @@ export class VipsConverter extends Converter {
 		input: OmitBetterStrict<IFile, "extension">,
 		to: string,
 	): Promise<IFile> {
+		log(["converters", this.name], `converting ${input.name} to ${to}`);
 		const res = await this.sendMessage({
 			type: "convert",
 			input: input as unknown as IFile,
@@ -50,6 +51,7 @@ export class VipsConverter extends Converter {
 		});
 
 		if (res.type === "finished") {
+			log(["converters", this.name], `converted ${input.name} to ${to}`);
 			return res.output;
 		}
 

src/lib/store/index.svelte.ts

@@ -1,3 +1,4 @@
+import { log } from "$lib/logger";
 import type { IFile } from "$lib/types";
 
 class Files {
@@ -21,6 +22,7 @@ class Theme {
 	public dark = $state(false);
 	public toggle = () => {
 		this.dark = !this.dark;
+		log(["theme"], `set to ${this.dark ? "dark" : "light"}`);
 	};
 }
 

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";
 
@@ -22,8 +23,10 @@
 					const to =
 						converter?.supportedFormats.find((f) => f !== from) ||
 						converters[0].supportedFormats[0];
-					// create a canvas and clamp the width or height to 1024, whichever is larger
-					// also, maintain aspect ratio
+					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();
@@ -68,13 +71,15 @@
 				},
 			);
 		});
+		let oldLen = files.files.length;
 		files.files = [
 			...files.files,
 			...(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)

src/routes/convert/+page.svelte

@@ -5,6 +5,7 @@
 	import ProgressiveBlur from "$lib/components/visual/effects/ProgressiveBlur.svelte";
 	import { converters } from "$lib/converters";
 	import type { Converter } from "$lib/converters/converter.svelte";
+	import { log } from "$lib/logger";
 	import { files } from "$lib/store/index.svelte";
 	import clsx from "clsx";
 	import { ArrowRight, XIcon } from "lucide-svelte";
@@ -67,6 +68,7 @@
 	});
 
 	const convertAll = async () => {
+		const perf = performance.now();
 		files.files.forEach((f) => (f.result = null));
 		const promises: Promise<void>[] = [];
 		for (let i = 0; i < files.files.length; i++) {
@@ -106,6 +108,9 @@
 		}
 
 		await Promise.all(promises);
+		const ms = performance.now() - perf;
+		const seconds = (ms / 1000).toFixed(2);
+		log(["converter"], `converted all files in ${seconds}s`);
 	};
 
 	const downloadAll = async () => {