From d55230f1ef8cde1eb517054137f47d9aac261765 Mon Sep 17 00:00:00 2001
From: not-nullptr <needhelpwithrift@gmail.com>
Date: Thu, 14 Nov 2024 14:42:19 +0000
Subject: [PATCH] feat: add delete button, improve loading bar contrast

---
 src/lib/components/visual/ProgressBar.svelte |  6 +++--
 src/lib/converters/ffmpeg.svelte.ts          |  4 ----
 src/lib/converters/vips.svelte.ts            |  1 -
 src/routes/convert/+page.svelte              | 24 ++++++++++++++++----
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/visual/ProgressBar.svelte b/src/lib/components/visual/ProgressBar.svelte
index 6145819..e7e4c19 100644
--- a/src/lib/components/visual/ProgressBar.svelte
+++ b/src/lib/components/visual/ProgressBar.svelte
@@ -10,9 +10,11 @@
 	const percent = $derived(((progress - min) / (max - min)) * 100);
 </script>
 
-<div class="w-full h-1 bg-foreground-muted rounded-full overflow-hidden">
+<div
+	class="w-full h-1 dynadark:bg-foreground-muted-alt bg-foreground-muted rounded-full overflow-hidden"
+>
 	<div
-		class="h-full bg-accent-background"
+		class="h-full bg-accent-background dynadark:bg-accent-foreground"
 		style="width: {percent}%; transition: 500ms linear width;"
 	></div>
 </div>
diff --git a/src/lib/converters/ffmpeg.svelte.ts b/src/lib/converters/ffmpeg.svelte.ts
index c5bf456..973feb3 100644
--- a/src/lib/converters/ffmpeg.svelte.ts
+++ b/src/lib/converters/ffmpeg.svelte.ts
@@ -45,10 +45,6 @@ export class FFmpegConverter extends Converter {
 		if (!to.startsWith(".")) to = `.${to}`;
 		const ffmpeg = new FFmpeg();
 		ffmpeg.on("progress", (progress) => {
-			log(
-				["converters", this.name],
-				`progress for "${input.name}": ${progress.progress * 100}%`,
-			);
 			input.progress = progress.progress * 100;
 		});
 		const baseURL =
diff --git a/src/lib/converters/vips.svelte.ts b/src/lib/converters/vips.svelte.ts
index 4bd2871..05feff2 100644
--- a/src/lib/converters/vips.svelte.ts
+++ b/src/lib/converters/vips.svelte.ts
@@ -88,7 +88,6 @@ export class VipsConverter extends Converter {
 
 			this.worker.addEventListener("message", onMessage);
 			const msg = { ...message, id, worker: null };
-			log(["converters", this.name], `sending message`, msg);
 			try {
 				this.worker.postMessage(msg);
 			} catch (e) {
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
index f929ce6..4bc5492 100644
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@@ -138,6 +138,11 @@
 		URL.revokeObjectURL(url);
 		a.remove();
 	};
+
+	const deleteAll = () => {
+		files.files = [];
+		goto("/");
+	};
 </script>
 
 <svelte:head>
@@ -210,13 +215,15 @@
 					</div>
 				</div>
 
-				<div class="grid md:grid-cols-2 gap-3 mt-4">
+				<div class="flex sm:flex-row flex-col gap-3 mt-4">
 					<button
 						onclick={convertAll}
 						class={clsx("btn flex-grow", {
-							"btn-highlight": disabled,
+							"btn-highlight":
+								disabled && !processings.some((p) => p),
 						})}
-						disabled={!allConvertersReady}
+						disabled={!allConvertersReady ||
+							processings.some((p) => p)}
 					>
 						{#if allConvertersReady}
 							Convert {files.files.length > 1 ? "All" : ""}
@@ -232,6 +239,13 @@
 						{disabled}
 						>Download {files.files.length > 1 ? "All" : ""}</button
 					>
+					<button
+						onclick={deleteAll}
+						disabled={processings.some((p) => p)}
+						class="btn flex-grow"
+					>
+						Delete All
+					</button>
 				</div>
 			</div>
 			<div
@@ -276,7 +290,7 @@
 								<div class="w-full lg:flex-grow">
 									<div
 										class={clsx(
-											"py-2 px-3 lg:w-full lg:flex rounded-xl transition-colors duration-300 sm:w-fit w-full flex-shrink sm:text-left text-center",
+											"py-2 px-3 lg:justify-between lg:w-full lg:flex rounded-xl transition-colors duration-300 sm:w-fit w-full flex-shrink sm:text-left text-center",
 											{
 												"bg-accent-background text-accent-foreground":
 													file.result,
@@ -286,7 +300,7 @@
 										)}
 									>
 										<h3
-											class="lg:flex-grow flex-shrink whitespace-nowrap overflow-hidden text-ellipsis sm:max-w-96"
+											class="lg:flex-grow lg:w-full flex-shrink whitespace-nowrap overflow-hidden text-ellipsis sm:max-w-96"
 										>
 											{file.file.name}
 										</h3>