(null);
let abortController: AbortController | null = null;
@@ -12,7 +13,7 @@
const { settings }: { settings: ISettings } = $props();
$effect(() => {
- if (settings.vertdURL) {
+ if (settings.vertdURL) {
if (abortController) abortController.abort();
abortController = new AbortController();
const { signal } = abortController;
@@ -21,17 +22,23 @@
fetch(`${settings.vertdURL}/api/version`, { signal })
.then((res) => {
if (!res.ok) throw new Error("bad response");
+ vertdLoaded.set(false);
return res.json();
})
.then((data) => {
vertdCommit = data.data;
+ vertdLoaded.set(true);
})
.catch((err) => {
- if (err.name !== "AbortError") vertdCommit = null;
+ if (err.name !== "AbortError") {
+ vertdCommit = null;
+ vertdLoaded.set(false);
+ }
});
} else {
if (abortController) abortController.abort();
vertdCommit = null;
+ vertdLoaded.set(false);
}
return () => {
@@ -48,7 +55,7 @@
class="inline-block -mt-1 mr-2 bg-accent-red p-2 rounded-full overflow-visible"
color="black"
/>
- Converting Video
+ Video conversion
- import { page } from "$app/state";
- import { beforeNavigate, goto } from "$app/navigation";
- import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
- import { duration, fly } from "$lib/animation";
- import VertVBig from "$lib/assets/vert-bg.svg?component";
- import featuredImage from "$lib/assets/VERT_Feature.webp";
- import Navbar from "$lib/components/functional/Navbar.svelte";
- import Footer from "$lib/components/visual/Footer.svelte";
- import Logo from "$lib/components/visual/svg/Logo.svelte";
+ import { onMount } from "svelte";
+ import { goto } from "$app/navigation";
- import { fade } from "$lib/animation";
+ import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
+ import { VERT_NAME } from "$lib/consts";
+ import Toast from "$lib/components/visual/Toast.svelte";
+ import * as Layout from "$lib/components/layout";
+ import * as Navbar from "$lib/components/layout/Navbar";
+ import featuredImage from "$lib/assets/VERT_Feature.webp";
+ import { type Toast as ToastType, toasts } from "$lib/store/ToastProvider";
+ import { Settings } from "$lib/sections/settings/index.svelte";
import {
files,
- gradientColor,
isMobile,
effects,
- showGradient,
theme,
+ dropping,
} from "$lib/store/index.svelte";
- import {
- InfoIcon,
- RefreshCw,
- SettingsIcon,
- UploadIcon,
- } from "lucide-svelte";
- import { onMount } from "svelte";
- import { quintOut } from "svelte/easing";
import "../app.scss";
- import { DISCORD_URL, GITHUB_URL_VERT, VERT_NAME } from "$lib/consts";
- import { type Toast as ToastType, toasts } from "$lib/store/ToastProvider";
- import Toast from "$lib/components/visual/Toast.svelte";
- import { Settings } from "$lib/sections/settings/index.svelte";
+
let { children } = $props();
- let dropping = $state(false);
- let goingLeft = $state(false);
let toastList = $state([]);
toasts.subscribe((value) => {
toastList = value as ToastType[];
});
- const items = $derived<
- {
- name: string;
- url: string;
- activeMatch: (pathname: string) => boolean;
- icon: any;
- badge?: number;
- }[]
- >([
- {
- name: "Upload",
- url: "/",
- activeMatch: (pathname) => pathname === "/",
- icon: UploadIcon,
- },
- {
- name: "Convert",
- url: "/convert",
- activeMatch: (pathname) => pathname === "/convert",
- icon: RefreshCw,
- badge: files.files.length,
- },
- {
- name: "Settings",
- url: "/settings",
- activeMatch: (pathname) => pathname.startsWith("/settings"),
- icon: SettingsIcon,
- },
- {
- name: "About",
- url: "/about",
- activeMatch: (pathname) => pathname.startsWith("/about"),
- icon: InfoIcon,
- },
- ]);
-
const dropFiles = (e: DragEvent) => {
e.preventDefault();
- dropping = false;
+ dropping.set(false);
const oldLength = files.files.length;
files.add(e.dataTransfer?.files);
if (oldLength !== files.files.length) goto("/convert");
@@ -87,7 +37,7 @@
const handleDrag = (e: DragEvent, drag: boolean) => {
e.preventDefault();
- dropping = drag;
+ dropping.set(drag);
};
onMount(() => {
@@ -103,20 +53,6 @@
Settings.instance.load();
});
-
- beforeNavigate((e) => {
- const oldIndex = items.findIndex((i) =>
- i.activeMatch(e.from?.url.pathname || ""),
- );
- const newIndex = items.findIndex((i) =>
- i.activeMatch(e.to?.url.pathname || ""),
- );
- if (newIndex < oldIndex) {
- goingLeft = true;
- } else {
- goingLeft = false;
- }
- });
@@ -158,6 +94,7 @@
+
handleDrag(e, false)}
role="region"
>
- {#if dropping}
-
- {/if}
+
-
-
- {#key page.url.pathname}
-
-
- {@render children()}
-
-
- {/key}
-
+
+
{#each toastList as { id, type, message, durations }}
@@ -245,118 +123,10 @@
-
-
-
-{:else if page.url.pathname === "/convert" && $showGradient}
-
-{:else if page.url.pathname === "/convert" && files.files.length === 1 && files.files[0].blobUrl}
-
-
-
![{files.files[0].name}]({files.files[0].blobUrl})
-
-
-
-
@@ -40,7 +51,7 @@
-
VERT Supports...
+
VERT supports...
@@ -51,7 +62,13 @@
Images
-
Animated images are not supported (yet).
+
+
Animated images are not supported (yet).
+
+ Supported formats:
+ {supportedFormats.images}
+
+
@@ -62,9 +79,15 @@
Audio
-
- Fully supported
-
+
+
+ Fully supported
+
+
+ Supported formats:
+ {supportedFormats.audio}
+
+
@@ -74,13 +97,16 @@
Video *
- Video requires special setup. Learn more
-
+
+
+ Video requires special setup. Learn more.
+
+
Supported formats: {supportedFormats.video}
+