feat: add transcripts with audio links
This commit is contained in:
gosangam
@@ -0,0 +1,46 @@
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
import type { Metadata } from "next";
|
||||
import { notFound } from "next/navigation";
|
||||
import { getTranscriptionsByYear } from "@/lib/transcriptions";
|
||||
import { buildOgMeta } from "@/lib/og";
|
||||
import { TranscriptionYearBrowser } from "./year-browser";
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ year: string }>;
|
||||
}): Promise<Metadata> {
|
||||
const { year: yearStr } = await params;
|
||||
const year = parseInt(yearStr, 10);
|
||||
if (isNaN(year)) return {};
|
||||
const transcriptions = await getTranscriptionsByYear(year);
|
||||
return buildOgMeta({
|
||||
title: "Transcriptions",
|
||||
detail: `${transcriptions.length} transcriptions from ${year}`,
|
||||
quote: `Lectures and conversations of Śrīla Prabhupāda from ${year}.`,
|
||||
});
|
||||
}
|
||||
|
||||
export default async function TranscriptionsByYearPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ year: string }>;
|
||||
}) {
|
||||
const { year: yearStr } = await params;
|
||||
const year = parseInt(yearStr, 10);
|
||||
if (isNaN(year)) notFound();
|
||||
|
||||
const transcriptions = await getTranscriptionsByYear(year);
|
||||
if (transcriptions.length === 0) notFound();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<TranscriptionYearBrowser
|
||||
transcriptions={transcriptions}
|
||||
year={year}
|
||||
totalCount={transcriptions.length}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import Link from "next/link";
|
||||
import { PageHeader } from "@/components/page-header";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ChevronRight, Clock, MapPin } from "lucide-react";
|
||||
import { PlayAudioButton } from "@/app/transcriptions/[slug]/play-audio-button";
|
||||
|
||||
type TranscriptionItem = {
|
||||
slug: string;
|
||||
name: string;
|
||||
type: string;
|
||||
date: string | null;
|
||||
year: number | null;
|
||||
month: number | null;
|
||||
day: number | null;
|
||||
place: string | null;
|
||||
context: string | null;
|
||||
reference: string | null;
|
||||
durationMinutes: number | null;
|
||||
participants: string[];
|
||||
audioUrl: string | null;
|
||||
};
|
||||
|
||||
const MONTH_NAMES = [
|
||||
"",
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
];
|
||||
|
||||
function MonthSection({
|
||||
month,
|
||||
label,
|
||||
items,
|
||||
defaultOpen,
|
||||
}: {
|
||||
month: number;
|
||||
label: string;
|
||||
items: TranscriptionItem[];
|
||||
defaultOpen: boolean;
|
||||
}) {
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex items-center gap-3 w-full px-5 py-3 text-left hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<ChevronRight
|
||||
className={cn(
|
||||
"size-4 text-muted-foreground shrink-0 transition-transform",
|
||||
open && "rotate-90",
|
||||
)}
|
||||
/>
|
||||
<span className="font-semibold text-foreground text-sm">{label}</span>
|
||||
<span className="text-xs text-muted-foreground tabular-nums">
|
||||
{items.length}{" "}
|
||||
{items.length === 1 ? "transcription" : "transcriptions"}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<ul className="divide-y divide-border">
|
||||
{items.map((t) => (
|
||||
<li key={t.slug}>
|
||||
<Link
|
||||
href={`/transcriptions/${t.slug}`}
|
||||
className="flex items-center px-5 pl-12 py-3.5 gap-3 hover:bg-muted transition-colors"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-medium text-foreground text-sm">
|
||||
{t.name}
|
||||
</p>
|
||||
<Badge
|
||||
variant={t.type === "lecture" ? "default" : "secondary"}
|
||||
className="text-[10px] px-1.5 py-0"
|
||||
>
|
||||
{t.type === "lecture" ? "Lecture" : "Conversation"}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
|
||||
{t.place && (
|
||||
<span className="flex items-center gap-1">
|
||||
<MapPin className="size-3" />
|
||||
{t.place}
|
||||
</span>
|
||||
)}
|
||||
{t.reference && (
|
||||
<span className="text-primary/70">{t.reference}</span>
|
||||
)}
|
||||
{t.durationMinutes && t.durationMinutes > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="size-3" />
|
||||
{t.durationMinutes} min
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{t.audioUrl && (
|
||||
<PlayAudioButton
|
||||
audioUrl={t.audioUrl}
|
||||
title={t.name}
|
||||
subtitle={[t.date, t.place].filter(Boolean).join(" · ")}
|
||||
sourceUrl={`/transcriptions/${t.slug}`}
|
||||
type={t.type}
|
||||
variant="compact"
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TranscriptionYearBrowser({
|
||||
transcriptions,
|
||||
year,
|
||||
totalCount,
|
||||
}: {
|
||||
transcriptions: TranscriptionItem[];
|
||||
year: number;
|
||||
totalCount: number;
|
||||
}) {
|
||||
const monthGroups = useMemo(() => {
|
||||
const map = new Map<number, TranscriptionItem[]>();
|
||||
for (const t of transcriptions) {
|
||||
const m = t.month && t.month >= 1 && t.month <= 12 ? t.month : 0;
|
||||
if (!map.has(m)) map.set(m, []);
|
||||
map.get(m)!.push(t);
|
||||
}
|
||||
const groups: {
|
||||
month: number;
|
||||
label: string;
|
||||
items: TranscriptionItem[];
|
||||
}[] = [];
|
||||
for (let m = 1; m <= 12; m++) {
|
||||
const items = map.get(m);
|
||||
if (items && items.length > 0) {
|
||||
groups.push({ month: m, label: MONTH_NAMES[m], items });
|
||||
}
|
||||
}
|
||||
const unknown = map.get(0);
|
||||
if (unknown && unknown.length > 0) {
|
||||
groups.push({ month: 0, label: "Unknown Month", items: unknown });
|
||||
}
|
||||
return groups;
|
||||
}, [transcriptions]);
|
||||
|
||||
const lectureCount = transcriptions.filter(
|
||||
(t) => t.type === "lecture",
|
||||
).length;
|
||||
const conversationCount = transcriptions.filter(
|
||||
(t) => t.type === "conversation",
|
||||
).length;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader sticky>
|
||||
<Link
|
||||
href="/transcriptions"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
← Transcriptions
|
||||
</Link>
|
||||
<h1 className="mt-3 text-2xl font-bold text-foreground">
|
||||
Transcriptions from {year}
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{totalCount} transcriptions · {lectureCount} lectures ·{" "}
|
||||
{conversationCount} conversations
|
||||
</p>
|
||||
</PageHeader>
|
||||
|
||||
<main className="max-w-5xl mx-auto px-6 py-8 space-y-6">
|
||||
{monthGroups.length === 0 ? (
|
||||
<div className="py-12 text-center text-muted-foreground">
|
||||
<p className="text-lg font-medium">
|
||||
No transcriptions for this year
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<Card className="overflow-hidden">
|
||||
<CardContent className="p-0 divide-y divide-border">
|
||||
{monthGroups.map((mg, i) => (
|
||||
<MonthSection
|
||||
key={mg.month}
|
||||
month={mg.month}
|
||||
label={mg.label}
|
||||
items={mg.items}
|
||||
defaultOpen={i === 0 || monthGroups.length <= 3}
|
||||
/>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user