234 lines
12 KiB
TypeScript
234 lines
12 KiB
TypeScript
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { ArrowLeft, PlayCircle, History, Calendar, Trophy, Youtube, Star } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { notFound } from "next/navigation"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
import { CommentSection } from "@/components/social/comment-section"
|
|
import { EntityRating } from "@/components/social/entity-rating"
|
|
import { EntityReviews } from "@/components/reviews/entity-reviews"
|
|
import { SocialWrapper } from "@/components/social/social-wrapper"
|
|
import { PerformanceList } from "@/components/songs/performance-list"
|
|
import { SongEvolutionChart } from "@/components/songs/song-evolution-chart"
|
|
import { YouTubeEmbed } from "@/components/ui/youtube-embed"
|
|
|
|
async function getSong(id: string) {
|
|
try {
|
|
const res = await fetch(`${getApiUrl()}/songs/${id}`, { cache: 'no-store' })
|
|
if (!res.ok) return null
|
|
return res.json()
|
|
} catch (e) {
|
|
console.error(e)
|
|
return null
|
|
}
|
|
}
|
|
|
|
// Get top rated performances for "Heady Version" leaderboard
|
|
function getHeadyVersions(performances: any[]) {
|
|
if (!performances || performances.length === 0) return []
|
|
return [...performances]
|
|
.filter(p => p.avg_rating && p.rating_count > 0)
|
|
.sort((a, b) => b.avg_rating - a.avg_rating)
|
|
.slice(0, 5)
|
|
}
|
|
|
|
export default async function SongDetailPage({ params }: { params: Promise<{ slug: string }> }) {
|
|
const { slug } = await params
|
|
const song = await getSong(slug)
|
|
|
|
if (!song) {
|
|
notFound()
|
|
}
|
|
|
|
const headyVersions = getHeadyVersions(song.performances || [])
|
|
const topPerformance = headyVersions[0]
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/archive">
|
|
<Button variant="ghost" size="icon">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
<div>
|
|
<div className="flex items-baseline gap-3">
|
|
<h1 className="text-3xl font-bold tracking-tight">{song.title}</h1>
|
|
{song.original_artist && (
|
|
<span className="text-lg text-muted-foreground font-medium">({song.original_artist})</span>
|
|
)}
|
|
</div>
|
|
{song.tags && song.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|
{song.tags.map((tag: any) => (
|
|
<span key={tag.id} className="bg-secondary text-secondary-foreground px-2 py-0.5 rounded-full text-xs font-medium">
|
|
#{tag.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<SocialWrapper type="ratings">
|
|
<EntityRating entityType="song" entityId={song.id} />
|
|
</SocialWrapper>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-3">
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Times Played</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold flex items-center gap-2">
|
|
<PlayCircle className="h-5 w-5 text-primary" />
|
|
{song.times_played}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Gap (Shows)</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold flex items-center gap-2">
|
|
<History className="h-5 w-5 text-primary" />
|
|
{song.gap}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Last Played</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold flex items-center gap-2">
|
|
<Calendar className="h-5 w-5 text-primary" />
|
|
{song.last_played ? new Date(song.last_played).toLocaleDateString() : "Never"}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Set Breakdown */}
|
|
{song.set_breakdown && Object.keys(song.set_breakdown).length > 0 && (
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Set Distribution</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-wrap gap-6">
|
|
{Object.entries(song.set_breakdown).sort((a, b) => (b[1] as number) - (a[1] as number)).map(([set, count]) => (
|
|
<div key={set} className="flex flex-col items-center">
|
|
<span className="text-2xl font-bold">{count as number}</span>
|
|
<span className="text-xs text-muted-foreground uppercase tracking-wide">{set}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Heady Version Section */}
|
|
{headyVersions.length > 0 && (
|
|
<Card className="border-2 border-yellow-500/20 bg-gradient-to-br from-yellow-50/50 to-orange-50/50 dark:from-yellow-900/10 dark:to-orange-900/10">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-yellow-700 dark:text-yellow-400">
|
|
<Trophy className="h-6 w-6" />
|
|
Heady Version Leaderboard
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* Top Performance with YouTube */}
|
|
{topPerformance && (
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
{topPerformance.youtube_link ? (
|
|
<YouTubeEmbed url={topPerformance.youtube_link} />
|
|
) : song.youtube_link ? (
|
|
<YouTubeEmbed url={song.youtube_link} />
|
|
) : (
|
|
<div className="aspect-video bg-muted rounded-lg flex items-center justify-center">
|
|
<div className="text-center text-muted-foreground">
|
|
<Youtube className="h-12 w-12 mx-auto mb-2 opacity-30" />
|
|
<p className="text-sm">No video available</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Badge className="bg-yellow-500 text-yellow-900">🏆 #1 Heady</Badge>
|
|
</div>
|
|
<p className="font-bold text-lg">
|
|
{topPerformance.show?.date ? new Date(topPerformance.show.date).toLocaleDateString() : "Unknown Date"}
|
|
</p>
|
|
<p className="text-muted-foreground">
|
|
{topPerformance.show?.venue?.name || "Unknown Venue"}
|
|
</p>
|
|
<div className="flex items-center gap-1 text-yellow-600">
|
|
<Star className="h-5 w-5 fill-current" />
|
|
<span className="font-bold text-xl">{topPerformance.avg_rating?.toFixed(1)}</span>
|
|
<span className="text-sm text-muted-foreground">({topPerformance.rating_count} ratings)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Leaderboard List */}
|
|
<div className="space-y-2">
|
|
{headyVersions.map((perf, index) => (
|
|
<div
|
|
key={perf.id}
|
|
className={`flex items-center justify-between p-3 rounded-lg ${index === 0 ? 'bg-yellow-100/50 dark:bg-yellow-900/20' : 'bg-background/50'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<span className="w-6 text-center font-bold">
|
|
{index === 0 ? "🥇" : index === 1 ? "🥈" : index === 2 ? "🥉" : `${index + 1}.`}
|
|
</span>
|
|
<div>
|
|
<p className="font-medium">
|
|
{perf.show?.date ? new Date(perf.show.date).toLocaleDateString() : "Unknown"}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{perf.show?.venue?.name || "Unknown Venue"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{perf.youtube_link && (
|
|
<a href={perf.youtube_link} target="_blank" rel="noopener noreferrer">
|
|
<Youtube className="h-4 w-4 text-red-500" />
|
|
</a>
|
|
)}
|
|
<div className="text-right">
|
|
<span className="font-bold">{perf.avg_rating?.toFixed(1)}★</span>
|
|
<span className="text-xs text-muted-foreground ml-1">({perf.rating_count})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<SongEvolutionChart performances={song.performances || []} />
|
|
|
|
{/* Performance List Component (Handles Client Sorting) */}
|
|
<PerformanceList performances={song.performances || []} songTitle={song.title} />
|
|
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<SocialWrapper type="comments">
|
|
<CommentSection entityType="song" entityId={song.id} />
|
|
</SocialWrapper>
|
|
|
|
<SocialWrapper type="reviews">
|
|
<EntityReviews entityType="song" entityId={song.id} />
|
|
</SocialWrapper>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|