add video player

src/pages/video/[name].astro

@@ -0,0 +1,32 @@
+---
+import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
+import VideoPlayer from '@app/website/video/VideoPlayer.svelte';
+import { getVideoMetadata, resolveVideo } from '@util/video.ts';
+
+const { name } = Astro.params;
+
+const video = name ? await resolveVideo(name) : null;
+if (!video) return new Response(null, { status: 404 });
+
+const metadata = await getVideoMetadata(video);
+if (!metadata) return new Response(null, { status: 404 });
+
+const { title, description } = metadata;
+const basePath = import.meta.env.BASE_URL.replace(/\/$/, '');
+const streamUrl = `${basePath}/video/${encodeURIComponent(video.name)}/stream`;
+---
+
+<WebsiteLayout title={`${title} – Video`}>
+  <section class="mx-auto flex w-full max-w-6xl flex-col gap-5 px-4 py-8 lg:py-12">
+    <div>
+      <p class="text-sm tracking-widest text-base-content/60 uppercase">Video</p>
+      <h1 class="mt-1 text-2xl font-semibold break-words lg:text-4xl">{title}</h1>
+    </div>
+
+    <VideoPlayer client:load src={streamUrl} type={video.contentType} title={title} />
+
+    {description && (
+      <p class="max-w-3xl text-base leading-relaxed whitespace-pre-line text-base-content/70">{description}</p>
+    )}
+  </section>
+</WebsiteLayout>