mirror of https://github.com/VERT-sh/VERT.git
add toasts to ui
This commit is contained in:
parent
772d195ae6
commit
f276dcd7a1
|
@ -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> {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -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(() => {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue