feat: new logger (#16)

* feat: new logger

* feat: use logging more often

src/lib/converters/converter.svelte.ts

@@ -18,6 +18,7 @@ export class Converter {
 	 * @param to The format to convert to. Includes the dot.
 	 */
 	public ready: boolean = $state(false);
+
 	public async convert(
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		input: OmitBetterStrict<IFile, "extension">,

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,7 +17,6 @@ export class FFmpegConverter extends Converter {
 		".ogg",
 		".aac",
 		".m4a",
-		".opus",
 		".wma",
 		".m4a",
 		".amr",
@@ -27,6 +27,7 @@ export class FFmpegConverter extends Converter {
 
 	constructor() {
 		super();
+		log(["converters", this.name], `created converter`);
 		if (!browser) return;
 		this.ffmpeg = new FFmpeg();
 		(async () => {
@@ -36,7 +37,6 @@ export class FFmpegConverter extends Converter {
 				coreURL: `${baseURL}/ffmpeg-core.js`,
 				wasmURL: `${baseURL}/ffmpeg-core.wasm`,
 			});
-
 			this.ready = true;
 		})();
 	}
@@ -46,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

@@ -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<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,
@@ -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;
 		}
 

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,
+	);
+};

src/lib/store/index.svelte.ts

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

src/routes/+layout.ts

@@ -7,7 +7,9 @@ export const load = ({ data }) => {
 	const themeStr = getCookie("theme");
 	if (typeof themeStr === "undefined") {
 		theme.dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-		setCookie("theme", theme.dark ? "dark" : "light");
+		setCookie("theme", theme.dark ? "dark" : "light", {
+			sameSite: "strict",
+		});
 	} else {
 		theme.dark = themeStr === "dark";
 	}

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";
 
@@ -18,13 +19,14 @@
 					const converter = converters.find((c) =>
 						c.supportedFormats.includes(from),
 					);
-					console.log(converter);
 					if (!converter) resolve();
 					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
+					log(
-					// also, maintain aspect ratio
+						["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();
@@ -69,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 () => {