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

More shrexy progress bar when progress isn't indicated

This commit is contained in:
Realmy 2024-11-14 17:17:36 +01:00
parent 18d8e57bb5
commit 03484be5d6
2 changed files with 69 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/lib/components/visual/ProgressBar.svelte
View File

@ -1,20 +1,65 @@
<script lang="ts">
type Props = {
progress: number;
progress: number | null;
min: number;
max: number;
};
let { progress, min, max }: Props = $props();
const percent = $derived(((progress - min) / (max - min)) * 100);
const percent = $derived(
progress ? ((progress - min) / (max - min)) * 100 : null,
);
</script>
<div
class="w-full h-1 dynadark:bg-foreground-muted-alt bg-foreground-muted rounded-full overflow-hidden"
class="w-full h-1 dynadark:bg-foreground-muted-alt bg-foreground-muted rounded-full overflow-hidden relative"
>
<div
class="h-full bg-accent-background dynadark:bg-accent-foreground"
style="width: {percent}%; transition: 500ms linear width;"
class="h-full bg-accent-background dynadark:bg-accent-foreground absolute left-0 top-0"
class:percentless-animation={!progress}
style={percent
? "width: {percent}%; transition: 500ms linear width;"
: ""}
></div>
</div>
<style>
.percentless-animation {
width: 100%;
animation:
percentless-animation 1s ease infinite,
left-right 1s ease infinite;
}
@keyframes percentless-animation {
0% {
width: 0%;
}
50% {
width: 100%;
}
100% {
width: 0%;
}
}
@keyframes left-right {
49% {
left: 0;
right: auto;
}
50% {
left: auto;
right: 0;
}
100% {
left: auto;
right: 0;
}
}
</style>

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

@ -188,7 +188,7 @@
</div>
{:else}
<div
class="italic w-fit text-foreground-muted-alt h-11 flex items-center row-start-1 col-start-1"
class="italic w-fit text-foreground-muted-alt flex items-center row-start-1 col-start-1"
transition:blur={{
blurMultiplier: 8,
duration,
@ -203,7 +203,7 @@
</div>
</div>
<div class="flex flex-row gap-3 mt-4">
<div class="grid gap-3 sm:grid-cols-3 mt-4">
<button
onclick={convertAll}
class={clsx("btn flex-grow", {
@ -236,10 +236,7 @@
</button>
</div>
</div>
<div
class="w-full gap-4 grid"
style="grid-template-columns: repeat(2, 1fr)"
>
<div class="w-full gap-4 grid md:grid-cols-2">
{#each reversedFiles as file, i (file.id)}
{@const converter = (() => {
return converters.find((c) =>
@ -247,7 +244,7 @@
);
})()}
<div
class="rounded-xl relative"
class="relative"
animate:flip={{ duration, easing: quintOut }}
out:blur={{
duration,
@ -257,7 +254,7 @@
>
<div
class={clsx(
"py-0 px-3 flex relative flex-shrink-0 items-center w-full rounded-xl",
"py-0 px-3 flex relative flex-shrink-0 items-center w-full rounded-xl h-48",
{
"initial-fade": !finisheds[i],
},
@ -301,7 +298,7 @@
if (files.files.length === 0)
goto("/");
}}
class="ml-2 mr-1 lg:block hidden flex-shrink-0"
class="ml-2 mr-1 flex-shrink-0"
>
<XIcon size="18" />
</button>
@ -315,7 +312,7 @@
>
{#if processings[files.files.length - i - 1]}
<div
class="w-full lg:block hidden"
class="w-full"
transition:blur={{
blurMultiplier: 6,
duration,
@ -329,9 +326,12 @@
<ProgressBar
min={0}
max={100}
progress={file.result
? 100
: file.progress}
progress={file.converter
?.reportsProgress
? file.result
? 100
: file.progress
: null}
/>
</div>
{/if}
@ -339,10 +339,13 @@
class="flex items-center gap-3 w-full"
>
{#if converter && converter.supportedFormats.includes(file.from)}
<span class="whitespace-nowrap"
>Convert to</span
<span>from</span>
<span
class="py-2 px-3 font-display bg-foreground text-background rounded-xl"
>{file.from}</span
>
<div class="w-full">
<span>to</span>
<div class="inline-flex">
<Dropdown
options={converter.supportedFormats}
bind:selected={files