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 && } +
-