add video thumbnail generation for opengraph

src/pages/video/[name].astro

@@ -2,7 +2,7 @@
 import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
 import VideoPlayer from '@app/website/video/VideoPlayer.svelte';
 import { getVideoMetadata, resolveVideo } from '@util/video.ts';
-import { siteBase, siteUrl } from '@util/url.ts';
+import { siteUrl } from '@util/url.ts';
 
 const { name } = Astro.params;
 
@@ -14,11 +14,18 @@ if (!metadata) return new Response(null, { status: 404 });
 
 const { title, description, width, height, duration } = metadata;
 const streamUrl = siteUrl(`video/${encodeURIComponent(video.name)}/stream`);
+const thumbnailUrl = siteUrl(`video/${encodeURIComponent(video.name)}/thumbnail.jpg`);
+const thumbnailWidth = 1280;
+const thumbnailHeight = width && Math.round((height / width) * thumbnailWidth);
 ---
 
 <WebsiteLayout title={`${title} - Video`} description={description ?? undefined} openGraph="minimal">
   <Fragment slot="head">
     <meta property="og:type" content="video" />
+    <meta property="og:image" content={thumbnailUrl} />
+    <meta property="og:image:type" content="image/jpeg" />
+    <meta property="og:image:width" content={thumbnailWidth.toString()} />
+    <meta property="og:image:height" content={thumbnailHeight.toString()} />
     <meta property="og:video" content={streamUrl} />
     {streamUrl.startsWith('https') && <meta property="og:video:secure_url" content={streamUrl} />}
     <meta property="og:video:type" content={video.contentType} />
@@ -33,7 +40,7 @@ const streamUrl = siteUrl(`video/${encodeURIComponent(video.name)}/stream`);
       <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} />
+    <VideoPlayer client:load src={streamUrl} type={video.contentType} title={title} poster={thumbnailUrl} />
 
     {description && (
       <p class="max-w-3xl text-base leading-relaxed whitespace-pre-line text-base-content/70">{description}</p>