mirror of https://github.com/VERT-sh/VERT.git
feat: remove mobile optimizations
This commit is contained in:
not-nullptr
parent
d55230f1ef
commit
4b9ae955d7
|
|
@ -20,9 +20,6 @@
|
||||||
Array.from({ length: files.files.length }, () => false),
|
Array.from({ length: files.files.length }, () => false),
|
||||||
);
|
);
|
||||||
|
|
||||||
let isSm = $state(false);
|
|
||||||
let isLg = $state(false);
|
|
||||||
|
|
||||||
let processings = $state<boolean[]>([]);
|
let processings = $state<boolean[]>([]);
|
||||||
|
|
||||||
const convertersRequired = $derived.by(() => {
|
const convertersRequired = $derived.by(() => {
|
||||||
|
|
@ -50,15 +47,6 @@
|
||||||
convertersRequired.every((c) => c.ready),
|
convertersRequired.every((c) => c.ready),
|
||||||
);
|
);
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
isSm = window.innerWidth < 640;
|
|
||||||
isLg = window.innerWidth > 1024;
|
|
||||||
window.addEventListener("resize", () => {
|
|
||||||
isSm = window.innerWidth < 640;
|
|
||||||
isLg = window.innerWidth > 1024;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
let disabled = $derived(files.files.some((f) => !f.result));
|
let disabled = $derived(files.files.some((f) => !f.result));
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
|
@ -215,7 +203,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex sm:flex-row flex-col gap-3 mt-4">
|
<div class="flex flex-row gap-3 mt-4">
|
||||||
<button
|
<button
|
||||||
onclick={convertAll}
|
onclick={convertAll}
|
||||||
class={clsx("btn flex-grow", {
|
class={clsx("btn flex-grow", {
|
||||||
|
|
@ -249,7 +237,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-full flex flex-col gap-4 lg:grid"
|
class="w-full gap-4 grid"
|
||||||
style="grid-template-columns: repeat(2, 1fr)"
|
style="grid-template-columns: repeat(2, 1fr)"
|
||||||
>
|
>
|
||||||
{#each reversedFiles as file, i (file.id)}
|
{#each reversedFiles as file, i (file.id)}
|
||||||
|
|
@ -259,7 +247,7 @@
|
||||||
);
|
);
|
||||||
})()}
|
})()}
|
||||||
<div
|
<div
|
||||||
class="rounded-xl relative lg:h-48"
|
class="rounded-xl relative"
|
||||||
animate:flip={{ duration, easing: quintOut }}
|
animate:flip={{ duration, easing: quintOut }}
|
||||||
out:blur={{
|
out:blur={{
|
||||||
duration,
|
duration,
|
||||||
|
|
@ -269,10 +257,9 @@
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class={clsx(
|
class={clsx(
|
||||||
"sm:h-full lg:py-0 py-4 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",
|
||||||
{
|
{
|
||||||
"initial-fade": !finisheds[i],
|
"initial-fade": !finisheds[i],
|
||||||
processing: processings[i] && !isLg,
|
|
||||||
},
|
},
|
||||||
)}
|
)}
|
||||||
style="--delay: {i * 50}ms; z-index: {files.files
|
style="--delay: {i * 50}ms; z-index: {files.files
|
||||||
|
|
@ -285,12 +272,12 @@
|
||||||
style="width: {file.progress}%; transition: width 500ms linear;"
|
style="width: {file.progress}%; transition: width 500ms linear;"
|
||||||
></div> -->
|
></div> -->
|
||||||
<div
|
<div
|
||||||
class="flex gap-8 lg:flex-grow lg:h-full sm:gap-0 lg:py-4 lg:justify-normal sm:flex-row lg:flex-col flex-col items-center justify-between w-full z-50 relative sm:h-fit h-full"
|
class="flex gap-8 flex-grow h-full py-4 justify-normal flex-col items-center w-full z-50 relative"
|
||||||
>
|
>
|
||||||
<div class="w-full lg:flex-grow">
|
<div class="w-full flex-grow">
|
||||||
<div
|
<div
|
||||||
class={clsx(
|
class={clsx(
|
||||||
"py-2 px-3 lg:justify-between lg:w-full lg:flex rounded-xl transition-colors duration-300 sm:w-fit w-full flex-shrink sm:text-left text-center",
|
"py-2 px-3 justify-between w-full flex rounded-xl transition-colors duration-300 flex-shrink text-left",
|
||||||
{
|
{
|
||||||
"bg-accent-background text-accent-foreground":
|
"bg-accent-background text-accent-foreground":
|
||||||
file.result,
|
file.result,
|
||||||
|
|
@ -300,7 +287,7 @@
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<h3
|
<h3
|
||||||
class="lg:flex-grow lg:w-full flex-shrink whitespace-nowrap overflow-hidden text-ellipsis sm:max-w-96"
|
class="flex-grow w-full flex-shrink whitespace-nowrap overflow-hidden text-ellipsis max-w-96"
|
||||||
>
|
>
|
||||||
{file.file.name}
|
{file.file.name}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -321,7 +308,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex items-center gap-3 sm:justify-normal w-full sm:w-fit flex-shrink-0 lg:w-full"
|
class="flex items-center gap-3 justify-normal flex-shrink-0 w-full"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col items-center gap-3 w-full"
|
class="flex flex-col items-center gap-3 w-full"
|
||||||
|
|
@ -352,25 +339,10 @@
|
||||||
class="flex items-center gap-3 w-full"
|
class="flex items-center gap-3 w-full"
|
||||||
>
|
>
|
||||||
{#if converter && converter.supportedFormats.includes(file.from)}
|
{#if converter && converter.supportedFormats.includes(file.from)}
|
||||||
<span
|
<span class="whitespace-nowrap"
|
||||||
class="sm:block hidden lg:hidden"
|
|
||||||
>from</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="py-2 lg:hidden px-3 font-display bg-foreground text-background rounded-xl sm:block hidden"
|
|
||||||
>{file.from}</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="sm:block lg:hidden hidden"
|
|
||||||
>to</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden lg:block whitespace-nowrap"
|
|
||||||
>Convert to</span
|
>Convert to</span
|
||||||
>
|
>
|
||||||
<div
|
<div class="w-full">
|
||||||
class="sm:block hidden lg:w-full"
|
|
||||||
>
|
|
||||||
<Dropdown
|
<Dropdown
|
||||||
options={converter.supportedFormats}
|
options={converter.supportedFormats}
|
||||||
bind:selected={files
|
bind:selected={files
|
||||||
|
|
@ -384,38 +356,6 @@
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
class="w-full sm:hidden block h-11"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="py-2 px-3 font-display bg-foreground text-background rounded-xl"
|
|
||||||
>
|
|
||||||
{file.from}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-full sm:hidden h-full flex justify-center items-center"
|
|
||||||
>
|
|
||||||
<ArrowRight
|
|
||||||
class="w-6 h-6 text-accent-foreground"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-full sm:hidden block h-full"
|
|
||||||
>
|
|
||||||
<Dropdown
|
|
||||||
options={converter.supportedFormats}
|
|
||||||
bind:selected={files
|
|
||||||
.files[
|
|
||||||
files.files.length -
|
|
||||||
1 -
|
|
||||||
i
|
|
||||||
].to}
|
|
||||||
onselect={() => {
|
|
||||||
file.result = null;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{:else}
|
{:else}
|
||||||
<span
|
<span
|
||||||
class="py-2 px-3 font-display bg-foreground-failure text-white rounded-xl"
|
class="py-2 px-3 font-display bg-foreground-failure text-white rounded-xl"
|
||||||
|
|
@ -447,19 +387,6 @@
|
||||||
</button>
|
</button>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
onclick={() => {
|
|
||||||
// delete the file from the list
|
|
||||||
files.files = files.files.filter(
|
|
||||||
(f) => f !== file,
|
|
||||||
);
|
|
||||||
if (files.files.length === 0)
|
|
||||||
goto("/");
|
|
||||||
}}
|
|
||||||
class="ml-2 mr-1 sm:block hidden lg:hidden"
|
|
||||||
>
|
|
||||||
<XIcon size="18" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if converter && converter.supportedFormats.includes(file.from)}
|
{#if converter && converter.supportedFormats.includes(file.from)}
|
||||||
|
|
@ -472,15 +399,11 @@
|
||||||
style="background-image: url({file.blobUrl});"
|
style="background-image: url({file.blobUrl});"
|
||||||
></div>
|
></div>
|
||||||
<div
|
<div
|
||||||
class="absolute sm:top-0 bottom-0 sm:left-0 h-5/6 w-full sm:h-full"
|
class="absolute left-0 bottom-0 h-5/6 w-full"
|
||||||
>
|
>
|
||||||
<ProgressiveBlur
|
<ProgressiveBlur
|
||||||
direction={isSm
|
direction={"bottom"}
|
||||||
? "bottom"
|
endIntensity={64}
|
||||||
: isLg
|
|
||||||
? "bottom"
|
|
||||||
: "right"}
|
|
||||||
endIntensity={isLg ? 64 : 128}
|
|
||||||
iterations={6}
|
iterations={6}
|
||||||
fadeTo="var(--bg-transparent)"
|
fadeTo="var(--bg-transparent)"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue