feat(frontend): Show audio links on show detail page
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
This commit is contained in:
fullsizemalt
parent
7d9e9c7825
commit
4b4c2f4e2b
1 changed files with 120 additions and 44 deletions
|
|
@ -1,6 +1,7 @@
|
|||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { ArrowLeft, Calendar, MapPin, Music2 } from "lucide-react"
|
||||
import { ArrowLeft, Calendar, MapPin, Music2, Disc, PlayCircle, ExternalLink } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { CommentSection } from "@/components/social/comment-section"
|
||||
import { EntityRating } from "@/components/social/entity-rating"
|
||||
|
|
@ -24,6 +25,7 @@ async function getShow(id: string) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
export default async function ShowDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params
|
||||
const show = await getShow(id)
|
||||
|
|
@ -32,6 +34,35 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ id:
|
|||
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">
|
||||
|
|
@ -59,12 +90,36 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ id:
|
|||
))}
|
||||
</div>
|
||||
)}
|
||||
{show.tour && (
|
||||
<p className="text-muted-foreground flex items-center gap-2 mt-2">
|
||||
<Music2 className="h-4 w-4" />
|
||||
{show.tour.name}
|
||||
</p>
|
||||
)}
|
||||
<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" />
|
||||
{show.tour.name}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Audio Links */}
|
||||
{(show.bandcamp_link || show.nugs_link) && (
|
||||
<div className="flex items-center gap-2">
|
||||
{show.bandcamp_link && (
|
||||
<a href={show.bandcamp_link} target="_blank" rel="noopener noreferrer">
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs gap-1.5">
|
||||
<Disc className="h-3.5 w-3.5" />
|
||||
Bandcamp
|
||||
</Button>
|
||||
</a>
|
||||
)}
|
||||
{show.nugs_link && (
|
||||
<a href={show.nugs_link} target="_blank" rel="noopener noreferrer">
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs gap-1.5">
|
||||
<PlayCircle className="h-3.5 w-3.5" />
|
||||
Nugs.net
|
||||
</Button>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
|
|
@ -89,45 +144,66 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ id:
|
|||
</CardHeader>
|
||||
<CardContent>
|
||||
{show.performances && show.performances.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{show.performances.map((perf: any) => (
|
||||
<div key={perf.id} className="flex items-center justify-between group py-1 hover:bg-muted/50 rounded px-2 -mx-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-muted-foreground w-6 text-right text-sm font-mono">{perf.position}.</span>
|
||||
<div className="font-medium">
|
||||
{perf.song?.title || "Unknown Song"}
|
||||
{perf.segue && <span className="ml-1 text-muted-foreground">></span>}
|
||||
</div>
|
||||
<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">
|
||||
{perf.track_url ? (
|
||||
<a href={perf.track_url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 hover:underline group/link">
|
||||
<PlayCircle className="h-3.5 w-3.5 text-primary opacity-70 group-hover/link:opacity-100" />
|
||||
<span>{perf.song?.title || "Unknown Song"}</span>
|
||||
</a>
|
||||
) : (
|
||||
<span>{perf.song?.title || "Unknown Song"}</span>
|
||||
)}
|
||||
{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-xs bg-yellow-100 text-yellow-800 px-1.5 py-0.5 rounded-full border border-yellow-200" title={nick.description}>
|
||||
"{nick.nickname}"
|
||||
</span>
|
||||
))}
|
||||
{/* 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-0 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>
|
||||
</div>
|
||||
{perf.notes && (
|
||||
<div className="text-xs text-muted-foreground ml-9 italic mt-0.5">
|
||||
{perf.notes}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Suggest Nickname Button */}
|
||||
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<SuggestNicknameDialog
|
||||
performanceId={perf.id}
|
||||
songTitle={perf.song?.title || "Song"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rating Column */}
|
||||
<div className="flex items-center">
|
||||
<SocialWrapper type="ratings">
|
||||
<EntityRating
|
||||
entityType="performance"
|
||||
entityId={perf.id}
|
||||
compact={true}
|
||||
/>
|
||||
</SocialWrapper>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue