1258 lines
55 KiB
TypeScript
1258 lines
55 KiB
TypeScript
import type { Locale } from "@app/i18n";
|
||
import { t } from "@app/i18n";
|
||
import { parseEpisodeFromFilename, type LibraryGroup } from "@app/types";
|
||
import { Badge, Button, Input, toast } from "@app/ui";
|
||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||
import { useEffect, useRef, useState } from "react";
|
||
import { cn } from "~/lib/utils";
|
||
import { go, queryParam, setQueryParams } from "~/lib/nav";
|
||
import { createTRPCReactClient, trpc } from "~/lib/trpc";
|
||
import { formatTrpcError } from "~/lib/trpc-error";
|
||
|
||
type ViewMode = "wall" | "list";
|
||
|
||
const PAGE_SIZE = 24;
|
||
|
||
function useDebouncedValue<T>(value: T, delayMs: number): T {
|
||
const [debounced, setDebounced] = useState(value);
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => setDebounced(value), delayMs);
|
||
return () => clearTimeout(timer);
|
||
}, [value, delayMs]);
|
||
return debounced;
|
||
}
|
||
|
||
function PosterBox(props: { posterUrl: string | null; locale: Locale; className?: string }) {
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"flex aspect-[3/4] items-center justify-center bg-muted text-xs text-muted-foreground",
|
||
props.className,
|
||
)}
|
||
>
|
||
{props.posterUrl ? (
|
||
<img
|
||
src={props.posterUrl}
|
||
alt=""
|
||
loading="lazy"
|
||
className="h-full w-full object-cover"
|
||
/>
|
||
) : (
|
||
t(props.locale, "library.noPoster")
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function MountTabs(props: {
|
||
mounts: { id: string; name: string }[];
|
||
value: string;
|
||
onChange: (mountId: string) => void;
|
||
}) {
|
||
return (
|
||
<div className="flex flex-wrap gap-1 rounded-md border border-border p-0.5" role="tablist">
|
||
{props.mounts.map((m) => (
|
||
<button
|
||
key={m.id}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={m.id === props.value}
|
||
className={cn(
|
||
"rounded px-3 py-1.5 text-sm transition-colors",
|
||
m.id === props.value
|
||
? "bg-primary font-medium text-primary-foreground"
|
||
: "text-muted-foreground hover:bg-muted",
|
||
)}
|
||
onClick={() => props.onChange(m.id)}
|
||
>
|
||
{m.name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** 作品详情：剧集按需从 librarySeries 拉取（限当前挂载） */
|
||
function GroupDetail(props: {
|
||
bangumiId: number;
|
||
mountId: string;
|
||
locale: Locale;
|
||
onBack: () => void;
|
||
onPlay: (mediaItemId: string, bangumiId: number) => void;
|
||
onMatch?: ((mediaItemId: string, rawName?: string) => void) | undefined;
|
||
onManage?: ((group: ManageTarget) => void) | undefined;
|
||
}) {
|
||
const { locale } = props;
|
||
const seriesQuery = trpc.media.librarySeries.useQuery(
|
||
{ bangumiId: props.bangumiId, mountId: props.mountId || undefined },
|
||
{ enabled: Boolean(props.mountId) },
|
||
);
|
||
const group = seriesQuery.data;
|
||
return (
|
||
<div className="space-y-4">
|
||
<Button variant="outline" size="sm" onClick={props.onBack}>
|
||
← {t(locale, "library.backToList")}
|
||
</Button>
|
||
{seriesQuery.isPending && (
|
||
<p className="text-sm text-muted-foreground">{t(locale, "browse.loading")}</p>
|
||
)}
|
||
{seriesQuery.isError && (
|
||
<p className="text-sm text-red-600">{t(locale, "browse.loadError")}</p>
|
||
)}
|
||
{group && (
|
||
<div className="flex flex-col gap-4 sm:flex-row">
|
||
<div className="w-full max-w-40 overflow-hidden rounded-lg border border-border sm:w-40">
|
||
<PosterBox posterUrl={group.posterUrl} locale={locale} />
|
||
</div>
|
||
<div className="min-w-0 flex-1 space-y-2">
|
||
<div className="flex items-start gap-2">
|
||
<h2
|
||
className="min-w-0 flex-1 truncate text-lg font-semibold"
|
||
title={group.title}
|
||
>
|
||
{group.title}
|
||
</h2>
|
||
{props.onManage && (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() =>
|
||
props.onManage?.({
|
||
bangumiId: props.bangumiId,
|
||
title: group.title,
|
||
posterUrl: group.posterUrl,
|
||
})
|
||
}
|
||
>
|
||
{t(locale, "library.manageGroup")}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
<p className="text-sm text-muted-foreground">
|
||
{t(locale, "library.episodeCount", { count: group.episodes.length })}
|
||
</p>
|
||
<div className="space-y-1">
|
||
<div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||
{t(locale, "library.episodes")}
|
||
</div>
|
||
<ul className="divide-y divide-border rounded-lg border border-border">
|
||
{group.episodes.map((ep) => {
|
||
// 落库集数优先，null 时用共享正则从文件名兜底解析
|
||
const epNo =
|
||
ep.epNumber ?? parseEpisodeFromFilename(ep.rawName);
|
||
return (
|
||
<li
|
||
key={ep.id}
|
||
className="flex items-center gap-3 px-3 py-2 text-sm"
|
||
>
|
||
<span className="w-10 shrink-0 font-mono text-xs text-muted-foreground">
|
||
{epNo != null ? `EP${epNo}` : "—"}
|
||
</span>
|
||
<span
|
||
className="min-w-0 flex-1 truncate"
|
||
title={ep.rawName}
|
||
>
|
||
{ep.rawName}
|
||
</span>
|
||
<Button
|
||
size="sm"
|
||
variant="secondary"
|
||
onClick={() => props.onPlay(ep.id, props.bangumiId)}
|
||
>
|
||
{t(locale, "library.play")}
|
||
</Button>
|
||
{props.onMatch && (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() =>
|
||
props.onMatch?.(ep.id, ep.rawName)
|
||
}
|
||
>
|
||
{t(locale, "library.match")}
|
||
</Button>
|
||
)}
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ContinueRow(props: { locale: Locale }) {
|
||
const { locale } = props;
|
||
const utils = trpc.useUtils();
|
||
const list = trpc.media.playbackContinue.useQuery({ limit: 6 });
|
||
const [confirmRemoveId, setConfirmRemoveId] = useState<string | null>(null);
|
||
const [confirmClear, setConfirmClear] = useState(false);
|
||
const remove = trpc.media.playbackDelete.useMutation({
|
||
onSuccess: () => {
|
||
setConfirmRemoveId(null);
|
||
toast.success(t(locale, "library.removedToast"));
|
||
void utils.media.playbackContinue.invalidate();
|
||
},
|
||
onError: (err) => toast.error(formatTrpcError(err, t(locale, "library.removeError"))),
|
||
});
|
||
const clear = trpc.media.playbackClear.useMutation({
|
||
onSuccess: () => {
|
||
setConfirmClear(false);
|
||
toast.success(t(locale, "library.clearedToast"));
|
||
void utils.media.playbackContinue.invalidate();
|
||
},
|
||
onError: (err) => toast.error(formatTrpcError(err, t(locale, "library.clearError"))),
|
||
});
|
||
const items = list.data ?? [];
|
||
if (list.isPending) return null;
|
||
if (items.length === 0) return null;
|
||
return (
|
||
<section className="space-y-2">
|
||
<div className="flex items-center gap-2">
|
||
<p className="u-label">{t(locale, "library.continueTitle")}</p>
|
||
<span className="u-dotline flex-1" aria-hidden="true" />
|
||
<button
|
||
type="button"
|
||
className="shrink-0 text-xs text-muted-foreground transition-colors hover:text-destructive"
|
||
disabled={clear.isPending}
|
||
onClick={() => {
|
||
setConfirmRemoveId(null);
|
||
if (confirmClear) clear.mutate({});
|
||
else setConfirmClear(true);
|
||
}}
|
||
>
|
||
{confirmClear
|
||
? t(locale, "library.confirmClearContinue")
|
||
: t(locale, "library.clearContinue")}
|
||
</button>
|
||
</div>
|
||
<div className="flex gap-3 overflow-x-auto pb-1">
|
||
{items.map((item) => {
|
||
const pct =
|
||
item.durationMs > 0
|
||
? Math.min(100, Math.round((item.positionMs / item.durationMs) * 100))
|
||
: 0;
|
||
return (
|
||
<div
|
||
key={item.mediaItemId}
|
||
className="relative w-40 shrink-0 overflow-hidden rounded-lg border border-border bg-card transition-colors hover:border-primary/60"
|
||
>
|
||
<button
|
||
type="button"
|
||
className="block w-full text-left"
|
||
onClick={() => {
|
||
setConfirmRemoveId(null);
|
||
setConfirmClear(false);
|
||
go(`/${locale}/watch?id=${item.mediaItemId}`);
|
||
}}
|
||
>
|
||
<PosterBox posterUrl={item.posterUrl} locale={locale} />
|
||
<div className="p-2">
|
||
<div
|
||
className="truncate text-sm font-medium"
|
||
title={item.title}
|
||
>
|
||
{item.title}
|
||
</div>
|
||
<div className="mt-1 h-1 w-full overflow-hidden rounded bg-muted">
|
||
<div
|
||
className="h-full bg-primary"
|
||
style={{ width: `${pct}%` }}
|
||
/>
|
||
</div>
|
||
<div className="mt-1 font-mono text-[11px] text-muted-foreground">
|
||
{t(locale, "library.continue")} · {pct}%
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="absolute top-1.5 right-1.5 z-10 rounded-md border border-border bg-background/90 px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors hover:text-destructive"
|
||
disabled={remove.isPending}
|
||
onClick={() => {
|
||
setConfirmClear(false);
|
||
if (confirmRemoveId === item.mediaItemId) {
|
||
remove.mutate({ mediaItemId: item.mediaItemId });
|
||
} else {
|
||
setConfirmRemoveId(item.mediaItemId);
|
||
}
|
||
}}
|
||
>
|
||
{confirmRemoveId === item.mediaItemId
|
||
? t(locale, "library.confirmRemoveContinue")
|
||
: t(locale, "library.removeContinue")}
|
||
</button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 「加载更多」分页累积：按 offset 缓存已取页。
|
||
* reqKey/refreshKey 变更时丢弃旧累积，避免 mutation 后旧页与新页混排。
|
||
*/
|
||
type PagedAcc<T> = {
|
||
key: string;
|
||
total: number;
|
||
pages: Record<number, T[]>;
|
||
};
|
||
|
||
function usePagedAccumulator<T>(params: {
|
||
reqKey: string;
|
||
refreshKey: number;
|
||
data: { total: number; items: T[] } | undefined;
|
||
offset: number;
|
||
}): { items: T[]; total: number; hasMore: boolean } {
|
||
const { reqKey, refreshKey, data, offset } = params;
|
||
const [acc, setAcc] = useState<PagedAcc<T> | null>(null);
|
||
const fullKey = `${reqKey}|r${refreshKey}`;
|
||
const [prevFullKey, setPrevFullKey] = useState(fullKey);
|
||
// 渲染期重置：条件或 refreshKey 变化后丢弃旧页
|
||
if (prevFullKey !== fullKey) {
|
||
setPrevFullKey(fullKey);
|
||
setAcc(null);
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (!data) return;
|
||
setAcc((prev) => {
|
||
if (!prev || prev.key !== fullKey || offset === 0) {
|
||
return { key: fullKey, total: data.total, pages: { [offset]: data.items } };
|
||
}
|
||
return {
|
||
key: prev.key,
|
||
total: data.total,
|
||
pages: { ...prev.pages, [offset]: data.items },
|
||
};
|
||
});
|
||
}, [data, fullKey, offset]);
|
||
|
||
const items: T[] = [];
|
||
let total = 0;
|
||
if (acc && acc.key === fullKey) {
|
||
total = acc.total;
|
||
for (const pageOffset of Object.keys(acc.pages)
|
||
.map(Number)
|
||
.sort((a, b) => a - b)) {
|
||
const page = acc.pages[pageOffset];
|
||
if (page) items.push(...page);
|
||
}
|
||
}
|
||
return { items, total, hasMore: items.length < total };
|
||
}
|
||
|
||
type ManageTarget = { bangumiId: number; title: string; posterUrl: string | null };
|
||
|
||
/** 海报墙组管理弹窗：编辑标题/封面、重新匹配、取消匹配、删除记录 */
|
||
function GroupManageModal(props: {
|
||
locale: Locale;
|
||
mountId: string;
|
||
group: ManageTarget;
|
||
onClose: () => void;
|
||
onChanged: () => void;
|
||
onRemoved: (bangumiId: number) => void;
|
||
}) {
|
||
const { locale, mountId, group } = props;
|
||
const [tab, setTab] = useState<"edit" | "rematch">("edit");
|
||
const [title, setTitle] = useState(group.title);
|
||
const [poster, setPoster] = useState(group.posterUrl ?? "");
|
||
const [searchQ, setSearchQ] = useState("");
|
||
const [confirmUnbind, setConfirmUnbind] = useState(false);
|
||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||
|
||
const search = trpc.media.scrapeSearch.useQuery(
|
||
{ q: searchQ },
|
||
{ enabled: tab === "rematch" && searchQ.length > 1 },
|
||
);
|
||
const save = trpc.media.libraryUpdateGroup.useMutation({
|
||
onSuccess: () => {
|
||
toast.success(t(locale, "library.saved"));
|
||
props.onChanged();
|
||
},
|
||
onError: (err) => toast.error(formatTrpcError(err, t(locale, "library.groupOpError"))),
|
||
});
|
||
const unbind = trpc.media.scrapeUnbindGroup.useMutation({
|
||
onSuccess: () => {
|
||
toast.success(t(locale, "library.unbound"));
|
||
props.onChanged();
|
||
props.onRemoved(group.bangumiId);
|
||
props.onClose();
|
||
},
|
||
onError: (err) => toast.error(formatTrpcError(err, t(locale, "library.groupOpError"))),
|
||
});
|
||
const remove = trpc.media.libraryDeleteGroup.useMutation({
|
||
onSuccess: () => {
|
||
toast.success(t(locale, "library.groupDeleted"));
|
||
props.onChanged();
|
||
props.onRemoved(group.bangumiId);
|
||
props.onClose();
|
||
},
|
||
onError: (err) => toast.error(formatTrpcError(err, t(locale, "library.groupOpError"))),
|
||
});
|
||
const rebind = trpc.media.scrapeBindGroup.useMutation({
|
||
onSuccess: () => {
|
||
toast.success(t(locale, "library.matched"));
|
||
props.onChanged();
|
||
setTab("edit");
|
||
setSearchQ("");
|
||
},
|
||
onError: (err) => toast.error(formatTrpcError(err, t(locale, "library.groupOpError"))),
|
||
});
|
||
|
||
const busy = save.isPending || unbind.isPending || remove.isPending || rebind.isPending;
|
||
const canSave = title.trim().length > 0;
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||
<div className="w-full max-w-lg space-y-3 rounded-lg border border-border bg-background p-4">
|
||
<div className="flex items-center gap-2">
|
||
<h2 className="shrink-0 font-medium">
|
||
{t(locale, "library.groupManageTitle")}
|
||
</h2>
|
||
<span className="truncate text-xs text-muted-foreground" title={title}>
|
||
{title}
|
||
</span>
|
||
</div>
|
||
<div className="flex rounded-md border border-border p-0.5">
|
||
<button
|
||
type="button"
|
||
className={cn(
|
||
"flex-1 rounded px-3 py-1.5 text-sm transition-colors",
|
||
tab === "edit"
|
||
? "bg-primary font-medium text-primary-foreground"
|
||
: "text-muted-foreground hover:bg-muted",
|
||
)}
|
||
onClick={() => setTab("edit")}
|
||
>
|
||
{t(locale, "library.editInfo")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={cn(
|
||
"flex-1 rounded px-3 py-1.5 text-sm transition-colors",
|
||
tab === "rematch"
|
||
? "bg-primary font-medium text-primary-foreground"
|
||
: "text-muted-foreground hover:bg-muted",
|
||
)}
|
||
onClick={() => setTab("rematch")}
|
||
>
|
||
{t(locale, "library.rematch")}
|
||
</button>
|
||
</div>
|
||
|
||
{tab === "edit" ? (
|
||
<div className="space-y-3">
|
||
<div className="space-y-1 text-sm">
|
||
<label htmlFor="group-manage-title" className="text-muted-foreground">
|
||
{t(locale, "library.editTitleLabel")}
|
||
</label>
|
||
<Input
|
||
id="group-manage-title"
|
||
value={title}
|
||
disabled={busy}
|
||
onChange={(e) => setTitle(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="space-y-1 text-sm">
|
||
<label htmlFor="group-manage-poster" className="text-muted-foreground">
|
||
{t(locale, "library.posterLabel")}
|
||
</label>
|
||
<Input
|
||
id="group-manage-poster"
|
||
value={poster}
|
||
disabled={busy}
|
||
placeholder={t(locale, "library.posterPlaceholder")}
|
||
onChange={(e) => setPoster(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
size="sm"
|
||
disabled={!canSave || busy}
|
||
onClick={() =>
|
||
save.mutate({
|
||
mountId,
|
||
bangumiId: group.bangumiId,
|
||
title: title.trim(),
|
||
posterUrl: poster.trim() === "" ? null : poster.trim(),
|
||
})
|
||
}
|
||
>
|
||
{t(locale, "library.save")}
|
||
</Button>
|
||
</div>
|
||
<p className="text-xs text-muted-foreground">
|
||
{t(locale, "library.groupOpHint")}
|
||
</p>
|
||
<div className="flex flex-wrap gap-2 border-t border-border pt-3">
|
||
<Button
|
||
size="sm"
|
||
variant="destructive"
|
||
disabled={busy}
|
||
onClick={() => {
|
||
setConfirmDelete(false);
|
||
if (confirmUnbind) {
|
||
unbind.mutate({
|
||
mountId,
|
||
bangumiId: group.bangumiId,
|
||
});
|
||
} else {
|
||
setConfirmUnbind(true);
|
||
}
|
||
}}
|
||
>
|
||
{confirmUnbind
|
||
? t(locale, "library.confirmUnbind")
|
||
: t(locale, "library.unbind")}
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="destructive"
|
||
disabled={busy}
|
||
onClick={() => {
|
||
setConfirmUnbind(false);
|
||
if (confirmDelete) {
|
||
remove.mutate({
|
||
mountId,
|
||
bangumiId: group.bangumiId,
|
||
});
|
||
} else {
|
||
setConfirmDelete(true);
|
||
}
|
||
}}
|
||
>
|
||
{confirmDelete
|
||
? t(locale, "library.confirmDeleteGroup")
|
||
: t(locale, "library.deleteGroup")}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
<Input
|
||
placeholder={t(locale, "library.searchWork")}
|
||
value={searchQ}
|
||
onChange={(e) => setSearchQ(e.target.value)}
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
{t(locale, "library.candidates")}
|
||
</p>
|
||
<ul className="max-h-64 divide-y divide-border overflow-auto rounded border border-border">
|
||
{(search.data ?? []).map((hit) => (
|
||
<li
|
||
key={hit.id}
|
||
className="flex items-center justify-between gap-2 p-2 text-sm"
|
||
>
|
||
<div className="min-w-0">
|
||
<div className="truncate">{hit.nameCn || hit.name}</div>
|
||
{hit.nameCn && hit.name && (
|
||
<div className="truncate text-xs text-muted-foreground">
|
||
{hit.name}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<Button
|
||
size="sm"
|
||
disabled={rebind.isPending}
|
||
onClick={() =>
|
||
rebind.mutate({
|
||
mountId,
|
||
bangumiId: group.bangumiId,
|
||
newBangumiId: hit.id,
|
||
})
|
||
}
|
||
>
|
||
{t(locale, "library.bind")}
|
||
</Button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex justify-end gap-2 border-t border-border pt-3">
|
||
<Button variant="outline" size="sm" disabled={busy} onClick={props.onClose}>
|
||
{t(locale, "library.cancel")}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function WallView(props: {
|
||
locale: Locale;
|
||
mountId: string;
|
||
q: string;
|
||
refreshKey: number;
|
||
selectedBangumiId: number | null;
|
||
onSelect: (bangumiId: number | null) => void;
|
||
onPlay: (mediaItemId: string, bangumiId: number) => void;
|
||
onMatch?: ((mediaItemId: string, rawName?: string) => void) | undefined;
|
||
onManage?: ((group: ManageTarget) => void) | undefined;
|
||
onClearSearch?: (() => void) | undefined;
|
||
hideEmpty?: boolean;
|
||
mountsEmpty?: boolean;
|
||
}) {
|
||
const { locale, mountId, q } = props;
|
||
const [offset, setOffset] = useState(0);
|
||
const reqKey = `${mountId}|${q}`;
|
||
const [prevReqKey, setPrevReqKey] = useState(reqKey);
|
||
if (prevReqKey !== reqKey) {
|
||
setPrevReqKey(reqKey);
|
||
setOffset(0);
|
||
}
|
||
const [prevRefresh, setPrevRefresh] = useState(props.refreshKey);
|
||
if (prevRefresh !== props.refreshKey) {
|
||
setPrevRefresh(props.refreshKey);
|
||
setOffset(0);
|
||
}
|
||
const groupsQuery = trpc.media.libraryGroups.useQuery(
|
||
{ mountId, q: q || undefined, limit: PAGE_SIZE, offset },
|
||
{ enabled: Boolean(mountId) },
|
||
);
|
||
const paged = usePagedAccumulator<LibraryGroup>({
|
||
reqKey,
|
||
refreshKey: props.refreshKey,
|
||
data: groupsQuery.data
|
||
? { total: groupsQuery.data.total, items: groupsQuery.data.groups }
|
||
: undefined,
|
||
offset,
|
||
});
|
||
const groups = paged.items;
|
||
const hasMore = paged.hasMore;
|
||
|
||
if (props.selectedBangumiId != null) {
|
||
return (
|
||
<GroupDetail
|
||
bangumiId={props.selectedBangumiId}
|
||
mountId={mountId}
|
||
locale={locale}
|
||
onBack={() => props.onSelect(null)}
|
||
onPlay={props.onPlay}
|
||
onMatch={props.onMatch}
|
||
onManage={props.onManage}
|
||
/>
|
||
);
|
||
}
|
||
|
||
const showEmpty =
|
||
!props.hideEmpty && (props.mountsEmpty || (groups.length === 0 && !groupsQuery.isPending));
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-3 md:grid-cols-4 lg:grid-cols-6">
|
||
{groups.map((group) => (
|
||
<div key={group.bangumiId} className="relative">
|
||
<button
|
||
type="button"
|
||
className="w-full overflow-hidden rounded-lg border border-border bg-card text-left transition-colors hover:border-primary/60"
|
||
onClick={() => props.onSelect(group.bangumiId)}
|
||
>
|
||
<PosterBox posterUrl={group.posterUrl} locale={locale} />
|
||
<div className="p-2">
|
||
<div className="truncate text-sm font-medium" title={group.title}>
|
||
{group.title}
|
||
</div>
|
||
<div className="mt-0.5 font-mono text-xs text-muted-foreground">
|
||
{t(locale, "library.episodeCount", {
|
||
count: group.episodeCount,
|
||
})}
|
||
</div>
|
||
</div>
|
||
</button>
|
||
{props.onManage && (
|
||
<button
|
||
type="button"
|
||
className="absolute top-1.5 right-1.5 z-10 rounded-md border border-border bg-background/90 px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors hover:text-primary"
|
||
onClick={() =>
|
||
props.onManage?.({
|
||
bangumiId: group.bangumiId,
|
||
title: group.title,
|
||
posterUrl: group.posterUrl,
|
||
})
|
||
}
|
||
>
|
||
{t(locale, "library.manageGroup")}
|
||
</button>
|
||
)}
|
||
</div>
|
||
))}
|
||
{showEmpty && (
|
||
<div className="u-empty col-span-full">
|
||
<p className="u-empty__title">{t(locale, "library.title")}</p>
|
||
<p>
|
||
{!props.mountsEmpty && q
|
||
? t(locale, "library.noResults", { q })
|
||
: t(locale, "library.groupsEmpty")}
|
||
</p>
|
||
<div className="u-empty__actions">
|
||
{!props.mountsEmpty && q && props.onClearSearch ? (
|
||
<Button size="sm" variant="outline" onClick={props.onClearSearch}>
|
||
{t(locale, "library.clearSearch")}
|
||
</Button>
|
||
) : (
|
||
<>
|
||
<Button size="sm" onClick={() => go(`/${locale}/browse`)}>
|
||
{t(locale, "library.ctaBrowse")}
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => go(`/${locale}/mounts`)}
|
||
>
|
||
{t(locale, "library.ctaMounts")}
|
||
</Button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
{hasMore && (
|
||
<div className="flex justify-center">
|
||
<Button
|
||
variant="outline"
|
||
disabled={groupsQuery.isPending}
|
||
onClick={() => setOffset(groups.length)}
|
||
>
|
||
{t(locale, "library.loadMore")}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ListView(props: {
|
||
locale: Locale;
|
||
mountId: string;
|
||
q: string;
|
||
filter: "" | "unmatched" | "ok";
|
||
refreshKey: number;
|
||
onFilterChange: (f: "" | "unmatched" | "ok") => void;
|
||
onMatch: (mediaItemId: string, rawName?: string) => void;
|
||
onPlay: (mediaItemId: string, bangumiId?: number | null) => void;
|
||
onRescrape?: ((mediaItemId: string) => void) | undefined;
|
||
onClearSearch?: (() => void) | undefined;
|
||
hideEmpty?: boolean;
|
||
mountsEmpty?: boolean;
|
||
}) {
|
||
const { locale, mountId, q, filter } = props;
|
||
const [offset, setOffset] = useState(0);
|
||
const pageLimit = PAGE_SIZE;
|
||
const reqKey = `${mountId}|${q}|${filter}`;
|
||
const [prevReqKey, setPrevReqKey] = useState(reqKey);
|
||
if (prevReqKey !== reqKey) {
|
||
setPrevReqKey(reqKey);
|
||
setOffset(0);
|
||
}
|
||
const [prevRefresh, setPrevRefresh] = useState(props.refreshKey);
|
||
if (prevRefresh !== props.refreshKey) {
|
||
setPrevRefresh(props.refreshKey);
|
||
setOffset(0);
|
||
}
|
||
const list = trpc.media.libraryList.useQuery({
|
||
limit: pageLimit,
|
||
offset,
|
||
mountId: mountId || undefined,
|
||
scrapeStatus: filter || undefined,
|
||
q: q || undefined,
|
||
});
|
||
// 与海报墙同一套累积逻辑：加载更多追加而不是顶掉上一页
|
||
type MediaListItem = {
|
||
id: string;
|
||
title: string;
|
||
rawName: string;
|
||
posterUrl: string | null;
|
||
bangumiId: number | null;
|
||
scrapeStatus: string;
|
||
};
|
||
const paged = usePagedAccumulator<MediaListItem>({
|
||
reqKey,
|
||
refreshKey: props.refreshKey,
|
||
data: list.data
|
||
? {
|
||
total: list.data.total,
|
||
items: list.data.rows.map((r) => ({
|
||
id: r.id,
|
||
title: r.title,
|
||
rawName: r.rawName,
|
||
posterUrl: r.posterUrl,
|
||
bangumiId: r.bangumiId,
|
||
scrapeStatus: r.scrapeStatus,
|
||
})),
|
||
}
|
||
: undefined,
|
||
offset,
|
||
});
|
||
const rows = paged.items;
|
||
const hasMore = paged.hasMore;
|
||
|
||
const statusBadge = (status: string) => {
|
||
if (status === "ok")
|
||
return { variant: "secondary" as const, label: t(locale, "library.filterOk") };
|
||
if (status === "unmatched")
|
||
return { variant: "default" as const, label: t(locale, "library.unmatched") };
|
||
if (status === "failed")
|
||
return { variant: "destructive" as const, label: t(locale, "library.statusFailed") };
|
||
return { variant: "outline" as const, label: t(locale, "library.statusPending") };
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex justify-end">
|
||
<select
|
||
className="h-9 rounded-md border border-border bg-background px-2 text-sm"
|
||
value={filter}
|
||
onChange={(e) => {
|
||
props.onFilterChange(e.target.value as typeof filter);
|
||
setOffset(0);
|
||
}}
|
||
>
|
||
<option value="">{t(locale, "library.filterAll")}</option>
|
||
<option value="ok">{t(locale, "library.filterOk")}</option>
|
||
<option value="unmatched">{t(locale, "library.unmatched")}</option>
|
||
</select>
|
||
</div>
|
||
|
||
{rows.length > 0 && (
|
||
<div className="overflow-hidden rounded-lg border border-border bg-card">
|
||
<ul className="divide-y divide-border">
|
||
{rows.map((item) => {
|
||
const badge = statusBadge(item.scrapeStatus);
|
||
return (
|
||
<li
|
||
key={item.id}
|
||
className="flex flex-wrap items-center gap-3 px-3 py-2.5 transition-colors hover:bg-muted/40"
|
||
>
|
||
<PosterBox
|
||
posterUrl={item.posterUrl}
|
||
locale={locale}
|
||
className="h-14 w-[42px] shrink-0 overflow-hidden rounded-md border border-border"
|
||
/>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<p
|
||
className="truncate text-sm font-medium"
|
||
title={item.title}
|
||
>
|
||
{item.title}
|
||
</p>
|
||
<Badge
|
||
variant={badge.variant}
|
||
className="shrink-0 font-normal"
|
||
>
|
||
{badge.label}
|
||
</Badge>
|
||
</div>
|
||
<p
|
||
className="truncate font-mono text-xs text-muted-foreground"
|
||
title={item.rawName}
|
||
>
|
||
{item.rawName}
|
||
</p>
|
||
</div>
|
||
<div className="ml-auto flex shrink-0 gap-1">
|
||
<Button
|
||
size="sm"
|
||
variant="secondary"
|
||
onClick={() => props.onPlay(item.id, item.bangumiId)}
|
||
>
|
||
{t(locale, "library.play")}
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => props.onMatch(item.id, item.rawName)}
|
||
>
|
||
{t(locale, "library.match")}
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
onClick={() => props.onRescrape?.(item.id)}
|
||
>
|
||
{t(locale, "library.reScrape")}
|
||
</Button>
|
||
</div>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
{!props.hideEmpty && (props.mountsEmpty || (rows.length === 0 && !list.isPending)) && (
|
||
<div className="u-empty">
|
||
<p className="u-empty__title">{t(locale, "library.title")}</p>
|
||
<p>
|
||
{!props.mountsEmpty && q
|
||
? t(locale, "library.noResults", { q })
|
||
: !props.mountsEmpty && filter
|
||
? t(locale, "library.filterEmpty")
|
||
: t(locale, "library.empty")}
|
||
</p>
|
||
<div className="u-empty__actions">
|
||
{!props.mountsEmpty && q && props.onClearSearch ? (
|
||
<Button size="sm" variant="outline" onClick={props.onClearSearch}>
|
||
{t(locale, "library.clearSearch")}
|
||
</Button>
|
||
) : !props.mountsEmpty && filter ? (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => props.onFilterChange("")}
|
||
>
|
||
{t(locale, "library.filterAll")}
|
||
</Button>
|
||
) : (
|
||
<>
|
||
<Button size="sm" onClick={() => go(`/${locale}/browse`)}>
|
||
{t(locale, "library.ctaBrowse")}
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => go(`/${locale}/mounts`)}
|
||
>
|
||
{t(locale, "library.ctaMounts")}
|
||
</Button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{hasMore && (
|
||
<div className="flex justify-center">
|
||
<Button
|
||
variant="outline"
|
||
disabled={list.isPending}
|
||
onClick={() => setOffset((o) => o + pageLimit)}
|
||
>
|
||
{t(locale, "library.loadMore")}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function LibraryInner(props: { locale: Locale }) {
|
||
const { locale } = props;
|
||
const [view, setView] = useState<ViewMode>(() => {
|
||
try {
|
||
return localStorage.getItem("media-library-view") === "list" ? "list" : "wall";
|
||
} catch {
|
||
return "wall";
|
||
}
|
||
});
|
||
const changeView = (v: ViewMode) => {
|
||
setView(v);
|
||
try {
|
||
localStorage.setItem("media-library-view", v);
|
||
} catch {
|
||
/* noop */
|
||
}
|
||
};
|
||
const [filter, setFilter] = useState<"" | "unmatched" | "ok">("");
|
||
const [q, setQ] = useState("");
|
||
const debouncedQ = useDebouncedValue(q, 300);
|
||
const [matchId, setMatchId] = useState<string | null>(null);
|
||
const [manageGroup, setManageGroup] = useState<ManageTarget | null>(null);
|
||
const [searchQ, setSearchQ] = useState("");
|
||
const [epInput, setEpInput] = useState("");
|
||
const [mountId, setMountId] = useState(() => queryParam("mount") ?? "");
|
||
const [selectedBangumiId, setSelectedBangumiId] = useState<number | null>(() => {
|
||
const raw = queryParam("g");
|
||
const parsed = raw ? Number(raw) : Number.NaN;
|
||
return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
|
||
});
|
||
const search = trpc.media.scrapeSearch.useQuery(
|
||
{ q: searchQ },
|
||
{ enabled: searchQ.length > 1 && matchId !== null },
|
||
);
|
||
const utils = trpc.useUtils();
|
||
const [refreshKey, setRefreshKey] = useState(0);
|
||
const bumpRefresh = () => setRefreshKey((k) => k + 1);
|
||
/** 组级操作后的统一刷新：分页游标 + 全部相关查询 */
|
||
const refreshAll = () => {
|
||
bumpRefresh();
|
||
void utils.media.libraryList.invalidate();
|
||
void utils.media.libraryGroups.invalidate();
|
||
void utils.media.librarySeries.invalidate();
|
||
void utils.media.playbackContinue.invalidate();
|
||
};
|
||
const bind = trpc.media.scrapeBind.useMutation({
|
||
onSuccess: () => {
|
||
setMatchId(null);
|
||
toast.success(t(locale, "library.matched"));
|
||
bumpRefresh();
|
||
void utils.media.libraryList.invalidate();
|
||
void utils.media.libraryGroups.invalidate();
|
||
void utils.media.librarySeries.invalidate();
|
||
void utils.media.playbackContinue.invalidate();
|
||
},
|
||
});
|
||
const rescrape = trpc.media.scrapeRescrape.useMutation({
|
||
onSuccess: () => {
|
||
toast.success(t(locale, "library.reScrape"));
|
||
bumpRefresh();
|
||
void utils.media.libraryList.invalidate();
|
||
void utils.media.libraryGroups.invalidate();
|
||
void utils.media.librarySeries.invalidate();
|
||
},
|
||
});
|
||
|
||
const bindWithEp = (bangumiId: number) => {
|
||
if (!matchId) return;
|
||
const epNum = epInput.trim() === "" ? undefined : Number(epInput);
|
||
bind.mutate({
|
||
mediaItemId: matchId,
|
||
bangumiId,
|
||
...(epNum != null && Number.isFinite(epNum) ? { epNumber: epNum } : {}),
|
||
});
|
||
};
|
||
|
||
/** 打开匹配弹窗：集数用共享正则从文件名预填，用户可改 */
|
||
const openMatch = (mediaItemId: string, rawName?: string) => {
|
||
setMatchId(mediaItemId);
|
||
const parsed = rawName != null ? parseEpisodeFromFilename(rawName) : null;
|
||
setEpInput(parsed != null ? String(parsed) : "");
|
||
};
|
||
|
||
const mounts = trpc.media.mountList.useQuery();
|
||
const probe = trpc.media.libraryList.useQuery({ limit: 1, offset: 0 });
|
||
const autoScan = trpc.media.libraryScan.useMutation();
|
||
const autoScanStarted = useRef(false);
|
||
const [autoScanning, setAutoScanning] = useState(false);
|
||
const mountList = mounts.data?.mounts ?? [];
|
||
const mountsEmpty = !mounts.isPending && mountList.length === 0;
|
||
|
||
useEffect(() => {
|
||
setQueryParams({ mount: mountId || null });
|
||
}, [mountId]);
|
||
|
||
// 挂载列表返回后：URL 里的 mount 有效则保留；否则自动选中第一个
|
||
useEffect(() => {
|
||
const list = mounts.data?.mounts ?? [];
|
||
if (list.length === 0) return;
|
||
if (mountId && list.some((m) => m.id === mountId)) return;
|
||
const first = list[0];
|
||
if (first) setMountId(first.id);
|
||
}, [mounts.data, mountId]);
|
||
|
||
// 空库且已有挂载时，自动把已挂载目录扫进媒体库（仅触发一次；顺序扫描避免并发打满 WebDAV）
|
||
useEffect(() => {
|
||
if (autoScanStarted.current) return;
|
||
if (mounts.isPending || probe.isPending) return;
|
||
const list = mounts.data?.mounts ?? [];
|
||
if (list.length === 0) return;
|
||
if ((probe.data?.total ?? 0) > 0) return;
|
||
autoScanStarted.current = true;
|
||
setAutoScanning(true);
|
||
void (async () => {
|
||
for (const m of list) {
|
||
try {
|
||
await autoScan.mutateAsync({ mountId: m.id });
|
||
} catch {
|
||
// 单个挂载失败不阻断其余挂载
|
||
}
|
||
}
|
||
setAutoScanning(false);
|
||
setRefreshKey((k) => k + 1);
|
||
void utils.media.libraryList.invalidate();
|
||
void utils.media.libraryGroups.invalidate();
|
||
})();
|
||
}, [mounts.data, mounts.isPending, probe.data, probe.isPending, autoScan, utils]);
|
||
|
||
useEffect(() => {
|
||
setQueryParams({ g: selectedBangumiId != null ? String(selectedBangumiId) : null });
|
||
}, [selectedBangumiId]);
|
||
|
||
const play = (id: string, bangumiId?: number | null) => {
|
||
const g = bangumiId ?? selectedBangumiId;
|
||
const back = g != null ? `&from=series&g=${g}` : "";
|
||
go(`/${locale}/watch?id=${id}${back}`);
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<ContinueRow locale={locale} />
|
||
{autoScanning && (
|
||
<p className="text-sm text-muted-foreground">{t(locale, "library.autoScanning")}</p>
|
||
)}
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<h1 className="text-xl font-semibold">{t(locale, "library.title")}</h1>
|
||
<div className="ml-auto flex flex-wrap items-center gap-2">
|
||
<div className="flex rounded-md border border-border p-0.5">
|
||
<button
|
||
type="button"
|
||
className={cn(
|
||
"rounded px-3 py-1.5 text-sm transition-colors",
|
||
view === "wall"
|
||
? "bg-primary font-medium text-primary-foreground"
|
||
: "text-muted-foreground hover:bg-muted",
|
||
)}
|
||
onClick={() => {
|
||
// 海报墙只展示已刮削分组，切过去时列表对齐同一集合
|
||
changeView("wall");
|
||
}}
|
||
>
|
||
{t(locale, "library.viewWall")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={cn(
|
||
"rounded px-3 py-1.5 text-sm transition-colors",
|
||
view === "list"
|
||
? "bg-primary font-medium text-primary-foreground"
|
||
: "text-muted-foreground hover:bg-muted",
|
||
)}
|
||
onClick={() => {
|
||
changeView("list");
|
||
if (filter === "") setFilter("ok");
|
||
}}
|
||
>
|
||
{t(locale, "library.viewList")}
|
||
</button>
|
||
</div>
|
||
<Input
|
||
className="w-40"
|
||
placeholder={t(locale, "library.searchPlaceholder")}
|
||
value={q}
|
||
onChange={(e) => setQ(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{mountList.length > 0 && (
|
||
<MountTabs
|
||
mounts={mountList}
|
||
value={mountId}
|
||
onChange={(id) => {
|
||
setMountId(id);
|
||
setSelectedBangumiId(null);
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{view === "wall" ? (
|
||
<WallView
|
||
locale={locale}
|
||
mountId={mountId}
|
||
q={debouncedQ}
|
||
refreshKey={refreshKey}
|
||
selectedBangumiId={selectedBangumiId}
|
||
onSelect={setSelectedBangumiId}
|
||
onPlay={play}
|
||
onMatch={openMatch}
|
||
onManage={setManageGroup}
|
||
onClearSearch={() => setQ("")}
|
||
hideEmpty={autoScanning}
|
||
mountsEmpty={mountsEmpty}
|
||
/>
|
||
) : (
|
||
<ListView
|
||
locale={locale}
|
||
mountId={mountId}
|
||
q={debouncedQ}
|
||
filter={filter}
|
||
refreshKey={refreshKey}
|
||
onFilterChange={setFilter}
|
||
onMatch={openMatch}
|
||
onPlay={play}
|
||
onRescrape={(id) => rescrape.mutate({ mediaItemId: id })}
|
||
onClearSearch={() => setQ("")}
|
||
hideEmpty={autoScanning}
|
||
mountsEmpty={mountsEmpty}
|
||
/>
|
||
)}
|
||
|
||
{manageGroup && (
|
||
<GroupManageModal
|
||
locale={locale}
|
||
mountId={mountId}
|
||
group={manageGroup}
|
||
onClose={() => setManageGroup(null)}
|
||
onChanged={refreshAll}
|
||
onRemoved={(bangumiId) => {
|
||
if (selectedBangumiId === bangumiId) setSelectedBangumiId(null);
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{matchId && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||
<div className="w-full max-w-lg rounded-lg border border-border bg-background p-4 space-y-3">
|
||
<h2 className="font-medium">{t(locale, "library.manualTitle")}</h2>
|
||
<Input
|
||
placeholder={t(locale, "library.searchWork")}
|
||
value={searchQ}
|
||
onChange={(e) => setSearchQ(e.target.value)}
|
||
/>
|
||
<div className="flex items-center gap-2 text-sm">
|
||
<span className="text-muted-foreground">
|
||
{t(locale, "library.epLabel")}
|
||
</span>
|
||
<Input
|
||
className="w-28"
|
||
inputMode="numeric"
|
||
placeholder={t(locale, "library.epPlaceholder")}
|
||
value={epInput}
|
||
onChange={(e) => setEpInput(e.target.value)}
|
||
/>
|
||
</div>
|
||
<p className="text-xs text-muted-foreground">
|
||
{t(locale, "library.candidates")}
|
||
</p>
|
||
<ul className="max-h-64 divide-y divide-border overflow-auto rounded border border-border">
|
||
{(search.data ?? []).map((hit) => (
|
||
<li
|
||
key={hit.id}
|
||
className="flex items-center justify-between gap-2 p-2 text-sm"
|
||
>
|
||
<div className="min-w-0">
|
||
<div className="truncate">{hit.nameCn || hit.name}</div>
|
||
{hit.nameCn && hit.name && (
|
||
<div className="truncate text-xs text-muted-foreground">
|
||
{hit.name}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<Button size="sm" onClick={() => bindWithEp(hit.id)}>
|
||
{t(locale, "library.bind")}
|
||
</Button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<div className="flex gap-2">
|
||
<Button variant="outline" onClick={() => setMatchId(null)}>
|
||
{t(locale, "library.cancel")}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const client = createTRPCReactClient();
|
||
|
||
export function LibraryBody(props: { locale: Locale }) {
|
||
const [qc] = useState(() => new QueryClient());
|
||
return (
|
||
<QueryClientProvider client={qc}>
|
||
<trpc.Provider client={client} queryClient={qc}>
|
||
<LibraryInner locale={props.locale} />
|
||
</trpc.Provider>
|
||
</QueryClientProvider>
|
||
);
|
||
}
|