add toasts to ui

src/lib/converters/ffmpeg.svelte.ts

@@ -2,7 +2,8 @@ import { VertFile } from "$lib/types";
 import { Converter } from "./converter.svelte";
 import { FFmpeg } from "@ffmpeg/ffmpeg";
 import { browser } from "$app/environment";
-import { log } from "$lib/logger";
+import { error, log } from "$lib/logger";
+import { addToast } from "$lib/store/ToastProvider";
 
 export class FFmpegConverter extends Converter {
 	private ffmpeg: FFmpeg = null!;
@@ -30,17 +31,25 @@ export class FFmpegConverter extends Converter {
 		super();
 		log(["converters", this.name], `created converter`);
 		if (!browser) return;
-		this.ffmpeg = new FFmpeg();
-		(async () => {
-			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;
-		})();
+		try {
+			this.ffmpeg = new FFmpeg();
+			(async () => {
+				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;
+			})();
+		} catch (err) {
+			error(["converters", this.name], `error loading ffmpeg: ${err}`);
+			addToast(
+				"error",
+				`Error loading ffmpeg, some features may not work.`,
+			);
+		}
 	}
 
 	public async convert(input: VertFile, to: string): Promise<VertFile> {

src/lib/converters/vips.svelte.ts

@@ -1,5 +1,6 @@
 import { browser } from "$app/environment";
 import { error, log } from "$lib/logger";
+import { addToast } from "$lib/store/ToastProvider";
 import type { OmitBetterStrict, WorkerMessage } from "$lib/types";
 import { VertFile } from "$lib/types";
 import VipsWorker from "$lib/workers/vips?worker&url";
@@ -48,6 +49,7 @@ export class VipsConverter extends Converter {
                 this.ready = true;
             } else if (message.type === "error") {
                 error(["converters", this.name], `error in worker: ${message.error}`);
+				addToast("error", `Error in VIPS worker, some features may not work.`);
 				throw new Error(message.error);
 			}
 		};

src/lib/sections/settings/Conversion.svelte

@@ -3,6 +3,7 @@
 	import FancyTextInput from "$lib/components/functional/FancyInput.svelte";
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import { log } from "$lib/logger";
+	import { addToast } from "$lib/store/ToastProvider";
 	import { RefreshCwIcon, SaveAllIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
 
@@ -11,8 +12,14 @@
 	function save() {
 		log(["settings"], "Saving settings");
 		if (!browser) return;
-		localStorage.setItem("filenameFormat", filenameFormat);
-		log(["settings"], `Saving filename format: ${filenameFormat}`);
+		try {
+			localStorage.setItem("filenameFormat", filenameFormat);
+			log(["settings"], `Saving filename format: ${filenameFormat}`);
+			addToast("success", "Settings saved!");
+		} catch (error) {
+			log(["settings", "error"], `Failed to save settings: ${error}`);
+			addToast("error", "Failed to save settings!");
+		}
 	}
 
 	onMount(() => {

src/lib/store/ToastProvider.ts

@@ -28,7 +28,7 @@ function addToast(
 
 	durations = durations ?? {
 		enter: 300,
-		stay: disappearing || disappearing === undefined ? 5000 : Infinity,
+		stay: disappearing || disappearing === undefined ? 5000 : 86400000, // 24h cause why not
 		exit: 500,
 	};
 
@@ -37,7 +37,7 @@ function addToast(
 		switch (type) {
 			case "error":
 			case "warning":
-				durations.stay = Infinity;
+				durations.stay = 86400000; // 24h cause why not
 				break;
 		}
 	}

src/lib/types/file.svelte.ts

@@ -1,4 +1,6 @@
 import type { Converter } from "$lib/converters/converter.svelte";
+import { error } from "$lib/logger";
+import { addToast } from "$lib/store/ToastProvider";
 
 export class VertFile {
 	public id: string = Math.random().toString(36).slice(2, 8);
@@ -40,9 +42,16 @@ export class VertFile {
 		this.result = null;
 		this.progress = 0;
 		this.processing = true;
-		const res = await this.converter.convert(this, this.to);
+		let res;
+		try {
+			res = await this.converter.convert(this, this.to);
+			this.result = res;
+		} catch (err) {
+			error(["files"], "Error converting file", err);
+			addToast("error", `Error converting file: ${this.file.name}`);
+			this.result = null;
+		}
 		this.processing = false;
-		this.result = res;
 		return res;
 	}
 
@@ -55,7 +64,7 @@ export class VertFile {
 		const format = (name: string) => {
 			const date = new Date().toISOString();
 			const baseName = this.file.name.replace(/\.[^/.]+$/, "");
-			const originalExtension = this.file.name.split('.').pop()!;
+			const originalExtension = this.file.name.split(".").pop()!;
 			return name
 				.replace(/%date%/g, date)
 				.replace(/%name%/g, baseName)

src/routes/about/+page.svelte

@@ -7,6 +7,7 @@
 	import avatarRealmy from "$lib/assets/avatars/realmy.jpg";
 	import avatarJovannMC from "$lib/assets/avatars/jovannmc.jpg";
 	import { GITHUB_API_URL } from "$lib/consts";
+	import { addToast } from "$lib/store/ToastProvider";
 
 	interface Donator {
 		name: string;
@@ -59,6 +60,7 @@
 		try {
 			const response = await fetch(`${GITHUB_API_URL}/contributors`);
 			if (!response.ok) {
+				addToast("error", "Error fetching GitHub contributors");
 				throw new Error(`HTTP error, status: ${response.status}`);
 			}
 			const allContribs = await response.json();

src/routes/settings/+page.svelte

@@ -1,11 +1,7 @@
 <script lang="ts">
 	import * as Settings from "$lib/sections/settings";
-	import { addToast } from "$lib/store/ToastProvider";
 	import { SettingsIcon } from "lucide-svelte";
 
-    function showToast() {
-        addToast("success", "This is a success message!");
-    }
 </script>
 
 <div class="flex flex-col h-full items-center">
@@ -26,6 +22,4 @@
             <Settings.Appearance />
 		</div>
 	</div>
-
-	<button onclick={showToast}>Show Toast</button>
 </div>