s3-share/web/App.svelte

83 lines
1.6 KiB
Svelte

<script lang="ts">
import getComponentForShare from "./contentType";
import NotFound from "./NotFound.svelte";
import sizeToReadable from "./sizeToReadable";
const regex = /filename="(.*)"/gm;
const slug = window.location.pathname.split("/").pop();
let notFound = false;
let contentType: string;
let filename: string;
let fileSize: number = 0;
async function getFileHead() {
const res = await fetch(`/s/${slug}`,{method:"HEAD"});
if (res.status === 404){
notFound = true;
return;
}
contentType = res.headers.get("Content-Type");
fileSize = parseInt(res.headers.get("Content-Length"));
let match;
while ((match = regex.exec(res.headers.get("Content-Disposition"))) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (match.index === regex.lastIndex) {
regex.lastIndex++;
}
filename = match[1];
}
document.title = filename;
}
</script>
{#if !notFound}
<div class="dl">
<a download href="/s/{slug}">Download ({sizeToReadable(fileSize)})</a>
</div>
{/if}
<main>
{#await getFileHead()}
Loading data...
{:then}
{#if notFound}
<NotFound />
{:else}
{#await getComponentForShare(contentType, filename)}
Loading component...
{:then v}
<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
{/await}
{/if}
{/await}
</main>
<style>
main {
display: flex;
justify-content: center;
padding-top: 5rem;
}
.dl {
top: 0;
right: 0;
position: absolute;
padding-top: 1rem;
padding-right: 1rem;
color: var(--color-secondary);
}
.dl a {
color: var(--color-secondary);
text-decoration: none;
}
</style>