From 4adb00b1fa7101a93650dee635acf658fba3667c Mon Sep 17 00:00:00 2001 From: nullptr <62841684+not-nullptr@users.noreply.github.com> Date: Thu, 14 Nov 2024 10:08:05 +0000 Subject: [PATCH] feat: new logger (#16) * feat: new logger * feat: use logging more often --- src/lib/converters/converter.svelte.ts | 1 + src/lib/converters/ffmpeg.svelte.ts | 14 +++++++-- src/lib/converters/vips.svelte.ts | 4 +++ src/lib/logger/index.ts | 42 ++++++++++++++++++++++++++ src/lib/store/index.svelte.ts | 3 +- src/routes/+layout.ts | 4 ++- src/routes/+page.svelte | 12 +++++--- src/routes/convert/+page.svelte | 5 +++ 8 files changed, 76 insertions(+), 9 deletions(-) create mode 100644 src/lib/logger/index.ts diff --git a/src/lib/converters/converter.svelte.ts b/src/lib/converters/converter.svelte.ts index 1a1b27f..076b001 100644 --- a/src/lib/converters/converter.svelte.ts +++ b/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, diff --git a/src/lib/converters/ffmpeg.svelte.ts b/src/lib/converters/ffmpeg.svelte.ts index cdb351d..7977af7 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,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 { 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, 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 8362c15..5f0fbd3 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 { @@ -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"}`); }; } diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts index 5e4a6de..8348af2 100644 --- a/src/routes/+layout.ts +++ b/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"; } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 7ffc27b..7c1e9e4 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"; @@ -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 - // 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(); @@ -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) diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte index 9524661..b027c46 100644 --- a/src/routes/convert/+page.svelte +++ b/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[] = []; 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 () => {