runfoo-org/elmeg-demo
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(frontend): Show audio links on show detail page
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
Details

Browse source
This commit is contained in:
fullsizemalt 2025-12-21 01:32:21 -08:00
parent 7d9e9c7825
commit 4b4c2f4e2b
1 changed files with 120 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

164
frontend/app/shows/[id]/page.tsx
View file

@ -1,6 +1,7 @@
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" 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 Link from "next/link"
import { CommentSection } from "@/components/social/comment-section" import { CommentSection } from "@/components/social/comment-section"
import { EntityRating } from "@/components/social/entity-rating" 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 }> }) { export default async function ShowDetailPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params const { id } = await params
const show = await getShow(id) const show = await getShow(id)
@ -32,6 +34,35 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ id:
notFound() 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 ( return (
<div className="flex flex-col gap-6"> <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 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> </div>
)} )}
{show.tour && ( <div className="flex items-center flex-wrap gap-4 mt-2">
<p className="text-muted-foreground flex items-center gap-2 mt-2"> {show.tour && (
<Music2 className="h-4 w-4" /> <p className="text-muted-foreground flex items-center gap-2">
{show.tour.name} <Music2 className="h-4 w-4" />
</p> {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> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
@ -89,45 +144,66 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ id:
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{show.performances && show.performances.length > 0 ? ( {show.performances && show.performances.length > 0 ? (
<div className="space-y-2"> <div>
{show.performances.map((perf: any) => ( {sortedKeys.map((setName) => (
<div key={perf.id} className="flex items-center justify-between group py-1 hover:bg-muted/50 rounded px-2 -mx-2"> <div key={setName} className="mb-6 last:mb-0">
<div className="flex items-center gap-2"> <h3 className="font-semibold text-sm uppercase tracking-wider text-muted-foreground mb-3 pl-2 border-b pb-1">
<span className="text-muted-foreground w-6 text-right text-sm font-mono">{perf.position}.</span> {setName}
<div className="font-medium"> </h3>
{perf.song?.title || "Unknown Song"} <div className="space-y-1">
{perf.segue && <span className="ml-1 text-muted-foreground">&gt;</span>} {sets[setName].map((perf: any) => (
</div> <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">&gt;</span>}
</div>
{/* Nicknames */} {/* Nicknames */}
{perf.nicknames && perf.nicknames.length > 0 && ( {perf.nicknames && perf.nicknames.length > 0 && (
<div className="flex gap-1 ml-2"> <div className="flex gap-1 ml-2">
{perf.nicknames.map((nick: any) => ( {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}> <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}" "{nick.nickname}"
</span> </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> </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>
</div> </div>
))} ))}