LobotomyLabs/coop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dynamic pricing by disk space + episode count, total requests stat, disk bar graph

Browse Source
This commit is contained in:
Dustin Newkirk
2026-04-23 12:36:50 -04:00
parent ad85beef6b
commit 2d897e45ed
4 changed files with 339 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/dashboard/components/SearchRequestModal.tsx
+77 -53
View File
@@ -21,12 +21,22 @@ export function SearchRequestModal({
}: {
open: boolean;
onOpenChange: (open: boolean) => void;
costs: { movie: number; tv: number };
costs: { movie: number; tv: number; scarcityMultiplier?: number };
}) {
const [query, setQuery] = useState("");
const [results, setResults] = useState<any[]>([]);
const [loading, setLoading] = useState(false);
const getTVCost = (item: any) => {
const base = costs.tv;
const eps = item.numberOfEpisodes || 0;
if (eps <= 50) return base;
if (eps <= 100) return Math.round(base * 1.3);
if (eps <= 200) return Math.round(base * 1.6);
if (eps <= 400) return Math.round(base * 2.0);
return Math.round(base * 2.5);
};
const search = async () => {
if (!query) return;
setLoading(true);
@@ -44,13 +54,15 @@ export function SearchRequestModal({
const request = async (item: any, mediaType: string) => {
try {
const cost = mediaType === "movie" ? costs.movie : getTVCost(item);
await api.post("/overseer/request", {
mediaType,
mediaId: item.id || item.tmdbId,
title: item.title || item.name,
seasons: item.seasons,
numberOfEpisodes: item.numberOfEpisodes || 0,
});
toast.success("Golden egg sent to the farmer!");
toast.success(`Golden egg sent! ${cost} $COOP deducted.`);
onOpenChange(false);
} catch (e: any) {
toast.error(e?.response?.data?.error || "Request flew the coop!");
@@ -66,7 +78,11 @@ export function SearchRequestModal({
<Search className="h-6 w-6" /> PECK FOR FEED
</DialogTitle>
</div>
<DialogDescription className="text-primary-foreground/90 font-bold italic"></DialogDescription>
<DialogDescription className="text-primary-foreground/90 font-bold italic">
{costs.scarcityMultiplier && costs.scarcityMultiplier > 1
? `Market scarcity: x${costs.scarcityMultiplier}`
: ""}
</DialogDescription>
</DialogHeader>
<div className="p-6 space-y-6 font-sans">
@@ -91,63 +107,71 @@ export function SearchRequestModal({
</div>
<div className="max-h-[50vh] overflow-y-auto pr-2 space-y-4 scrollbar-hide">
{results.map((r) => (
<div
key={r.id || r.tmdbId}
className="group flex gap-4 border-4 border-foreground bg-card p-3 rounded-3xl hover:bg-accent/5 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,0.1)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,0.1)]"
>
<div className="relative h-28 w-20 flex-shrink-0 overflow-hidden rounded-xl border-2 border-foreground bg-muted shadow-sm">
{r.posterPath ? (
<img
src={`https://image.tmdb.org/t/p/w200${r.posterPath}`}
alt={r.title || r.name}
className="h-full w-full object-cover group-hover:scale-110 transition-transform duration-300"
/>
) : (
<div className="flex h-full w-full items-center justify-center bg-secondary/20">
<Film className="h-8 w-8 text-muted-foreground/30" />
</div>
)}
</div>
{results.map((r) => {
const itemCost =
r.mediaType === "movie" ? costs.movie : getTVCost(r);
return (
<div
key={r.id || r.tmdbId}
className="group flex gap-4 border-4 border-foreground bg-card p-3 rounded-3xl hover:bg-accent/5 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,0.1)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,0.1)]"
>
<div className="relative h-28 w-20 flex-shrink-0 overflow-hidden rounded-xl border-2 border-foreground bg-muted shadow-sm">
{r.posterPath ? (
<img
src={`https://image.tmdb.org/t/p/w200${r.posterPath}`}
alt={r.title || r.name}
className="h-full w-full object-cover group-hover:scale-110 transition-transform duration-300"
/>
) : (
<div className="flex h-full w-full items-center justify-center bg-secondary/20">
<Film className="h-8 w-8 text-muted-foreground/30" />
</div>
)}
</div>
<div className="flex flex-1 flex-col justify-between py-1">
<div>
<div className="font-black text-xl leading-tight line-clamp-1">
{r.title || r.name}
</div>
<div className="flex items-center gap-2 mt-1">
<span className="inline-flex items-center gap-1 rounded-full bg-secondary/30 px-2 py-0.5 text-[10px] font-black uppercase text-secondary-foreground border border-foreground/10">
{r.mediaType === "movie" ? (
<Film className="h-3 w-3" />
) : (
<Tv className="h-3 w-3" />
)}
{r.mediaType || "unknown"}
</span>
{r.releaseDate && (
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
{new Date(r.releaseDate).getFullYear()}
<div className="flex flex-1 flex-col justify-between py-1">
<div>
<div className="font-black text-xl leading-tight line-clamp-1">
{r.title || r.name}
</div>
<div className="flex items-center gap-2 mt-1 flex-wrap">
<span className="inline-flex items-center gap-1 rounded-full bg-secondary/30 px-2 py-0.5 text-[10px] font-black uppercase text-secondary-foreground border border-foreground/10">
{r.mediaType === "movie" ? (
<Film className="h-3 w-3" />
) : (
<Tv className="h-3 w-3" />
)}
{r.mediaType || "unknown"}
</span>
)}
{r.releaseDate && (
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
{new Date(r.releaseDate).getFullYear()}
</span>
)}
{r.numberOfEpisodes > 0 && (
<span className="text-[10px] font-bold text-muted-foreground">
{r.numberOfEpisodes} eps
</span>
)}
</div>
</div>
</div>
<div className="flex items-center justify-between gap-4 mt-2">
<div className="text-xs font-bold text-muted-foreground italic flex items-center gap-1">
<Egg className="h-3 w-3" />{" "}
{r.mediaType === "movie" ? costs.movie : costs.tv} $COOP
<div className="flex items-center justify-between gap-4 mt-2">
<div className="text-xs font-bold text-muted-foreground italic flex items-center gap-1">
<Egg className="h-3 w-3" /> {itemCost} $COOP
</div>
<Button
size="sm"
onClick={() => request(r, r.mediaType || "movie")}
className="rounded-full border-2 border-foreground font-black text-xs hover:bg-primary hover:text-white transition-colors"
>
REQUEST <PlusCircle className="ml-1 h-3 w-3" />
</Button>
</div>
<Button
size="sm"
onClick={() => request(r, r.mediaType || "movie")}
className="rounded-full border-2 border-foreground font-black text-xs hover:bg-primary hover:text-white transition-colors"
>
REQUEST <PlusCircle className="ml-1 h-3 w-3" />
</Button>
</div>
</div>
</div>
))}
);
})}
{results.length === 0 && !loading && query && (
<div className="text-center py-10 opacity-40">