diff --git a/src/app/(frontend)/voiceover/[id]/page.tsx b/src/app/(frontend)/voiceover/[id]/page.tsx
index a4a39bc..4f9dfee 100644
--- a/src/app/(frontend)/voiceover/[id]/page.tsx
+++ b/src/app/(frontend)/voiceover/[id]/page.tsx
@@ -4,8 +4,9 @@ import { getPayload } from "payload";
import { headers as nextHeaders } from "next/headers";
import Link from "next/link";
import { notFound, redirect } from "next/navigation";
-import { ArrowLeftIcon, MicIcon } from "lucide-react";
+import { ArrowLeftIcon, MicIcon, TriangleAlertIcon } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
import { VoiceoverRecorder } from "@/components/frontend/voiceover/VoiceoverRecorder";
import { getScriptForUser } from "@/lib/voiceover";
import { isPayloadUser } from "@/utils/access-control/isPayloadUser";
@@ -50,12 +51,30 @@ export default async function VoiceoverScriptPage({
{script.title}
+ {script.description?.trim() && (
+
{script.description}
+ )}
Read the script at your pace, then submit one clear take for review.
+ {script.spoiler && (
+
+
+
+
+
Potential campaign spoilers ahead
+
+ This script may include, infer, or otherwise expose campaign spoilers. Read on only
+ if you are comfortable with that.
+
+
+
+
+ )}
+
);
diff --git a/src/app/(frontend)/voiceover/page.tsx b/src/app/(frontend)/voiceover/page.tsx
index 8741ec5..6ac7466 100644
--- a/src/app/(frontend)/voiceover/page.tsx
+++ b/src/app/(frontend)/voiceover/page.tsx
@@ -4,7 +4,14 @@ import { headers as nextHeaders } from "next/headers";
import { redirect } from "next/navigation";
import { getPayload } from "payload";
import config from "@payload-config";
-import { ArrowRightIcon, CheckCircle2Icon, Clock3Icon, MicIcon, SparklesIcon } from "lucide-react";
+import {
+ ArrowRightIcon,
+ CheckCircle2Icon,
+ Clock3Icon,
+ MicIcon,
+ SparklesIcon,
+ TriangleAlertIcon,
+} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
@@ -64,6 +71,15 @@ function SubmissionStatuses({ script }: { readonly script: VoiceoverScriptView }
);
}
+function SpoilerBadge() {
+ return (
+
+
+ Spoilers
+
+ );
+}
+
function ScriptCard({ script }: { readonly script: VoiceoverScriptView }) {
const isOpen = script.status === "open";
@@ -84,9 +100,14 @@ function ScriptCard({ script }: { readonly script: VoiceoverScriptView }) {
script.title
)}
- Voiceover script #{script.id}
+
+ {script.description?.trim() || `Voiceover script #${script.id}`}
+
+
+
+ {script.spoiler && }
+
-