add trailer to homepage

src/actions/report.ts

@@ -55,7 +55,7 @@ export const report = {
       }
 
       let totalFilesSize = 0;
-      for (const file of (input.files ?? [])) {
+      for (const file of input.files ?? []) {
         const realType = mime.getType(file.name);
         if (realType != file.type) {
           throw new ActionError({

src/pages/index.astro

@@ -4,8 +4,9 @@ import Countdown from '@app/website/index/Countdown.svelte';
 import LiveStats from '@app/website/index/LiveStats.svelte';
 import Craftattack from '@assets/img/craftattack.webp';
 import Background from '@assets/img/background.webp';
-import { START_DATE } from 'astro:env/server';
+import { HOMEPAGE_TRAILER_URL, START_DATE } from 'astro:env/server';
 import { getSetting, SettingKey } from '@util/settings';
+import { siteUrl } from '@util/url.ts';
 import { db } from '@db/database.ts';
 
 const signupEnabled = await getSetting(db, SettingKey.SignupEnabled, false);
@@ -72,6 +73,39 @@ const information = [
     </div>
   </div>
 
+  {HOMEPAGE_TRAILER_URL && (
+    <section class="bg-base-300 w-full px-4 py-12" aria-labelledby="trailer-heading">
+      <div class="mx-auto flex items-center w-full max-w-7xl gap-30">
+        <iframe
+          class="aspect-video w-full border-0"
+          src={HOMEPAGE_TRAILER_URL}
+          title="CraftAttack 9 Trailer"
+          allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
+          allowfullscreen
+          loading="lazy"
+        ></iframe>
+
+        <div class="hidden items-center gap-2 lg:flex" aria-hidden="true">
+          <span class="h-60 w-1 rotate-12 rounded-full bg-base-content/30"></span>
+          <span class="h-60 w-1 rotate-12 rounded-full bg-base-content/30"></span>
+        </div>
+
+        <div class="space-y-4">
+          <h2 id="trailer-heading" class="text-2xl font-bold">
+            CraftAttack geht in die neunte Runde - und du kannst dabei sein!
+          </h2>
+          <p class="leading-relaxed text-base-content/80">
+            Die Teilnahme ist kostenlos. Am 27. Dezember 2026 startet CraftAttack 9 – die Anmeldung ist ab dem 1.
+            Dezember 2026 möglich.
+          </p>
+          <p class="leading-relaxed text-base-content/80">
+            Alle Informationen zum Projekt und zur Teilnahme findest du unter hier.
+          </p>
+        </div>
+      </div>
+    </section>
+  )}
+
   <div class="flex justify-center py-20 bg-base-200">
     <div class="card bg-base-100 shadow-lg w-11/12 xl:w-5/12 p-10">
       <div>

src/pages/video/[name]/embed.astro

@@ -0,0 +1,25 @@
+---
+import '@styles/websiteLayout.css';
+import BaseLayout from '@layouts/BaseLayout.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);
+const title = metadata?.title ?? video.name;
+const streamUrl = siteUrl(`video/${encodeURIComponent(video.name)}/stream`);
+const thumbnailUrl = siteUrl(`video/${encodeURIComponent(video.name)}/thumbnail.jpg`);
+---
+
+<BaseLayout title={title}>
+  <div class="flex min-h-dvh w-full items-center justify-center overflow-hidden bg-black">
+    <div class="w-full max-w-[calc(100dvh*16/9)]">
+      <VideoPlayer client:load src={streamUrl} type={video.contentType} title={title} poster={thumbnailUrl} />
+    </div>
+  </div>
+</BaseLayout>