Rewrote the server in cpp with the frontend in svelte
This commit is contained in:
57
frontend/src/components/FileViewer.svelte
Normal file
57
frontend/src/components/FileViewer.svelte
Normal file
@@ -0,0 +1,57 @@
|
||||
<script lang="ts">
|
||||
import {Button, Spinner} from 'flowbite-svelte';
|
||||
import {Download} from 'carbon-icons-svelte';
|
||||
import {api, rpc, token, workingWrapperR} from '../store';
|
||||
import {onDestroy} from 'svelte';
|
||||
|
||||
export let node: api.Node;
|
||||
|
||||
let src = '';
|
||||
let loading = false;
|
||||
|
||||
let mime: string|null;
|
||||
let image: boolean, video: boolean, audio: boolean, pdf: boolean, can_display: boolean;
|
||||
$: workingWrapperR<string>(() => rpc.FS_get_mime($token ?? '', node.id)).then(v => mime = v);
|
||||
$: image = mime?.startsWith('image/') ?? false;
|
||||
$: video = mime?.startsWith('video/') ?? false;
|
||||
$: audio = mime?.startsWith('audio/') ?? false;
|
||||
$: pdf = mime === 'application/pdf';
|
||||
$: can_display = image || video || audio || pdf;
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
if (src.startsWith('blob'))
|
||||
URL.revokeObjectURL(src);
|
||||
const resp = await fetch('/download', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: `token=${$token ?? ''}&node=${node.id}`
|
||||
});
|
||||
if (resp.status != 200)
|
||||
return;
|
||||
src = URL.createObjectURL(await resp.blob());
|
||||
loading = false;
|
||||
}
|
||||
|
||||
$: if (image || pdf) load();
|
||||
|
||||
onDestroy(() => { if (src.startsWith('blob')) URL.revokeObjectURL(src); });
|
||||
</script>
|
||||
|
||||
<Button class="w-full mb-6"><Download />Download</Button>
|
||||
{#if can_display && !loading && src === ''}
|
||||
<Button class="w-full" outline on:click={load}>Load</Button>
|
||||
{:else if loading}
|
||||
<Spinner class="w-full" />
|
||||
{:else if can_display && src !== ''}
|
||||
{#if image}
|
||||
<img class="w-full" alt="img" src={src} />
|
||||
{:else if video}
|
||||
<!-- svelte-ignore a11y-media-has-caption -->
|
||||
<video class="w-full" src={src} controls autoplay />
|
||||
{:else if audio}
|
||||
<audio class="w-full" src={src} controls autoplay />
|
||||
{:else if pdf}
|
||||
<embed class="w-full" style="height: 75vh" src={src} type="application/pdf" />
|
||||
{/if}
|
||||
{/if}
|
||||
Reference in New Issue
Block a user