45 lines
1.7 KiB
Plaintext
45 lines
1.7 KiB
Plaintext
---
|
|
import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
|
|
import VideoPlayer from '@app/website/video/VideoPlayer.svelte';
|
|
import { getVideoMetadata, resolveVideo } from '@util/video.ts';
|
|
import { siteUrl } from '@util/url.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, longDescription } = metadata;
|
|
const streamUrl = siteUrl(`video/${encodeURIComponent(video.name)}/stream`);
|
|
const thumbnailUrl = siteUrl(`video/${encodeURIComponent(video.name)}/thumbnail.jpg`);
|
|
---
|
|
|
|
<WebsiteLayout title={title} description={description ?? undefined} openGraph="minimal">
|
|
<Fragment slot="head">
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content={thumbnailUrl} />
|
|
<meta property="og:image:type" content="image/jpeg" />
|
|
<meta property="og:image:alt" content={title} />
|
|
</Fragment>
|
|
|
|
<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>
|
|
|
|
{description && (
|
|
<p class="max-w-3xl text-base leading-relaxed whitespace-pre-line text-base-content/80">{description}</p>
|
|
)}
|
|
|
|
<VideoPlayer client:load src={streamUrl} type={video.contentType} title={title} poster={thumbnailUrl} />
|
|
|
|
{longDescription && (
|
|
<p class="max-w-3xl text-base leading-relaxed whitespace-pre-line text-base-content/70">{longDescription}</p>
|
|
)}
|
|
</section>
|
|
</WebsiteLayout>
|