Initial commit
This commit is contained in:
admin
@@ -0,0 +1,362 @@
|
||||
"use client";
|
||||
import { useState, useTransition } from "react";
|
||||
import { Save, Pencil, X, Check, Trash2, Star, Eye, EyeOff, FileJson } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { saveCoverMeta } from "@/app/actions/coverMeta";
|
||||
import { deleteImage } from "@/app/actions/bulk";
|
||||
import { useUndoDeleteToast } from "@/components/select/UndoDeleteToast";
|
||||
import { useSettings } from "@/components/settings/SettingsProvider";
|
||||
import { ChipInput, type ChipSuggestion } from "./ChipInput";
|
||||
import { NfoImportDialog } from "./NfoImportDialog";
|
||||
import type { NfoMetadata } from "@/lib/jav/nfoParser";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface CoverEditorInitial {
|
||||
imageId: number;
|
||||
code: string | null;
|
||||
title: string | null;
|
||||
releaseDate: string | null;
|
||||
runtimeMin: number | null;
|
||||
director: string | null;
|
||||
studio: string | null;
|
||||
label: string | null;
|
||||
series: string | null;
|
||||
rating: number | null;
|
||||
watched: boolean;
|
||||
notes: string | null;
|
||||
actresses: string[];
|
||||
genres: string[];
|
||||
}
|
||||
|
||||
export function CoverEditor({
|
||||
initial,
|
||||
actressSuggestions,
|
||||
genreSuggestions,
|
||||
}: {
|
||||
initial: CoverEditorInitial;
|
||||
actressSuggestions?: ChipSuggestion[];
|
||||
genreSuggestions?: ChipSuggestion[];
|
||||
}) {
|
||||
const empty = !initial.code && !initial.title && initial.actresses.length === 0;
|
||||
const [editing, setEditing] = useState(empty);
|
||||
const [code, setCode] = useState(initial.code ?? "");
|
||||
const [title, setTitle] = useState(initial.title ?? "");
|
||||
const [releaseDate, setReleaseDate] = useState(initial.releaseDate ?? "");
|
||||
const [runtime, setRuntime] = useState(initial.runtimeMin?.toString() ?? "");
|
||||
const [director, setDirector] = useState(initial.director ?? "");
|
||||
const [studio, setStudio] = useState(initial.studio ?? "");
|
||||
const [label, setLabel] = useState(initial.label ?? "");
|
||||
const [series, setSeries] = useState(initial.series ?? "");
|
||||
const [rating, setRating] = useState<number | null>(initial.rating);
|
||||
const [watched, setWatched] = useState(initial.watched);
|
||||
const [notes, setNotes] = useState(initial.notes ?? "");
|
||||
const [actresses, setActresses] = useState<string[]>(initial.actresses);
|
||||
const [genres, setGenres] = useState<string[]>(initial.genres);
|
||||
const [saved, setSaved] = useState(false);
|
||||
const [importing, setImporting] = useState(false);
|
||||
const [pending, start] = useTransition();
|
||||
const router = useRouter();
|
||||
|
||||
const applyImported = (m: NfoMetadata) => {
|
||||
if (m.code) setCode(m.code);
|
||||
if (m.title) setTitle(m.title);
|
||||
if (m.releaseDate) setReleaseDate(m.releaseDate);
|
||||
if (m.runtimeMin != null) setRuntime(String(m.runtimeMin));
|
||||
if (m.director) setDirector(m.director);
|
||||
if (m.studio) setStudio(m.studio);
|
||||
if (m.series) setSeries(m.series);
|
||||
if (m.actresses && m.actresses.length) setActresses(Array.from(new Set([...actresses, ...m.actresses])));
|
||||
if (m.genres && m.genres.length) setGenres(Array.from(new Set([...genres, ...m.genres])));
|
||||
if (m.notes) setNotes(m.notes);
|
||||
setEditing(true);
|
||||
};
|
||||
const { settings } = useSettings();
|
||||
const { show: showUndo } = useUndoDeleteToast();
|
||||
|
||||
const save = () => {
|
||||
start(async () => {
|
||||
await saveCoverMeta({
|
||||
imageId: initial.imageId,
|
||||
code: code || null,
|
||||
title: title || null,
|
||||
releaseDate: releaseDate || null,
|
||||
runtimeMin: runtime ? Number(runtime) : null,
|
||||
director: director || null,
|
||||
studio: studio || null,
|
||||
label: label || null,
|
||||
series: series || null,
|
||||
rating,
|
||||
watched,
|
||||
notes: notes || null,
|
||||
actresses,
|
||||
genres,
|
||||
});
|
||||
router.refresh();
|
||||
setSaved(true);
|
||||
setEditing(false);
|
||||
setTimeout(() => setSaved(false), 1600);
|
||||
});
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
setCode(initial.code ?? "");
|
||||
setTitle(initial.title ?? "");
|
||||
setReleaseDate(initial.releaseDate ?? "");
|
||||
setRuntime(initial.runtimeMin?.toString() ?? "");
|
||||
setDirector(initial.director ?? "");
|
||||
setStudio(initial.studio ?? "");
|
||||
setLabel(initial.label ?? "");
|
||||
setSeries(initial.series ?? "");
|
||||
setRating(initial.rating);
|
||||
setWatched(initial.watched);
|
||||
setNotes(initial.notes ?? "");
|
||||
setActresses(initial.actresses);
|
||||
setGenres(initial.genres);
|
||||
setEditing(false);
|
||||
};
|
||||
|
||||
const onDelete = (e: React.MouseEvent) => {
|
||||
const permanent = e.shiftKey || !settings.useRecycleBin;
|
||||
if (permanent && !confirm("Permanently delete this cover? Cannot be undone.")) return;
|
||||
start(async () => {
|
||||
await deleteImage(initial.imageId, permanent ? { permanent: true } : undefined);
|
||||
if (!permanent) showUndo([initial.imageId]);
|
||||
router.push("/");
|
||||
});
|
||||
};
|
||||
|
||||
if (!editing) {
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-3 gap-chip">
|
||||
<button
|
||||
onClick={() => setEditing(true)}
|
||||
className="flex items-center justify-center gap-1.5 text-xs px-3 py-1.5 rounded-lg glass glass-hover text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] min-w-0"
|
||||
>
|
||||
<Pencil className="w-3.5 h-3.5" />
|
||||
<span className="truncate">Edit Metadata</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setImporting(true)}
|
||||
className="flex items-center justify-center gap-1.5 text-xs px-3 py-1.5 rounded-lg glass glass-hover text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] min-w-0"
|
||||
>
|
||||
<FileJson className="w-3.5 h-3.5" />
|
||||
<span className="truncate">Import .nfo / JSON</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={onDelete}
|
||||
className="flex items-center justify-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border border-[var(--color-coral)]/30 bg-[var(--color-coral)]/10 text-[var(--color-coral)] hover:bg-[var(--color-coral)]/20 hover:border-[var(--color-coral)]/50 min-w-0"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
<span className="truncate">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* Status row: fixed height so the toast/hint never reflows the
|
||||
buttons above. Empty placeholder retains the line so the
|
||||
transition between states stays CLS-free. */}
|
||||
<div className="mt-1 h-4 text-xs flex items-center">
|
||||
{saved ? (
|
||||
<span className="flex items-center gap-1 text-[var(--color-mint)]">
|
||||
<Check className="w-3 h-3" /> Saved
|
||||
</span>
|
||||
) : empty ? (
|
||||
<span className="text-[var(--color-fg-muted)] italic">
|
||||
No metadata yet — click Edit to fill in details
|
||||
</span>
|
||||
) : (
|
||||
<span aria-hidden> </span>
|
||||
)}
|
||||
</div>
|
||||
{importing && <NfoImportDialog onClose={() => setImporting(false)} onApply={applyImported} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="glass-strong rounded-2xl p-5 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium">{empty ? "Add Metadata" : "Edit Metadata"}</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={onDelete}
|
||||
disabled={pending}
|
||||
className="flex items-center gap-1 text-xs px-3 py-1.5 rounded-lg border border-[var(--color-coral)]/30 bg-[var(--color-coral)]/10 text-[var(--color-coral)] hover:bg-[var(--color-coral)]/20 hover:border-[var(--color-coral)]/50 mr-auto"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" /> Delete cover
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setImporting(true)}
|
||||
disabled={pending}
|
||||
className="flex items-center gap-1 text-xs px-3 py-1.5 rounded-lg glass glass-hover"
|
||||
>
|
||||
<FileJson className="w-3.5 h-3.5" /> Import
|
||||
</button>
|
||||
{!empty && (
|
||||
<button
|
||||
onClick={cancel}
|
||||
disabled={pending}
|
||||
className="flex items-center gap-1 text-xs px-3 py-1.5 rounded-lg glass hover:text-[var(--color-fg)]"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" /> Cancel
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={save}
|
||||
disabled={pending}
|
||||
className={cn(
|
||||
"flex items-center gap-1 text-xs px-3 py-1.5 rounded-lg font-medium",
|
||||
"bg-[var(--color-cyan)] text-black hover:shadow-[var(--shadow-glow-cyan)] disabled:opacity-50",
|
||||
)}
|
||||
>
|
||||
<Save className="w-3.5 h-3.5" />
|
||||
{pending ? "Saving…" : "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<Field label="Code">
|
||||
<Input value={code} onChange={setCode} placeholder="SSIS-001" mono uppercase />
|
||||
</Field>
|
||||
<Field label="Release Date">
|
||||
<Input value={releaseDate} onChange={setReleaseDate} placeholder="YYYY-MM-DD" mono />
|
||||
</Field>
|
||||
<Field label="Runtime (min)">
|
||||
<Input value={runtime} onChange={setRuntime} type="number" placeholder="120" mono />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field label="Title">
|
||||
<Input value={title} onChange={setTitle} placeholder="Full release title" />
|
||||
</Field>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<Field label="Studio">
|
||||
<Input value={studio} onChange={setStudio} placeholder="e.g. S1 NO.1 STYLE" />
|
||||
</Field>
|
||||
<Field label="Label">
|
||||
<Input value={label} onChange={setLabel} placeholder="Sub-label" />
|
||||
</Field>
|
||||
<Field label="Series">
|
||||
<Input value={series} onChange={setSeries} placeholder="Series name" />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field label="Director">
|
||||
<Input value={director} onChange={setDirector} placeholder="Optional" />
|
||||
</Field>
|
||||
|
||||
<Field label="Actresses" hint="Press Enter to add. Type a name then Enter — duplicates are ignored.">
|
||||
<ChipInput values={actresses} onChange={setActresses} placeholder="Add actress…" accent="violet" suggestions={actressSuggestions} />
|
||||
</Field>
|
||||
|
||||
<Field label="Genres" hint="Press Enter to add.">
|
||||
<ChipInput values={genres} onChange={setGenres} placeholder="Add genre…" accent="cyan" suggestions={genreSuggestions} />
|
||||
</Field>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<Field label="Rating">
|
||||
<RatingPicker value={rating} onChange={setRating} />
|
||||
</Field>
|
||||
<Field label="Watched">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setWatched((v) => !v)}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-3 py-2 rounded-lg border text-sm transition-colors w-full",
|
||||
watched
|
||||
? "bg-[var(--color-mint)]/15 border-[var(--color-mint)]/40 text-[var(--color-mint)]"
|
||||
: "glass text-[var(--color-fg-dim)] hover:text-[var(--color-fg)]",
|
||||
)}
|
||||
>
|
||||
{watched ? <Eye className="w-4 h-4" /> : <EyeOff className="w-4 h-4" />}
|
||||
{watched ? "Watched" : "Not watched"}
|
||||
</button>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field label="Notes">
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
rows={4}
|
||||
placeholder="Personal notes, plot summary, anything you want to remember."
|
||||
className="w-full bg-[var(--color-bg-0)]/40 rounded-lg p-3 text-sm outline-none border border-[var(--color-glass-border)] focus:border-[var(--color-cyan)] resize-y leading-relaxed"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{importing && <NfoImportDialog onClose={() => setImporting(false)} onApply={applyImported} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-wider font-mono text-[var(--color-fg-muted)] mb-1.5">
|
||||
{label}
|
||||
</label>
|
||||
{children}
|
||||
{hint && <div className="text-[10px] text-[var(--color-fg-muted)] mt-1 italic">{hint}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Input({
|
||||
value, onChange, type = "text", placeholder, mono, uppercase,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (s: string) => void;
|
||||
type?: "text" | "number";
|
||||
placeholder?: string;
|
||||
mono?: boolean;
|
||||
uppercase?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<input
|
||||
value={value}
|
||||
onChange={(e) => onChange(uppercase ? e.target.value.toUpperCase() : e.target.value)}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
className={cn(
|
||||
"w-full bg-[var(--color-bg-0)]/40 rounded-md px-2.5 py-1.5 text-sm outline-none border border-[var(--color-glass-border)] focus:border-[var(--color-cyan)]",
|
||||
mono && "font-mono",
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function RatingPicker({ value, onChange }: { value: number | null; onChange: (n: number | null) => void }) {
|
||||
return (
|
||||
<div className="flex items-center gap-1 px-2 py-2 rounded-lg glass">
|
||||
{[1, 2, 3, 4, 5].map((n) => {
|
||||
const filled = value != null && n <= value;
|
||||
return (
|
||||
<button
|
||||
key={n}
|
||||
type="button"
|
||||
onClick={() => onChange(value === n ? null : n)}
|
||||
aria-label={`${n} star${n === 1 ? "" : "s"}`}
|
||||
className="p-0.5 transition-transform hover:scale-110"
|
||||
>
|
||||
<Star
|
||||
className={cn(
|
||||
"w-5 h-5 transition-colors",
|
||||
filled ? "fill-[var(--color-cyan)] text-[var(--color-cyan)]" : "text-[var(--color-fg-muted)]",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{value != null && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(null)}
|
||||
className="ml-2 text-[10px] uppercase tracking-wider font-mono text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
|
||||
>
|
||||
clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user