RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'nightly'

This commit is contained in:
JovannMC 2025-02-10 23:40:26 +03:00
parent 360064eee2 1f1b8d68de
commit 21faba31f1
No known key found for this signature in database
21 changed files with 433 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/functional/ConversionPanel.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { files } from "$lib/store/index.svelte";
import { effects, files } from "$lib/store/index.svelte";
import { FolderArchiveIcon, RefreshCw } from "lucide-svelte";
import Panel from "../visual/Panel.svelte";
import Dropdown from "./Dropdown.svelte";
@ -11,14 +11,14 @@
<div class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full">
<button
onclick={() => files.convertAll()}
class="btn highlight flex gap-3 max-md:w-full"
class="btn {$effects ? "" : "!scale-100"} highlight flex gap-3 max-md:w-full"
disabled={!files.ready}
>
<RefreshCw size="24" />
<p>Convert all</p>
</button>
<button
class="btn flex gap-3 max-md:w-full"
class="btn {$effects ? "" : "!scale-100"} flex gap-3 max-md:w-full"
disabled={!files.ready || !files.results}
onclick={() => files.downloadAll()}
>

4
src/lib/components/functional/Uploader.svelte
View File

@ -3,7 +3,7 @@
import Panel from "../visual/Panel.svelte";
import clsx from "clsx";
import { onMount } from "svelte";
import { files } from "$lib/store/index.svelte";
import { effects, files } from "$lib/store/index.svelte";
import { converters } from "$lib/converters";
import { goto } from "$app/navigation";
@ -61,7 +61,7 @@
<button
onclick={uploadFiles}
bind:this={uploaderButton}
class={clsx(`hover:scale-105 active:scale-100 duration-200 ${classList}`)}
class={clsx(`hover:scale-105 active:scale-100 ${$effects ? "" : "!scale-100"} duration-200 ${classList}`)}
>
<Panel
class="flex justify-center items-center w-full h-full flex-col pointer-events-none"

19
src/lib/components/visual/Footer.svelte → src/lib/components/layout/Footer.svelte
View File

@ -1,22 +1,23 @@
<script lang="ts">
type Props = {
class: string;
items: { [name: string]: string };
};
import { GITHUB_URL_VERT, DISCORD_URL } from "$lib/consts";
const { class: classList, items }: Props = $props();
const items = Object.entries({
//"Privacy policy": "#",
"Source code": GITHUB_URL_VERT,
"Discord server": DISCORD_URL,
});
const year = new Date().getFullYear();
const links = $derived(Object.entries(items));
</script>
<footer class={classList}>
<footer
class="hidden md:block w-full h-14 border-t border-separator fixed bottom-0 mt-12"
>
<div
class="w-full h-full flex items-center justify-center text-muted gap-3 relative"
>
<p>© {year} VERT.</p>
{#each links as [name, url] (name)}
{#each items as [name, url] (name)}
<!-- bullet point -->
<p>•</p>
<a

93
src/lib/components/layout/Gradients.svelte Normal file
View File

@ -0,0 +1,93 @@
<script lang="ts">
import { page } from "$app/state";
import { duration } from "$lib/animation";
import VertVBig from "$lib/assets/vert-bg.svg?component";
import { files, gradientColor, showGradient } from "$lib/store/index.svelte";
import { quintOut } from "svelte/easing";
import { fade } from "$lib/animation";
</script>
{#if page.url.pathname === "/"}
<div
class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
transition:fade={{
duration,
easing: quintOut,
}}
>
<VertVBig
class="fill-[--fg] opacity-10 dynadark:opacity-5 scale-[200%] md:scale-[80%]"
/>
</div>
<div
id="gradient-bg"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient);"
transition:fade={{
duration,
easing: quintOut,
}}
></div>
{:else if page.url.pathname === "/convert" && $showGradient}
{#key $gradientColor}
<div
id="gradient-bg"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-{$gradientColor || 'pink'});"
transition:fade={{
duration,
easing: quintOut,
}}
></div>
{/key}
{:else if page.url.pathname === "/convert" && files.files.length === 1 && files.files[0].blobUrl}
<div
class="fixed w-screen h-screen opacity-75 overflow-hidden top-0 left-0 -z-50 pointer-events-none grid grid-cols-1 grid-rows-1 scale-105"
>
<div
class="w-full relative"
transition:fade={{
duration,
easing: quintOut,
}}
>
<img
class="object-cover w-full h-full blur-md"
src={files.files[0].blobUrl}
alt={files.files[0].name}
/>
<div
class="absolute top-0 left-0 w-full h-full"
style="background: var(--bg-gradient-image);"
></div>
<!-- <div class="absolute bottom-0 left-0 w-full h-full">
<ProgressiveBlur
direction="bottom"
endIntensity={256}
iterations={8}
fadeTo="var(--bg)"
/>
</div> -->
</div>
</div>
{:else if page.url.pathname === "/settings"}
<div
id="gradient-bg"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-blue);"
transition:fade={{
duration,
easing: quintOut,
}}
></div>
{:else if page.url.pathname === "/about"}
<div
id="gradient-bg"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-pink);"
transition:fade={{
duration,
easing: quintOut,
}}
></div>
{/if}

