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

Add placeholder BGs for files

This commit is contained in:
JovannMC 2025-02-06 07:54:59 +03:00
parent b1f135df4c
commit ba4288b3be
No known key found for this signature in database
2 changed files with 51 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app.scss
View File

@ -54,21 +54,41 @@
var(--accent-pink),
hsla(303, 100%, 50%, 0) 25%
);
--bg-gradient-pink-alt: linear-gradient(
to top,
var(--accent-pink),
hsl(303, 100%, 91%) 100%
);
--bg-gradient-red: linear-gradient(
to bottom,
var(--accent-red),
hsla(348, 100%, 50%, 0) 25%
);
--bg-gradient-red-alt: linear-gradient(
to top,
var(--accent-red),
hsl(348, 100%, 91%) 100%
);
--bg-gradient-purple: linear-gradient(
to bottom,
var(--accent-purple),
hsla(264, 100%, 50%, 0) 25%
);
--bg-gradient-purple-alt: linear-gradient(
to top,
var(--accent-purple),
hsl(264, 100%, 91%) 100%
);
--bg-gradient-blue: linear-gradient(
to bottom,
var(--accent-blue),
hsla(220, 100%, 50%, 0) 25%
);
--bg-gradient-blue-alt: linear-gradient(
to top,
var(--accent-blue),
hsl(220, 100%, 91%) 100%
);
--bg-panel: hsl(0, 0%, 100%);
--bg-panel-accented: hsl(0, 0%, 92%);
--bg-separator: hsl(0, 0%, 88%);

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

@ -1,9 +1,7 @@
<script lang="ts">
import { duration, fade } from "$lib/animation";
import ConversionPanel from "$lib/components/functional/ConversionPanel.svelte";
import Dropdown from "$lib/components/functional/Dropdown.svelte";
import Uploader from "$lib/components/functional/Uploader.svelte";
import ProgressiveBlur from "$lib/components/visual/effects/ProgressiveBlur.svelte";
import Panel from "$lib/components/visual/Panel.svelte";
import ProgressBar from "$lib/components/visual/ProgressBar.svelte";
import {
@ -13,14 +11,15 @@
} from "$lib/store/index.svelte";
import { VertFile } from "$lib/types";
import {
Disc2Icon,
AudioLines,
DownloadIcon,
FileMusicIcon,
FileQuestionIcon,
ImageIcon,
ImageOffIcon,
RotateCwIcon,
XIcon,
} from "lucide-svelte";
import { quintOut } from "svelte/easing";
$effect(() => {
if (files.files.length === 1 && files.files[0].blobUrl) {
@ -31,8 +30,12 @@
// 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((file) => file.converter?.name === "ffmpeg");
const allImages = files.files.every((file) => file.converter?.name !== "ffmpeg");
const allAudio = files.files.every(
(file) => file.converter?.name === "ffmpeg",
);
const allImages = files.files.every(
(file) => file.converter?.name !== "ffmpeg",
);
if (files.files.length === 0 || (!allAudio && !allImages)) {
gradientColor.set("");
@ -49,7 +52,7 @@
{#if !file.converter}
<FileQuestionIcon size="24" class="flex-shrink-0" />
{:else if isAudio}
<Disc2Icon size="24" class="flex-shrink-0" />
<AudioLines size="24" class="flex-shrink-0" />
{:else}
<ImageIcon size="24" class="flex-shrink-0" />
{/if}
@ -93,11 +96,26 @@
class="flex gap-4 w-full h-[152px] overflow-hidden relative"
>
<div class="w-1/2 h-full overflow-hidden rounded-xl">
<img
class="object-cover w-full h-full"
src={file.blobUrl}
alt={file.name}
/>
{#if file.blobUrl}
<img
class="object-cover w-full h-full"
src={file.blobUrl}
alt={file.name}
/>
{:else}
<div
class="w-full h-full flex items-center justify-center"
style="background: var({isAudio
? '--bg-gradient-purple-alt'
: '--bg-gradient-blue-alt'})"
>
{#if isAudio}
<FileMusicIcon size="56" />
{:else}
<ImageOffIcon size="56" />
{/if}
</div>
{/if}
</div>
</div>
<div
@ -159,4 +177,4 @@
<Uploader class="w-full h-full" />
{/if}
</div>
</div>
</div>