feat(frontend): add vertical-specific detail pages for songs and shows to fix 404
Some checks failed
Deploy Fediversion / deploy (push) Failing after 1s
Some checks failed
Deploy Fediversion / deploy (push) Failing after 1s
This commit is contained in:
fullsizemalt
parent
c59c06915b
commit
af9fcd4060
2 changed files with 711 additions and 0 deletions
400
frontend/app/[vertical]/shows/[slug]/page.tsx
Normal file
400
frontend/app/[vertical]/shows/[slug]/page.tsx
Normal file
|
|
@ -0,0 +1,400 @@
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
|
import { ArrowLeft, MapPin, Music2, Disc, PlayCircle, Youtube } from "lucide-react"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { CommentSection } from "@/components/social/comment-section"
|
||||||
|
import { EntityRating } from "@/components/social/entity-rating"
|
||||||
|
import { ShowAttendance } from "@/components/shows/show-attendance"
|
||||||
|
import { SocialWrapper } from "@/components/social/social-wrapper"
|
||||||
|
import { notFound } from "next/navigation"
|
||||||
|
import { SuggestNicknameDialog } from "@/components/shows/suggest-nickname-dialog"
|
||||||
|
import { EntityReviews } from "@/components/reviews/entity-reviews"
|
||||||
|
import { getApiUrl } from "@/lib/api-config"
|
||||||
|
import { YouTubeEmbed } from "@/components/ui/youtube-embed"
|
||||||
|
import { MarkCaughtButton } from "@/components/chase/mark-caught-button"
|
||||||
|
import { VERTICALS } from "@/config/verticals"
|
||||||
|
|
||||||
|
// Helper to validate valid verticals for SSG
|
||||||
|
export function generateStaticParams() {
|
||||||
|
return VERTICALS.map((v) => ({
|
||||||
|
vertical: v.slug,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getShow(id: string) {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${getApiUrl()}/shows/${id}`, { cache: 'no-store' })
|
||||||
|
if (!res.ok) return null
|
||||||
|
return res.json()
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default async function VerticalShowDetailPage({ params }: { params: Promise<{ vertical: string, slug: string }> }) {
|
||||||
|
const { vertical, slug } = await params
|
||||||
|
|
||||||
|
// Verify vertical exists
|
||||||
|
const validVertical = VERTICALS.find(v => v.slug === vertical)
|
||||||
|
if (!validVertical) notFound()
|
||||||
|
|
||||||
|
const show = await getShow(slug)
|
||||||
|
|
||||||
|
if (!show) {
|
||||||
|
notFound()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Group by set
|
||||||
|
const sets: Record<string, any[]> = {};
|
||||||
|
if (show.performances) {
|
||||||
|
show.performances.forEach((perf: any) => {
|
||||||
|
const setName = perf.set_name || "Set 1"; // Default to Set 1 if missing
|
||||||
|
if (!sets[setName]) sets[setName] = [];
|
||||||
|
sets[setName].push(perf);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort keys: Set 1, Set 2, Set 3, Encore, Encore 2...
|
||||||
|
const sortedKeys = Object.keys(sets).sort((a, b) => {
|
||||||
|
const aLower = a.toLowerCase();
|
||||||
|
const bLower = b.toLowerCase();
|
||||||
|
|
||||||
|
// Encore always last
|
||||||
|
if (aLower.includes("encore") && !bLower.includes("encore")) return 1;
|
||||||
|
if (!aLower.includes("encore") && bLower.includes("encore")) return -1;
|
||||||
|
|
||||||
|
// If both have Set, compare numbers
|
||||||
|
if (aLower.includes("set") && bLower.includes("set")) {
|
||||||
|
const aNum = parseInt(a.replace(/\D/g, "") || "0");
|
||||||
|
const bNum = parseInt(b.replace(/\D/g, "") || "0");
|
||||||
|
return aNum - bNum;
|
||||||
|
}
|
||||||
|
|
||||||
|
return a.localeCompare(b);
|
||||||
|
});
|
||||||
|
|
||||||
|
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={`/${vertical}/shows`}>
|
||||||
|
<Button variant="ghost" size="icon">
|
||||||
|
<ArrowLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<div>
|
||||||
|
{/* Band Name - Most Important */}
|
||||||
|
{show.vertical && (
|
||||||
|
<Link
|
||||||
|
href={`/${show.vertical.slug}`}
|
||||||
|
className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:underline mb-1"
|
||||||
|
>
|
||||||
|
<Music2 className="h-4 w-4" />
|
||||||
|
{show.vertical.name}
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight">
|
||||||
|
{new Date(show.date).toLocaleDateString()}
|
||||||
|
</h1>
|
||||||
|
{show.venue && (
|
||||||
|
<p className="text-base sm:text-lg text-muted-foreground mt-1">
|
||||||
|
{show.venue.name}, {show.venue.city}, {show.venue.state}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{show.tags && show.tags.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-2 mt-1">
|
||||||
|
{show.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 className="flex items-center flex-wrap gap-4 mt-2">
|
||||||
|
{show.tour && (
|
||||||
|
<p className="text-muted-foreground flex items-center gap-2">
|
||||||
|
<Music2 className="h-4 w-4" />
|
||||||
|
<Link href={`/tours/${show.tour.slug || show.tour.id}`} className="hover:underline">
|
||||||
|
{show.tour.name}
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{show.notes && (
|
||||||
|
<div className="bg-muted/50 p-4 rounded-lg border text-sm italic">
|
||||||
|
Note: {show.notes}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid gap-6 md:grid-cols-[2fr_1fr]">
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
{/* Full Show Video */}
|
||||||
|
{show.youtube_link && (
|
||||||
|
<Card className="border-2 border-red-500/20 bg-gradient-to-br from-red-50/5 to-transparent">
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
|
||||||
|
<Youtube className="h-4 w-4 text-red-500" />
|
||||||
|
Full Show Video
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<YouTubeEmbed url={show.youtube_link} title={`${show.date?.split('T')[0]} - ${show.venue?.name}`} />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Setlist</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{show.performances && show.performances.length > 0 ? (
|
||||||
|
<div>
|
||||||
|
{sortedKeys.map((setName) => (
|
||||||
|
<div key={setName} className="mb-6 last:mb-0">
|
||||||
|
<h3 className="font-semibold text-sm uppercase tracking-wider text-muted-foreground mb-3 pl-2 border-b pb-1">
|
||||||
|
{setName}
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-1">
|
||||||
|
{sets[setName].map((perf: any) => (
|
||||||
|
<div key={perf.id} className="flex flex-col group py-1.5 hover:bg-muted/50 rounded px-2 -mx-2 transition-colors">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-muted-foreground/60 w-6 text-right text-xs font-mono">{perf.position}.</span>
|
||||||
|
<div className="font-medium flex items-center gap-2">
|
||||||
|
<Link
|
||||||
|
href={`/${vertical}/songs/${perf.slug}`}
|
||||||
|
className="hover:text-primary hover:underline transition-colors"
|
||||||
|
>
|
||||||
|
{perf.song?.title || "Unknown Song"}
|
||||||
|
</Link>
|
||||||
|
{perf.track_url && (
|
||||||
|
<a
|
||||||
|
href={perf.track_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-muted-foreground hover:text-primary"
|
||||||
|
title="Listen"
|
||||||
|
>
|
||||||
|
<PlayCircle className="h-3.5 w-3.5" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{perf.youtube_link && (
|
||||||
|
<span
|
||||||
|
className="text-red-500"
|
||||||
|
title="Video available"
|
||||||
|
>
|
||||||
|
<Youtube className="h-3.5 w-3.5" />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{perf.bandcamp_link && (
|
||||||
|
<a
|
||||||
|
href={perf.bandcamp_link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-[#629aa9] hover:text-[#4a7a89]"
|
||||||
|
title="Listen on Bandcamp"
|
||||||
|
>
|
||||||
|
<Disc className="h-3.5 w-3.5" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{perf.nugs_link && (
|
||||||
|
<a
|
||||||
|
href={perf.nugs_link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-[#ff6b00] hover:text-[#cc5500]"
|
||||||
|
title="Listen on Nugs.net"
|
||||||
|
>
|
||||||
|
<PlayCircle className="h-3.5 w-3.5" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{perf.segue && <span className="ml-1 text-muted-foreground">></span>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Nicknames */}
|
||||||
|
{perf.nicknames && perf.nicknames.length > 0 && (
|
||||||
|
<div className="flex gap-1 ml-2">
|
||||||
|
{perf.nicknames.map((nick: any) => (
|
||||||
|
<span key={nick.id} className="text-[10px] bg-yellow-100/80 text-yellow-800 px-1.5 py-0.5 rounded-full border border-yellow-200" title={nick.description}>
|
||||||
|
"{nick.nickname}"
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Suggest Nickname Button */}
|
||||||
|
<div className="opacity-50 md:opacity-30 md:group-hover:opacity-100 transition-opacity">
|
||||||
|
<SuggestNicknameDialog
|
||||||
|
performanceId={perf.id}
|
||||||
|
songTitle={perf.song?.title || "Song"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Rating Column */}
|
||||||
|
<SocialWrapper type="ratings">
|
||||||
|
<EntityRating
|
||||||
|
entityType="performance"
|
||||||
|
entityId={perf.id}
|
||||||
|
compact={true}
|
||||||
|
/>
|
||||||
|
</SocialWrapper>
|
||||||
|
|
||||||
|
{/* Mark Caught (for chase songs) */}
|
||||||
|
<MarkCaughtButton
|
||||||
|
songId={perf.song?.id}
|
||||||
|
songTitle={perf.song?.title || "Song"}
|
||||||
|
showId={show.id}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{perf.notes && (
|
||||||
|
<div className="text-xs text-muted-foreground ml-9 italic mt-0.5">
|
||||||
|
{perf.notes}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||||
|
<Music2 className="h-12 w-12 text-muted-foreground/30 mb-4" />
|
||||||
|
<p className="text-muted-foreground font-medium">No Setlist Documented</p>
|
||||||
|
<p className="text-sm text-muted-foreground/70 mt-1 max-w-sm">
|
||||||
|
This show's setlist hasn't been added yet. Early shows often weren't documented.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<SocialWrapper type="comments">
|
||||||
|
<CommentSection entityType="show" entityId={show.id} />
|
||||||
|
</SocialWrapper>
|
||||||
|
|
||||||
|
<SocialWrapper type="reviews">
|
||||||
|
<EntityReviews entityType="show" entityId={show.id} />
|
||||||
|
</SocialWrapper>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
{/* Venue Info Card */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm">Venue</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-1">
|
||||||
|
{show.venue ? (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MapPin className="h-4 w-4 text-muted-foreground" />
|
||||||
|
<Link href={`/venues/${show.venue.slug}`} className="font-medium hover:underline hover:text-primary">
|
||||||
|
{show.venue.name}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground pl-6">
|
||||||
|
{show.venue.city}, {show.venue.state} {show.venue.country}
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-muted-foreground">Unknown Venue</p>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Listen On Card */}
|
||||||
|
{(show.nugs_link || show.bandcamp_link) && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm">Listen On</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2">
|
||||||
|
{show.nugs_link && (
|
||||||
|
<a
|
||||||
|
href={show.nugs_link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-3 p-2 rounded-lg bg-orange-500/10 hover:bg-orange-500/20 border border-orange-500/20 transition-colors"
|
||||||
|
>
|
||||||
|
<PlayCircle className="h-5 w-5 text-orange-500" />
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-sm">Nugs.net</p>
|
||||||
|
<p className="text-xs text-muted-foreground">Stream or download</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{show.bandcamp_link && (
|
||||||
|
<a
|
||||||
|
href={show.bandcamp_link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-3 p-2 rounded-lg bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/20 transition-colors"
|
||||||
|
>
|
||||||
|
<Disc className="h-5 w-5 text-blue-500" />
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-sm">Bandcamp</p>
|
||||||
|
<p className="text-xs text-muted-foreground">Official release</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Tour Info */}
|
||||||
|
{show.tour && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm">Tour</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Music2 className="h-4 w-4 text-muted-foreground" />
|
||||||
|
<Link href={`/tours/${show.tour.slug || show.tour.id}`} className="font-medium hover:underline hover:text-primary">
|
||||||
|
{show.tour.name}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Attendance */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm">I Was There</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ShowAttendance showId={show.id} />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Rate This Show */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm">Rate This Show</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<SocialWrapper type="ratings">
|
||||||
|
<EntityRating
|
||||||
|
entityType="show"
|
||||||
|
entityId={show.id}
|
||||||
|
compact={false}
|
||||||
|
/>
|
||||||
|
</SocialWrapper>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div >
|
||||||
|
)
|
||||||
|
}
|
||||||
311
frontend/app/[vertical]/songs/[slug]/page.tsx
Normal file
311
frontend/app/[vertical]/songs/[slug]/page.tsx
Normal file
|
|
@ -0,0 +1,311 @@
|
||||||
|
|
||||||
|
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"
|
||||||
|
import { VERTICALS } from "@/config/verticals"
|
||||||
|
|
||||||
|
// Helper to validate valid verticals for SSG
|
||||||
|
export function generateStaticParams() {
|
||||||
|
return VERTICALS.map((v) => ({
|
||||||
|
vertical: v.slug,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch cross-band versions of this song via SongCanon
|
||||||
|
async function getRelatedVersions(songId: number) {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${getApiUrl()}/canon/song/${songId}/related`, {
|
||||||
|
next: { revalidate: 60 }
|
||||||
|
})
|
||||||
|
if (!res.ok) return []
|
||||||
|
return res.json()
|
||||||
|
} catch {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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 VerticalSongDetailPage({ params }: { params: Promise<{ vertical: string, slug: string }> }) {
|
||||||
|
const { vertical, slug } = await params
|
||||||
|
|
||||||
|
// Verify vertical exists (optional, could just let 404 handle it if song logic doesn't care)
|
||||||
|
const validVertical = VERTICALS.find(v => v.slug === vertical)
|
||||||
|
if (!validVertical) notFound()
|
||||||
|
|
||||||
|
const song = await getSong(slug)
|
||||||
|
|
||||||
|
if (!song) {
|
||||||
|
notFound()
|
||||||
|
}
|
||||||
|
|
||||||
|
const headyVersions = getHeadyVersions(song.performances || [])
|
||||||
|
const topPerformance = headyVersions[0]
|
||||||
|
|
||||||
|
// Fetch cross-band versions
|
||||||
|
const relatedVersions = await getRelatedVersions(song.id)
|
||||||
|
|
||||||
|
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={`/${vertical}/songs`}>
|
||||||
|
<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.artist ? (
|
||||||
|
<Link href={`/artists/${song.artist.slug}`} className="text-lg text-muted-foreground font-medium hover:text-primary transition-colors">
|
||||||
|
({song.artist.name})
|
||||||
|
</Link>
|
||||||
|
) : song.original_artist ? (
|
||||||
|
<span className="text-lg text-muted-foreground font-medium">({song.original_artist})</span>
|
||||||
|
) : null}
|
||||||
|
</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: any, index: number) => (
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Cross-Band Versions */}
|
||||||
|
{relatedVersions && relatedVersions.length > 0 && (
|
||||||
|
<Card className="border-2 border-indigo-500/20 bg-gradient-to-br from-indigo-50/50 to-purple-50/50 dark:from-indigo-900/10 dark:to-purple-900/10">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-indigo-700 dark:text-indigo-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10" />
|
||||||
|
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
|
||||||
|
<path d="M2 12h20" />
|
||||||
|
</svg>
|
||||||
|
Also Played By
|
||||||
|
</CardTitle>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
This song is performed by {relatedVersions.length + 1} different bands
|
||||||
|
</p>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{relatedVersions.map((version: any) => (
|
||||||
|
<Link
|
||||||
|
key={version.id}
|
||||||
|
href={`/${version.vertical_slug}/songs/${version.slug}`}
|
||||||
|
className="block group"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between p-3 rounded-lg bg-background/50 hover:bg-background/80 transition-colors border border-transparent hover:border-indigo-200 dark:hover:border-indigo-800">
|
||||||
|
<div>
|
||||||
|
<p className="font-medium group-hover:text-primary transition-colors">
|
||||||
|
{version.vertical_name}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{version.title}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Badge variant="secondary">
|
||||||
|
View →
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue