add toasts to ui

This commit is contained in:
JovannMC 2025-02-08 22:08:33 +03:00
parent 772d195ae6
commit f276dcd7a1
No known key found for this signature in database
7 changed files with 48 additions and 25 deletions

View File

@ -2,7 +2,8 @@ import { VertFile } from "$lib/types";
import { Converter } from "./converter.svelte"; import { Converter } from "./converter.svelte";
import { FFmpeg } from "@ffmpeg/ffmpeg"; import { FFmpeg } from "@ffmpeg/ffmpeg";
import { browser } from "$app/environment"; 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 { export class FFmpegConverter extends Converter {
private ffmpeg: FFmpeg = null!; private ffmpeg: FFmpeg = null!;
@ -30,6 +31,7 @@ export class FFmpegConverter extends Converter {
super(); super();
log(["converters", this.name], `created converter`); log(["converters", this.name], `created converter`);
if (!browser) return; if (!browser) return;
try {
this.ffmpeg = new FFmpeg(); this.ffmpeg = new FFmpeg();
(async () => { (async () => {
const baseURL = const baseURL =
@ -41,6 +43,13 @@ export class FFmpegConverter extends Converter {
// this is just to cache the wasm and js for when we actually use it. we're not using this ffmpeg instance // 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; 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> { public async convert(input: VertFile, to: string): Promise<VertFile> {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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