62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
 
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||
|
|
|
||
|
|
export interface RecordingLibrarySummary {
|
||
|
|
count: number;
|
||
|
|
avgDurationMs: number;
|
||
|
|
totalPlayCount: number;
|
||
|
|
list: { id: number; name: string; durationMs: number; playCount: number; lastPlayedAt: number | null }[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummary }) {
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col gap-4">
|
||
|
|
<div className="grid gap-4 sm:grid-cols-3">
|
||
|
|
<Card className="bp-glass">
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="text-sm text-muted-foreground">Recordings</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="font-display text-3xl">{stats.count}</CardContent>
|
||
|
|
</Card>
|
||
|
|
<Card className="bp-glass">
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="text-sm text-muted-foreground">Avg length</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="font-display text-3xl">
|
||
|
|
{Math.round(stats.avgDurationMs / 1000)}s
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
<Card className="bp-glass">
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="text-sm text-muted-foreground">Total plays</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="font-display text-3xl">{stats.totalPlayCount}</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{stats.list.length > 0 && (
|
||
|
|
<Table>
|
||
|
|
<TableHeader>
|
||
|
|
<TableRow>
|
||
|
|
<TableHead>Recording</TableHead>
|
||
|
|
<TableHead>Plays</TableHead>
|
||
|
|
<TableHead>Last played</TableHead>
|
||
|
|
</TableRow>
|
||
|
|
</TableHeader>
|
||
|
|
<TableBody>
|
||
|
|
{stats.list.map((r) => (
|
||
|
|
<TableRow key={r.id}>
|
||
|
|
<TableCell className="font-medium">{r.name}</TableCell>
|
||
|
|
<TableCell>{r.playCount}</TableCell>
|
||
|
|
<TableCell className="text-muted-foreground">
|
||
|
|
{r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|