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

Fix gradient showing w/ one file

This commit is contained in:
JovannMC 2025-01-14 17:48:33 +03:00
parent 6b49d79a71
commit a3250a25df
No known key found for this signature in database
3 changed files with 48 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import { VertFile } from "$lib/types";
import JSCookie from "js-cookie"; import JSCookie from "js-cookie";
import jsmediatags from "jsmediatags"; import jsmediatags from "jsmediatags";
import type { TagType } from "jsmediatags/types"; import type { TagType } from "jsmediatags/types";
import { writable } from "svelte/store";
class Files { class Files {
public files = $state<VertFile[]>([]); public files = $state<VertFile[]>([]);
@ -161,8 +162,8 @@ class Files {
const date = new Date().toISOString(); const date = new Date().toISOString();
return name return name
.replace(/%date%/g, date) .replace(/%date%/g, date)
.replace(/%name%/g, 'Multi') .replace(/%name%/g, "Multi")
.replace(/%extension%/g, ''); .replace(/%extension%/g, "");
}; };
const a = document.createElement("a"); const a = document.createElement("a");
@ -216,3 +217,4 @@ class Theme {
export const files = new Files(); export const files = new Files();
export const theme = new Theme(); export const theme = new Theme();
export const showGradient = writable(true);

51
src/routes/+layout.svelte
View File

@ -6,7 +6,7 @@
import Navbar from "$lib/components/functional/Navbar.svelte"; import Navbar from "$lib/components/functional/Navbar.svelte";
import Footer from "$lib/components/visual/Footer.svelte"; import Footer from "$lib/components/visual/Footer.svelte";
import Logo from "$lib/components/visual/svg/Logo.svelte"; import Logo from "$lib/components/visual/svg/Logo.svelte";
import { files } from "$lib/store/index.svelte"; import { files, showGradient } from "$lib/store/index.svelte";
import { import {
InfoIcon, InfoIcon,
RefreshCw, RefreshCw,
@ -106,7 +106,7 @@
data-domain={PUB_HOSTNAME || "vert.sh"} data-domain={PUB_HOSTNAME || "vert.sh"}
src="{PUB_PLAUSIBLE_URL}/js/script.pageview-props.tagged-events.js" src="{PUB_PLAUSIBLE_URL}/js/script.pageview-props.tagged-events.js"
></script>{/if} ></script>{/if}
<script src="/coi-serviceworker.min.js"></script> <script src="/coi-serviceworker.min.js"></script>
</svelte:head> </svelte:head>
<div class="flex flex-col min-h-screen h-full"> <div class="flex flex-col min-h-screen h-full">
@ -176,24 +176,31 @@
</div> </div>
</div> </div>
{#if data.pathname === "/"} <!-- Gradients placed here to prevent it overlapping in transitions -->
<div {#if $showGradient}
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none" {#if data.pathname === "/"}
style="background: var(--bg-gradient);" <div
></div> id="gradient-bg"
{:else if data.pathname === "/convert"} class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
<div style="background: var(--bg-gradient);"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none" ></div>
style="background: var(--bg-gradient-pink);" {:else if data.pathname === "/convert"}
></div> <div
{:else if data.pathname === "/settings"} id="gradient-bg"
<div class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none" style="background: var(--bg-gradient-pink);"
style="background: var(--bg-gradient-blue);" ></div>
></div> {:else if data.pathname === "/settings"}
{:else if data.pathname === "/about"} <div
<div id="gradient-bg"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none" class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-pink);" style="background: var(--bg-gradient-blue);"
></div> ></div>
{:else if data.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}
{/if} {/if}

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

@ -6,7 +6,8 @@
import ProgressiveBlur from "$lib/components/visual/effects/ProgressiveBlur.svelte"; import ProgressiveBlur from "$lib/components/visual/effects/ProgressiveBlur.svelte";
import Panel from "$lib/components/visual/Panel.svelte"; import Panel from "$lib/components/visual/Panel.svelte";
import ProgressBar from "$lib/components/visual/ProgressBar.svelte"; import ProgressBar from "$lib/components/visual/ProgressBar.svelte";
import { files } from "$lib/store/index.svelte"; import { log } from "$lib/logger";
import { files, showGradient } from "$lib/store/index.svelte";
import { VertFile } from "$lib/types"; import { VertFile } from "$lib/types";
import { import {
Disc2Icon, Disc2Icon,
@ -17,6 +18,16 @@
XIcon, XIcon,
} from "lucide-svelte"; } from "lucide-svelte";
import { quintOut } from "svelte/easing"; import { quintOut } from "svelte/easing";
$effect(() => {
if (files.files.length === 1 && files.files[0].blobUrl) {
log("blur", "Applying blur effect");
showGradient.set(false);
} else {
log("blur", "Removing blur effect");
showGradient.set(true);
}
});
</script> </script>
{#snippet fileItem(file: VertFile, index: number)} {#snippet fileItem(file: VertFile, index: number)}
@ -121,7 +132,9 @@
> >
{#each files.files as file, i (file.id)} {#each files.files as file, i (file.id)}
{#if files.files.length >= 2 && i === 1} {#if files.files.length >= 2 && i === 1}
<Uploader class="w-full h-full col-start-1 row-start-1 md:col-start-2" /> <Uploader
class="w-full h-full col-start-1 row-start-1 md:col-start-2"
/>
{/if} {/if}
{@render fileItem(file, i)} {@render fileItem(file, i)}
{#if files.files.length < 2} {#if files.files.length < 2}