vert/src/routes/+page.svelte

91 lines
2.4 KiB
Svelte

<script lang="ts">
import { goto } from "$app/navigation";
import Uploader from "$lib/components/functional/Uploader.svelte";
import { converters } from "$lib/converters";
import { files } from "$lib/store/index.svelte";
import { Check } from "lucide-svelte";
let ourFiles = $state<File[]>();
const runUpload = () => {
files.files = [
...files.files,
...(ourFiles || []).map((f) => ({
file: f,
from: "." + f.name.split(".").slice(-1),
to: converters[0].supportedFormats[0],
blobUrl: URL.createObjectURL(f),
id: Math.random().toString(36).substring(2),
})),
];
ourFiles = [];
if (files.files.length > 0 && !files.beenToConverterPage)
goto("/convert");
};
// const convertAllFiles = async () => {
// const promises = files.files?.map(async (file, i) => {
// let conversionType = files.conversionTypes[i];
// const converter = converters[0];
// const convertedFile = await converter.convert(
// {
// name: file.name,
// buffer: await file.arrayBuffer(),
// },
// conversionType,
// );
// files.downloadFns[i] = () => {
// const url = URL.createObjectURL(
// new Blob([convertedFile.buffer]),
// );
// const a = document.createElement("a");
// a.href = url;
// if (conversionType.startsWith("."))
// conversionType = conversionType.slice(1);
// a.download = `${file.name}.${conversionType}`;
// a.target = "_self";
// a.click();
// URL.revokeObjectURL(url);
// };
// });
// if (promises) await Promise.all(promises);
// };
</script>
{#snippet sellingPoint(text: string)}
<li class="flex items-center gap-4">
<div
class="h-8 w-8 bg-accent-background text-accent-foreground rounded-full flex items-center justify-center"
>
<Check />
</div>
<span class="text-lg">{text}</span>
</li>
{/snippet}
<div class="[@media(max-height:768px)]:block mt-10">
<Uploader bind:files={ourFiles} onupload={runUpload} />
</div>
<div class="text-center mt-20">
<h1 class="text-3xl font-display">
Free, fast, and awesome file converting
</h1>
<div class="flex justify-center mt-10">
<div class="grid gap-4">
{@render sellingPoint("Very fast, all processing done on device")}
{@render sellingPoint("No ads, and open source")}
{@render sellingPoint("Beautiful and straightforward UI")}
</div>
</div>
</div>
<style>
/* for this page specifically */
:global(html, body) {
height: 100%;
}
</style>