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

feat(stats): add set breakdown to song page
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
Details

Browse source
This commit is contained in:
fullsizemalt 2025-12-24 10:29:13 -08:00
parent 4aefad1eff
commit ff411321c6
3 changed files with 247 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
backend/schemas.py
View file

@ -1,4 +1,4 @@
from typing import Optional, List
from typing import Optional, List, Dict
from sqlmodel import SQLModel
from datetime import datetime
@ -111,6 +111,7 @@ class SongReadWithStats(SongRead):
times_played: int
gap: int
last_played: Optional[datetime] = None
set_breakdown: Dict[str, int] = {}
performances: List[PerformanceReadWithShow] = []
class PerformanceDetailRead(PerformanceRead):

12
backend/services/stats.py
View file

@ -28,10 +28,20 @@ def get_song_stats(session: Session, song_id: int):
select(func.count(Show.id)).where(Show.date > last_performance.date)
).one()
# Set Breakdown
set_stats_query = session.exec(
select(Performance.set_name, func.count(Performance.id))
.where(Performance.song_id == song_id)
.group_by(Performance.set_name)
).all()
set_breakdown = {row[0]: row[1] for row in set_stats_query if row[0]}
return {
"times_played": times_played,
"last_played": last_performance.date if last_performance else None,
"gap": gap
"gap": gap,
"set_breakdown": set_breakdown
}
def check_and_award_badges(session: Session, user_id: int):

234
frontend/app/songs/[slug]/page.tsx Normal file
View file

@ -0,0 +1,234 @@
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>
)
}