18
src/lib/components/layout/MobileLogo.svelte Normal file
View File

@ -0,0 +1,18 @@
<script>
import Logo from "$lib/components/visual/svg/Logo.svelte";
</script>
<div class="flex md:hidden justify-center items-center pb-8 pt-4">
<a
class="flex items-center justify-center bg-panel p-2 rounded-[20px] shadow-panel"
href="/"
>
<div
class="h-14 bg-accent rounded-[14px] flex items-center justify-center"
>
<div class="w-28 h-5">
<Logo />
</div>
</div>
</a>
</div>

66
src/lib/components/functional/Navbar.svelte → src/lib/components/layout/Navbar/Base.svelte
View File

@ -2,24 +2,56 @@
import { browser } from "$app/environment";
import { page } from "$app/state";
import { duration, fade } from "$lib/animation";
import { effects, setTheme } from "$lib/store/index.svelte";
import { effects, files, goingLeft, setTheme } from "$lib/store/index.svelte";
import clsx from "clsx";
import { MoonIcon, SunIcon } from "lucide-svelte";
import {
InfoIcon,
MoonIcon,
RefreshCw,
SettingsIcon,
SunIcon,
UploadIcon,
} from "lucide-svelte";
import { quintOut } from "svelte/easing";
import Panel from "../visual/Panel.svelte";
import Logo from "../visual/svg/Logo.svelte";
import Panel from "../../visual/Panel.svelte";
import Logo from "../../visual/svg/Logo.svelte";
import { beforeNavigate } from "$app/navigation";
type Props = {
items: {
const items = $derived<
{
name: string;
url: string;
activeMatch: (pathname: string) => boolean;
icon: any;
badge?: number;
}[];
};
let { items }: Props = $props();
}[]
>([
{
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,
},
]);
let links = $state<HTMLAnchorElement[]>([]);
let container = $state<HTMLDivElement>();
@ -33,6 +65,20 @@
const selectedIndex = $derived(
items.findIndex((i) => i.activeMatch(page.url.pathname)),
);
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.set(true)
} else {
goingLeft.set(false)
}
});
</script>
{#snippet link(item: (typeof items)[0], index: number)}

7
src/lib/components/layout/Navbar/Desktop.svelte Normal file
View File

@ -0,0 +1,7 @@
<script lang="ts">
import Navbar from "./Base.svelte";
</script>
<div class="hidden md:flex p-8 w-screen justify-center">
<Navbar />
</div>

9
src/lib/components/layout/Navbar/Mobile.svelte Normal file
View File

@ -0,0 +1,9 @@
<script lang="ts">
import Navbar from "./Base.svelte";
</script>
<div class="fixed md:hidden bottom-0 left-0 w-screen p-8 justify-center z-50">
<div class="flex flex-col justify-center items-center">
<Navbar />
</div>
</div>

2
src/lib/components/layout/Navbar/index.ts Normal file
View File

@ -0,0 +1,2 @@
export { default as Desktop } from "./Desktop.svelte";
export { default as Mobile } from "./Mobile.svelte";

44
src/lib/components/layout/PageContent.svelte Normal file
View File

@ -0,0 +1,44 @@
<script lang="ts">
import { page } from "$app/state";
import { duration } from "$lib/animation";
import { goingLeft, isMobile } from "$lib/store/index.svelte";
import { quintOut } from "svelte/easing";
import { fly, fade } from "$lib/animation";
let { children } = $props();
</script>
<div class="grid grid-rows-1 grid-cols-1 h-full flex-grow">
{#key page.url.pathname}
<div
class="row-start-1 col-start-1"
in:fly={{
x: $goingLeft ? -window.innerWidth : window.innerWidth,
duration,
easing: quintOut,
delay: 25,
}}
out:fly={{
x: $goingLeft ? window.innerWidth : -window.innerWidth,
duration,
easing: quintOut,
}}
>
<div
class="flex flex-col h-full pb-32"
in:fade={{
duration,
easing: quintOut,
delay: $isMobile ? 0 : 100,
}}
out:fade={{
duration,
easing: quintOut,
delay: $isMobile ? 0 : 200,
}}
>
{@render children()}
</div>
</div>
{/key}
</div>

46
src/lib/components/layout/UploadRegion.svelte Normal file
View File

@ -0,0 +1,46 @@
<script lang="ts">
import { duration, fade } from "$lib/animation";
import { dropping, effects } from "$lib/store/index.svelte";
import { quintOut } from "svelte/easing";
</script>
{#if $dropping}
<div
class="fixed w-screen h-screen opacity-40 dynadark:opacity-20 z-[100] pointer-events-none blur-2xl {$effects
? 'dragoverlay'
: 'bg-accent-blue'}"
class:_dragover={dropping && $effects}
transition:fade={{
duration,
easing: quintOut,
}}
></div>
{/if}
<style>
.dragoverlay {
animation: dragoverlay-animation 3s infinite linear;
}
@keyframes dragoverlay-animation {
0% {
@apply bg-accent-pink;
}
25% {
@apply bg-accent-blue;
}
50% {
@apply bg-accent-purple;
}
75% {
@apply bg-accent-red;
}
100% {
@apply bg-accent-pink;
}
}
</style>

5
src/lib/components/layout/index.ts Normal file
View File

@ -0,0 +1,5 @@
export { default as UploadRegion } from './UploadRegion.svelte';
export { default as Gradients } from './Gradients.svelte';
export { default as PageContent } from './PageContent.svelte';
export { default as MobileLogo } from './MobileLogo.svelte';
export { default as Footer } from './Footer.svelte';

13
src/lib/sections/about/Donate.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import FancyInput from "$lib/components/functional/FancyInput.svelte";
import Panel from "$lib/components/visual/Panel.svelte";
import { effects } from "$lib/store/index.svelte";
import {
CalendarHeartIcon,
HandCoinsIcon,
@ -41,29 +42,29 @@
<div class="flex flex-col gap-3 w-full">
<div class="flex gap-3 w-full">
<button
class="btn flex-1 p-4 rounded-lg bg-accent-red text-black flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg bg-accent-red text-black flex items-center justify-center"
>
<HandCoinsIcon size="24" class="inline-block mr-2" />
One-time
</button>
<button
class="btn flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
>
<CalendarHeartIcon size="24" class="inline-block mr-2" />
Monthly
</button>
</div>
<div class="flex gap-3 w-full">
<button class="btn bg-accent-red text-black p-4 rounded-lg flex-1"
<button class="btn {$effects ? "" : "!scale-100"} bg-accent-red text-black p-4 rounded-lg flex-1"
>$1 USD</button
>
<button
class="btn bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
class="btn {$effects ? "" : "!scale-100"} bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
>$5 USD</button
>
<button
class="btn bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
class="btn {$effects ? "" : "!scale-100"} bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
>$10 USD</button
>
<!-- <div class="relative flex items-center flex-[2]">
@ -86,7 +87,7 @@
</p>
<button
class="btn flex-1 p-3 rounded-3xl bg-accent-red text-black flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-3 rounded-3xl bg-accent-red text-black flex items-center justify-center"
>
<WalletIcon size="24" class="inline-block mr-2" />
Pay now

5
src/lib/sections/about/Resources.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import Panel from "$lib/components/visual/Panel.svelte";
import { DISCORD_URL, GITHUB_URL_VERT } from "$lib/consts";
import { effects } from "$lib/store/index.svelte";
import { GithubIcon, LinkIcon, MessageCircleMoreIcon } from "lucide-svelte";
</script>
@ -18,7 +19,7 @@
href={DISCORD_URL}
target="_blank"
rel="noopener noreferrer"
class="btn flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
>
<MessageCircleMoreIcon size="24" class="inline-block mr-2" />
Discord
@ -27,7 +28,7 @@
href={GITHUB_URL_VERT}
target="_blank"
rel="noopener noreferrer"
class="btn flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
>
<GithubIcon size="24" class="inline-block mr-2" />
Source

13
src/lib/sections/settings/Appearance.svelte
View File

@ -55,6 +55,11 @@
if (effectsUnsubscribe) effectsUnsubscribe();
if (themeUnsubscribe) themeUnsubscribe();
});
$effect(() => {
updateEffectsClasses($effects);
updateThemeClasses($theme);
});
</script>
<Panel class="flex flex-col gap-8 p-6">
@ -80,7 +85,7 @@
<button
bind:this={lightElement}
onclick={() => setTheme("light")}
class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<SunIcon size="24" class="inline-block mr-2" />
Light
@ -89,7 +94,7 @@
<button
bind:this={darkElement}
onclick={() => setTheme("dark")}
class="btn flex-1 p-4 rounded-lg text-black flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black flex items-center justify-center"
>
<MoonIcon size="24" class="inline-block mr-2" />
Dark
@ -110,7 +115,7 @@
<button
bind:this={enableEffectsElement}
onclick={() => setEffects(true)}
class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<PlayIcon size="24" class="inline-block mr-2" />
Enable
@ -119,7 +124,7 @@
<button
bind:this={disableEffectsElement}
onclick={() => setEffects(false)}
class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<PauseIcon size="24" class="inline-block mr-2" />
Disable

11
src/lib/sections/settings/Vertd.svelte
View File

@ -5,6 +5,7 @@
import type { ISettings } from "./index.svelte";
import clsx from "clsx";
import Dropdown from "$lib/components/functional/Dropdown.svelte";
import { vertdLoaded } from "$lib/store/index.svelte";
let vertdCommit = $state<string | null>(null);
let abortController: AbortController | null = null;
@ -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
</h2>
<p
class={clsx("text-sm font-normal", {

10
src/lib/store/ToastProvider.ts
View File

@ -32,16 +32,6 @@ function addToast(
exit: 500,
};
// if "disappearing" not set, default error/warning to infinite duration
if (disappearing === undefined) {
switch (type) {
case "error":
case "warning":
durations.stay = 86400000; // 24h cause why not
break;
}
}
const newToast: Toast = {
id,
type,

3
src/lib/store/index.svelte.ts
View File

@ -229,6 +229,9 @@ export function setEffects(effectsEnabled: boolean) {
export const files = new Files();
export const showGradient = writable(true);
export const gradientColor = writable("");
export const goingLeft = writable(false);
export const dropping = writable(false);
export const vertdLoaded = writable(false);
export const isMobile = writable(false);
export const effects = writable(true);

282
src/routes/+layout.svelte
View File

@ -1,85 +1,35 @@
<script lang="ts">
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<ToastType[]>([]);
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;
}
});
</script>
<svelte:head>
@ -158,6 +94,7 @@
<script src="/coi-serviceworker.min.js"></script>
</svelte:head>
<!-- FIXME: if user resizes between desktop/mobile, highlight of page disappears (only shows on original size) -->
<div
class="flex flex-col min-h-screen h-full"
ondrop={dropFiles}
@ -166,77 +103,18 @@
ondragleave={(e) => handleDrag(e, false)}
role="region"
>
{#if dropping}
<div
class="fixed w-screen h-screen opacity-40 dynadark:opacity-20 z-[100] pointer-events-none blur-2xl {$effects
? 'dragoverlay'
: 'bg-accent-blue'}"
class:_dragover={dropping && $effects}
transition:fade={{
duration,
easing: quintOut,
}}
></div>
{/if}
<Layout.UploadRegion />
<!-- FIXME: if user resizes between desktop/mobile, highlight of page disappears (only shows on original size) -->
<div>
<!-- Mobile logo -->
<div class="flex md:hidden justify-center items-center pb-8 pt-4">
<a
class="flex items-center justify-center bg-panel p-2 rounded-[20px] shadow-panel"
href="/"
>
<div
class="h-14 bg-accent rounded-[14px] flex items-center justify-center"
>
<div class="w-28 h-5">
<Logo />
</div>
</div>
</a>
</div>
<!-- Desktop navbar -->
<div class="hidden md:flex p-8 w-screen justify-center">
<Navbar {items} />
</div>
<Layout.MobileLogo />
<Navbar.Desktop />
</div>
<div class="grid grid-rows-1 grid-cols-1 h-full flex-grow">
{#key page.url.pathname}
<div
class="row-start-1 col-start-1"
in:fly={{
x: goingLeft ? -window.innerWidth : window.innerWidth,
duration,
easing: quintOut,
delay: 25,
}}
out:fly={{
x: goingLeft ? window.innerWidth : -window.innerWidth,
duration,
easing: quintOut,
}}
>
<div
class="flex flex-col h-full pb-32"
in:fade={{
duration,
easing: quintOut,
delay: $isMobile ? 0 : 100,
}}
out:fade={{
duration,
easing: quintOut,
delay: $isMobile ? 0 : 200,
}}
>
{@render children()}
</div>
</div>
{/key}
</div>
<!--
SvelteKit throws the following warning when developing - safe to ignore as we render the children in this component:
`<slot />` or `{@render ...}` tag missing — inner content will not be rendered
-->
<Layout.PageContent {children} />
<div class="fixed bottom-28 md:bottom-0 right-0 p-4 space-y-4 z-50">
{#each toastList as { id, type, message, durations }}
@ -245,118 +123,10 @@
</div>
<div>
<div
class="hidden md:block w-full h-14 border-t border-separator fixed bottom-0 mt-12"
>
<Footer
class="w-full h-full"
items={{
//"Privacy policy": "#",
"Source code": GITHUB_URL_VERT,
"Discord server": DISCORD_URL,
}}
/>
</div>
<!-- Mobile navbar -->
<div
class="fixed md:hidden bottom-0 left-0 w-screen p-8 justify-center z-50"
>
<div class="flex flex-col justify-center items-center">
<Navbar {items} />
</div>
</div>
<Layout.Footer />
<Navbar.Mobile />
</div>
</div>
<!-- Gradients placed here to prevent it overlapping in transitions -->
{#if page.url.pathname === "/"}
<div
class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
>
<VertVBig
class="fill-[--fg] opacity-10 dynadark:opacity-5 scale-[200%] md:scale-[80%]"
/>
</div>
<div
id="gradient-bg"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient);"
></div>
{:else if page.url.pathname === "/convert" && $showGradient}
<div
id="gradient-bg"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-{$gradientColor || 'pink'});"
></div>
{:else if page.url.pathname === "/convert" && files.files.length === 1 && files.files[0].blobUrl}
<div
class="fixed w-screen h-screen opacity-75 overflow-hidden top-0 left-0 -z-50 pointer-events-none grid grid-cols-1 grid-rows-1 scale-105"
>
<div
class="w-full relative"
transition:fade={{
duration,
easing: quintOut,
}}
>
<img
class="object-cover w-full h-full blur-md"
src={files.files[0].blobUrl}
alt={files.files[0].name}
/>
<div
class="absolute top-0 left-0 w-full h-full"
style="background: var(--bg-gradient-image);"
></div>
<!-- <div class="absolute bottom-0 left-0 w-full h-full">
<ProgressiveBlur
direction="bottom"
endIntensity={256}
iterations={8}
fadeTo="var(--bg)"
/>
</div> -->
</div>
</div>
{:else if page.url.pathname === "/settings"}
<div
id="gradient-bg"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-blue);"
></div>
{:else if page.url.pathname === "/about"}
<div
id="gradient-bg"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-pink);"
></div>
{/if}
<style>
.dragoverlay {
animation: dragoverlay-animation 3s infinite linear;
}
@keyframes dragoverlay-animation {
0% {
@apply bg-accent-pink;
}
25% {
@apply bg-accent-blue;
}
50% {
@apply bg-accent-purple;
}
75% {
@apply bg-accent-red;
}
100% {
@apply bg-accent-pink;
}
}
</style>
<Layout.Gradients />

50
src/routes/+page.svelte
View File

@ -10,7 +10,18 @@
// -- JovannMC
import Uploader from "$lib/components/functional/Uploader.svelte";
import { converters } from "$lib/converters";
import { AudioLines, Check, Film, Image } from "lucide-svelte";
const getSupportedFormats = (name: string) =>
converters.find((c) => c.name === name)?.supportedFormats.join(", ") ||
"none";
const supportedFormats = {
images: getSupportedFormats("libvips"),
audio: getSupportedFormats("ffmpeg"),
video: getSupportedFormats("vertd"),
};
</script>
<div class="max-w-6xl w-full mx-auto px-6 md:px-8">
@ -40,7 +51,7 @@
<hr />
<div class="mt-10 md:mt-16">
<h2 class="text-center text-4xl">VERT Supports...</h2>
<h2 class="text-center text-4xl">VERT supports...</h2>
<div class="grid gap-4 md:grid-cols-3 mt-8">
<div class="file-category-card">
@ -51,7 +62,13 @@
<span>Images</span>
</div>
<p>Animated images are not supported (yet).</p>
<div class="flex flex-col text-center justify-center">
<p>Animated images are not supported (yet).</p>
<p>
<b>Supported formats:</b>
{supportedFormats.images}
</p>
</div>
</div>
<div class="file-category-card">
@ -62,9 +79,15 @@
<span>Audio</span>
</div>
<p class="flex items-center justify-center gap-2">
<Check size="20" /> Fully supported
</p>
<div class="flex flex-col text-center justify-between">
<p class="flex items-center justify-center gap-2">
<Check size="20" /> Fully supported
</p>
<p>
<b>Supported formats:</b>
{supportedFormats.audio}
</p>
</div>
</div>
<div class="file-category-card">
@ -74,13 +97,16 @@
</div>
<span>Video *</span>
</div>
<p>
Video requires special setup. <a
target="_blank"
href="https://github.com/VERT-sh/VERT/wiki/How-to-convert-video-with-VERT"
>Learn more</a
>
</p>
<div class="flex flex-col text-center justify-between">
<p>
Video requires special setup. <a
target="_blank"
href="https://github.com/VERT-sh/VERT/wiki/How-to-convert-video-with-VERT"
>Learn more</a
>.
</p>
<p><b>Supported formats:</b> {supportedFormats.video}</p>
</div>
</div>
</div>
</div>

51
src/routes/convert/+page.svelte
View File

@ -4,10 +4,13 @@
import Uploader from "$lib/components/functional/Uploader.svelte";
import Panel from "$lib/components/visual/Panel.svelte";
import ProgressBar from "$lib/components/visual/ProgressBar.svelte";
import { converters } from "$lib/converters";
import {
effects,
files,
gradientColor,
showGradient,
vertdLoaded,
} from "$lib/store/index.svelte";
import { VertFile } from "$lib/types";
import {
@ -24,12 +27,6 @@
} from "lucide-svelte";
$effect(() => {
if (files.files.length === 1 && files.files[0].blobUrl) {
showGradient.set(false);
} else {
showGradient.set(true);
}
// Set gradient color depending on the file types
// TODO: if more file types added, add a "fileType" property to the file object
const allAudio = files.files.every(
@ -44,6 +41,12 @@
(file) => file.converter?.name === "vertd",
);
if (files.files.length === 1 && files.files[0].blobUrl && !allVideos) {
showGradient.set(false);
} else {
showGradient.set(true);
}
if (
files.files.length === 0 ||
(!allAudio && !allImages && !allVideos)
@ -95,12 +98,38 @@
</button>
</div>
{#if !file.converter}
{#if file.name.startsWith("vertd")}
<div
class="h-full flex flex-col text-center justify-center text-failure"
>
<p class="font-body font-bold">
We can't convert this file.
</p>
<p class="font-normal">
what are you doing..? you're supposed to run the vertd
server!
</p>
</div>
{:else}
<div
class="h-full flex flex-col text-center justify-center text-failure"
>
<p class="font-body font-bold">
We can't convert this file.
</p>
<p class="font-normal">
Only image, video, and audio files are supported
</p>
</div>
{/if}
{:else if isVideo && !$vertdLoaded}
<div
class="h-full flex flex-col text-center justify-center text-failure"
>
<p class="font-body font-bold">We can't convert this file.</p>
<p class="font-normal">
Only image, video, and audio files are supported
Could not find the vertd instance to start video conversion.
Are you sure the instance URL is set correctly?
</p>
</div>
{:else}
@ -148,7 +177,9 @@
/>
<div class="w-full flex items-center justify-between">
<button
class="btn p-0 w-14 h-14 text-black {isAudio
class="btn {$effects
? ''
: '!scale-100'} p-0 w-14 h-14 text-black {isAudio
? 'bg-accent-purple'
: isVideo
? 'bg-accent-red'
@ -159,7 +190,9 @@
<RotateCwIcon size="24" />
</button>
<button
class="btn p-0 w-14 h-14"
class="btn {$effects
? ''
: '!scale-100'} p-0 w-14 h-14"
onclick={file.download}
disabled={!file.result}
>