JakeBreath
e5cc63b0cc
Backend: - User.role (user/uploader/staff) with can_upload; uploads and downloads gated to uploader+; owners and staff can edit their items - MediaItem.uploaded_by plus J-<id> identity (serializer, admin, scan_files --user, first superuser as default owner) - API resolves J-<id>, bare numeric ids and MD5s; neighbors and lookup return j_ids - Guest safety: mirror e621's anonymous default blacklist into Redis (parses comments, negations and wildcards), flag hidden_from_guests and filter lists, details and lookups for anonymous users - POST /api/online/downloads/ writes an e621 file into the watched folder and indexes it for the uploader - MariaDB + Redis via docker compose (host ports 3307/6380), PyMySQL driver shim, Redis cache replacing the file cache; SQLite data dumped and loaded into MariaDB Frontend: - Single /detail/:itemId route with an adaptive shell: J-<id> renders the library item, bare numbers render the e621 post - Legacy /view/<md5> and /online/view/<id> redirect to canonical URLs - Cards expose J-IDs; library custom-data editor is read-only for non-owners - Role gating: Upload hidden/blocked for regular users, account shows the role, guest hint on the library
68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
|
|
import { cn } from "@/lib/cn";
|
|
import { formatBytes } from "@/lib/format";
|
|
import type { MediaItem } from "@/lib/types";
|
|
|
|
const ratingStyles: Record<string, string> = {
|
|
s: "border-ctp-green/30 bg-ctp-green/15 text-ctp-green",
|
|
q: "border-ctp-peach/30 bg-ctp-peach/15 text-ctp-peach",
|
|
e: "border-ctp-red/30 bg-ctp-red/15 text-ctp-red",
|
|
};
|
|
|
|
const ratingLabels: Record<string, string> = {
|
|
s: "S",
|
|
q: "Q",
|
|
e: "E",
|
|
};
|
|
|
|
export function MediaCard({ item }: { item: MediaItem }) {
|
|
const preview =
|
|
item.kind === "video"
|
|
? `/api/files/${item.j_id}/thumbnail/`
|
|
: `/api/files/${item.j_id}/raw/`;
|
|
|
|
return (
|
|
<Link
|
|
to={`/detail/${item.j_id}`}
|
|
className="group overflow-hidden rounded-lg border border-ctp-surface0 bg-ctp-base transition hover:border-ctp-surface2"
|
|
>
|
|
<div className="relative aspect-square overflow-hidden bg-ctp-mantle">
|
|
<img
|
|
src={preview}
|
|
alt={item.filename}
|
|
loading="lazy"
|
|
className="h-full w-full object-cover transition duration-200 group-hover:scale-[1.03]"
|
|
/>
|
|
{item.rating ? (
|
|
<span
|
|
className={cn(
|
|
"absolute left-2 top-2 rounded-full border px-2 py-0.5 font-mono text-[11px] font-medium",
|
|
ratingStyles[item.rating],
|
|
)}
|
|
>
|
|
{ratingLabels[item.rating]}
|
|
</span>
|
|
) : null}
|
|
<span className="absolute right-2 top-2 rounded-sm bg-ctp-crust/80 px-1.5 py-0.5 font-mono text-[10px] uppercase text-ctp-overlay1">
|
|
{item.extension}
|
|
</span>
|
|
<div className="absolute inset-x-0 bottom-0 translate-y-full bg-gradient-to-t from-ctp-mantle via-ctp-mantle/80 to-transparent p-2 pt-8 transition duration-150 group-hover:translate-y-0">
|
|
<p className="font-mono text-[11px] text-ctp-subtext0">
|
|
{formatBytes(item.size)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="px-2.5 py-2">
|
|
<p className="font-mono text-[10px] text-ctp-overlay0">{item.j_id}</p>
|
|
<p
|
|
className="truncate font-mono text-xs text-ctp-subtext1"
|
|
title={item.filename}
|
|
>
|
|
{item.filename}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|