stefiosif/loft
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(frontend): add plyr to preview videos

Browse Source
This commit is contained in:
stefiosif
2026-06-04 00:18:56 +03:00
parent f8c56623a4
commit 0ef7728ac0
6 changed files with 109 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/lib/components/FilePreview.svelte
View File

@@ -1,8 +1,10 @@
<script lang="ts">
import type { FileRecord } from '$lib/types';
import { fade } from 'svelte/transition';
import VideoPreview from './VideoPreview.svelte';
let { file, onclose }: { file: FileRecord; onclose: () => void } = $props();
const isVideo = $derived(file.fileType.includes('video'));
</script>
<svelte:window
@@ -14,38 +16,46 @@
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
onclick={onclose}
transition:fade={{ duration: 150 }}
>
<div
class="flex h-2/3 w-2/3 flex-col rounded-sm border border-sky-200/20 bg-[#0f1117] p-6"
class="relative aspect-video h-[85vh] max-w-[95vw] overflow-hidden rounded-xl border border-sky-200/20 bg-[#0f1117]"
onclick={(e) => e.stopPropagation()}
>
<div class="mb-4 flex items-center justify-between">
<span class="text-sm font-medium text-white">{file.name}</span>
<button
class="cursor-pointer text-white/40 transition-colors hover:text-white"
onclick={onclose}
aria-label="Close"
{#if isVideo}
<VideoPreview src={`/api/files/${file.id}/download`} />
<div
class="pointer-events-none absolute inset-x-0 top-0 z-10 flex items-center justify-between bg-linear-to-b from-black/70 to-transparent px-4 py-3"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
<span class="pointer-events-auto truncate pr-3 text-sm font-medium text-white"
>{file.name}</span
>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</div>
<div class="flex flex-1 items-center justify-center text-sm text-white/20">
preview coming soon
</div>
<button
class="pointer-events-auto cursor-pointer text-white/70 transition-colors hover:text-white"
onclick={onclose}
aria-label="Close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</div>
{:else}
<div class="flex h-full w-full items-center justify-center text-sm text-white/40">
No preview available
</div>
{/if}
</div>
</div>