fix: restore missing watch history and leaderboard components
This commit is contained in:
@@ -1 +1,85 @@
|
||||
export function Leaderboard() { return null; }
|
||||
"use client";
|
||||
|
||||
import { Clock, Egg, Medal, Trophy } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { userApi } from "@/lib/api";
|
||||
import { formatNumber } from "@/lib/utils";
|
||||
|
||||
export function Leaderboard() {
|
||||
const [data, setData] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
userApi
|
||||
.getLeaderboard()
|
||||
.then((r) => setData(r.data))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
if (loading)
|
||||
return (
|
||||
<div className="p-4 font-bold animate-pulse">
|
||||
Checking pecking order...
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid gap-8 md:grid-cols-2">
|
||||
{/* Top Earners */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 border-b-4 border-primary pb-2">
|
||||
<Trophy className="h-6 w-6 text-primary" />
|
||||
<h3 className="font-display text-2xl uppercase italic text-primary">
|
||||
Rich Birds
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{data?.topEarners?.map((u: any, i: number) => (
|
||||
<div
|
||||
key={u.id}
|
||||
className="flex items-center justify-between border-2 border-foreground bg-accent/5 p-3 rounded-xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary font-black text-white text-xs">
|
||||
{i === 0 ? <Medal className="h-4 w-4" /> : i + 1}
|
||||
</div>
|
||||
<div className="font-black">{u.plexUsername}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 font-black text-primary">
|
||||
<Egg className="h-4 w-4" /> {formatNumber(u.totalEarned)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top Watchers */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 border-b-4 border-secondary pb-2">
|
||||
<Clock className="h-6 w-6 text-secondary-foreground" />
|
||||
<h3 className="font-display text-2xl uppercase italic text-secondary-foreground">
|
||||
Lazy Birds
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{data?.topWatchers?.map((u: any, i: number) => (
|
||||
<div
|
||||
key={u.id}
|
||||
className="flex items-center justify-between border-2 border-foreground bg-secondary/10 p-3 rounded-xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-secondary-foreground/20 font-black text-xs">
|
||||
{i + 1}
|
||||
</div>
|
||||
<div className="font-black">{u.plexUsername}</div>
|
||||
</div>
|
||||
<div className="text-sm font-bold opacity-60">
|
||||
{formatNumber(u.watchTimeMinutes)} MINS
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1 +1,77 @@
|
||||
export function WatchHistory() { return null; }
|
||||
"use client";
|
||||
|
||||
import { Clock, Egg, Film, Tv } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { userApi } from "@/lib/api";
|
||||
import { formatNumber } from "@/lib/utils";
|
||||
|
||||
export function WatchHistory() {
|
||||
const [events, setEvents] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
userApi
|
||||
.getWatchHistory(1, 50)
|
||||
.then((r) => setEvents(r.data.events || []))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
if (loading)
|
||||
return (
|
||||
<div className="p-4 font-bold animate-pulse">Peeking at history...</div>
|
||||
);
|
||||
if (events.length === 0)
|
||||
return (
|
||||
<div className="text-center py-10 opacity-40">
|
||||
<div className="text-6xl mb-4">🏜️</div>
|
||||
<div className="font-black uppercase tracking-widest text-sm">
|
||||
Nest is empty. Go watch something!
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{events.map((e) => (
|
||||
<div
|
||||
key={e.id}
|
||||
className="flex items-center justify-between gap-4 border-4 border-foreground bg-background p-4 rounded-2xl shadow-[4px_4px_0px_0px_rgba(0,0,0,0.1)]"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="rounded-full bg-secondary/30 p-2 border-2 border-foreground">
|
||||
{e.contentType === "movie" ? (
|
||||
<Film className="h-4 w-4" />
|
||||
) : (
|
||||
<Tv className="h-4 w-4" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-black text-lg leading-tight">{e.title}</div>
|
||||
{e.grandparentTitle && (
|
||||
<div className="text-xs font-bold text-muted-foreground uppercase">
|
||||
{e.grandparentTitle}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-3 mt-1 text-[10px] font-black text-muted-foreground uppercase">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" /> {Math.floor(e.duration / 60)}{" "}
|
||||
MINS
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>{e.percentComplete}% DONE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-3 py-1 border-2 border-primary text-primary font-black text-sm">
|
||||
<Egg className="h-3 w-3" /> +{formatNumber(e.creditsEarned)}
|
||||
</div>
|
||||
<div className="text-[9px] font-bold text-muted-foreground mt-1 uppercase">
|
||||
{new Date(e.watchedAt).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user