Leon Serfaty
109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
import { notFound } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { Mic2, Repeat } from "lucide-react";
|
|
import { requireAuth } from "@/lib/auth/guards";
|
|
import { prisma } from "@/lib/db";
|
|
import { PageHeader } from "@/components/app/page-header";
|
|
import { GenerationProgress } from "@/components/app/generation-progress";
|
|
import { ScriptEditor } from "@/components/app/script-editor";
|
|
import { AudioPlayer } from "@/components/app/audio-player";
|
|
import { EpisodeActions } from "@/components/app/episode-actions";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import type { StructuredScript } from "@/lib/ai/types";
|
|
|
|
export default async function EpisodePage({ params }: { params: Promise<{ id: string }> }) {
|
|
const { id } = await params;
|
|
const session = await requireAuth();
|
|
|
|
const episode = await prisma.episode.findUnique({
|
|
where: { id },
|
|
include: { script: true, audioAsset: true, coverArt: true, speakers: true },
|
|
});
|
|
if (!episode) notFound();
|
|
if (episode.userId !== session.user.id && session.user.role !== "admin") notFound();
|
|
|
|
const inProgress = !["READY", "FAILED"].includes(episode.status);
|
|
const speakerNames: Record<string, string> = {};
|
|
for (const s of episode.speakers) speakerNames[s.speakerKey] = s.displayName;
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
title={episode.title}
|
|
description={`${episode.format.replace("_", "-").toLowerCase()} · ${episode.language.toUpperCase()} · ${episode.targetLengthMin} min`}
|
|
action={
|
|
!inProgress ? (
|
|
<EpisodeActions episodeId={episode.id} initialShareId={episode.shareId} />
|
|
) : undefined
|
|
}
|
|
/>
|
|
|
|
{episode.status === "FAILED" || inProgress ? (
|
|
<GenerationProgress
|
|
episodeId={episode.id}
|
|
initialStatus={episode.status}
|
|
initialStage={episode.stage}
|
|
initialError={episode.errorMessage}
|
|
/>
|
|
) : (
|
|
<div className="grid gap-6 lg:grid-cols-3">
|
|
<div className="space-y-6 lg:col-span-1">
|
|
<Card className="overflow-hidden">
|
|
<div className="aspect-square bg-muted">
|
|
{episode.coverArt ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={`/api/assets/${episode.coverArt.storageKey}`}
|
|
alt={episode.title}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="flex h-full w-full items-center justify-center text-muted-foreground">
|
|
<Mic2 className="h-10 w-10" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
{episode.audioAsset && (
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<AudioPlayer
|
|
storageKey={episode.audioAsset.storageKey}
|
|
durationSec={episode.audioAsset.durationSec}
|
|
episodeId={episode.id}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<Button asChild variant="outline" className="w-full">
|
|
<Link href={`/episodes/${episode.id}/repurpose`}>
|
|
<Repeat className="h-4 w-4" /> Repurpose content
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="lg:col-span-2">
|
|
{episode.script ? (
|
|
<ScriptEditor
|
|
key={episode.script.version}
|
|
episodeId={episode.id}
|
|
script={episode.script.content as unknown as StructuredScript}
|
|
speakerNames={speakerNames}
|
|
/>
|
|
) : (
|
|
<Card>
|
|
<CardContent className="py-12 text-center text-muted-foreground">
|
|
No script available.
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|