feat(frontend): add plyr to preview videos

frontend/src/lib/components/FilePreview.svelte

@@ -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>

frontend/src/lib/components/VideoPreview.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import Plyr from 'plyr';
+    import 'plyr/dist/plyr.css';
+
+    let { src }: { src: string } = $props();
+    let videoElement: HTMLVideoElement;
+
+    $effect(() => {
+        const player = new Plyr(videoElement, {
+            ratio: '16:9',
+            controls: [
+                'play-large',
+                'play',
+                'progress',
+                'current-time',
+                'mute',
+                'volume',
+                'captions',
+                'settings',
+                'fullscreen'
+            ]
+        });
+        return () => player.destroy();
+    });
+</script>
+
+<!-- svelte-ignore a11y_media_has_caption -->
+<video bind:this={videoElement} {src} poster="/video-placeholder.png" playsinline controls></video>

frontend/src/lib/types.ts

@@ -2,5 +2,6 @@ export type FileRecord = {
     id: number;
     name: string;
     size: number;
+    fileType: string;
     uploadedAt: string;
 };

frontend/src/routes/layout.css

@@ -1,6 +1,4 @@
 @import 'tailwindcss';
-@plugin '@tailwindcss/forms';
-@plugin '@tailwindcss/typography';
 @import '@fontsource/fira-mono';
 
 :root {
@@ -13,6 +11,8 @@
     --column-margin-top: 4rem;
     font-family: var(--font-body);
     color: var(--color-text);
+    --plyr-color-main: var(--color-sky-400);
+    --plyr-video-background: #0f1117;
 }
 
 body {