rootandClaude Opus 5.5
71b129d85a
- H&R becomes a quick-filter facet (yes/no/unknown, with counts) on search results and the site resources tab; drop the old free/H&R selects, keep size range and sort on the same row (mobile: drawer), single clear button - legacy free/hr URL params migrate into quick filters; stored selections keep the same localStorage key - search timing and query terms move into TechInfo - library episode versions: click the whole row to expand, versions listed as sibling rows, details only under the selected version, raw values in TechInfo - slot comparison gaps get reason codes (matchGapText in contracts reasons.ts): "可换成 2160p", "缺 HDR 版本" Co-Authored-By: Claude Opus 5.5 <[email protected]>
312 lines
12 KiB
TypeScript
312 lines
12 KiB
TypeScript
import {
|
||
type AssetVersion,
|
||
matchGapTexts,
|
||
type SeasonVersions,
|
||
type UnitMatch,
|
||
type VersionSummary,
|
||
} from "@umt/contracts";
|
||
import { ChevronDown } from "lucide-react";
|
||
import { type ReactNode, useState } from "react";
|
||
import { Link } from "react-router";
|
||
import { useLibraryVersions } from "~/api/library-versions.ts";
|
||
import { type KvItem, KvList } from "~/components/console/kv-list.tsx";
|
||
import { consolePath } from "~/components/console/nav.ts";
|
||
import { TechInfo } from "~/components/console/tech-info.tsx";
|
||
import { Panel } from "~/components/library/parts.tsx";
|
||
import { cn, formatBytes, formatDateTime } from "~/lib/utils.ts";
|
||
|
||
// LIBV-1 入库版本:每集一行规格(分辨率 · 来源 · 编码 · HDR · 制作组 · 大小);季头一行汇总。
|
||
// POLISH-1:点整行展开,多个版本同级并列,选中的版本下方才显示路径、音轨、字幕、时长;
|
||
// 规格来源、探测原始值、比对原文放进 TechInfo;与收录版本的差距用 matchGapTexts 转成人话。
|
||
|
||
const SOURCE_LABEL: Record<string, string> = {
|
||
REMUX: "Remux",
|
||
"BluRay-Disc": "原盘",
|
||
BluRay: "蓝光压制",
|
||
};
|
||
const CODEC_LABEL: Record<string, string> = { "H.265": "HEVC" };
|
||
const LANG_LABEL: Record<string, string> = {
|
||
"zh-Hans": "简中",
|
||
"zh-Hant": "繁中",
|
||
zh: "中文",
|
||
yue: "粤语",
|
||
en: "英语",
|
||
ja: "日语",
|
||
ko: "韩语",
|
||
fr: "法语",
|
||
de: "德语",
|
||
es: "西语",
|
||
};
|
||
|
||
export const sourceLabel = (s: string | null) => (s ? (SOURCE_LABEL[s] ?? s) : null);
|
||
const langLabel = (l: string) => LANG_LABEL[l] ?? l;
|
||
|
||
/** DV 带 HDR10 兜底时只写 DV */
|
||
export function hdrLabel(hdr: readonly string[]): string | null {
|
||
const shown = hdr.includes("DV") ? hdr.filter((h) => h !== "HDR10") : hdr;
|
||
return shown.length ? shown.join("/") : null;
|
||
}
|
||
|
||
/** 一行规格:2160p · WEB-DL · HEVC · DV · FLUX · 13.2 GB */
|
||
export function versionParts(v: AssetVersion): string[] {
|
||
return [
|
||
v.resolution,
|
||
sourceLabel(v.source),
|
||
v.videoCodec ? (CODEC_LABEL[v.videoCodec] ?? v.videoCodec) : null,
|
||
hdrLabel(v.hdr),
|
||
v.edition,
|
||
v.releaseGroup,
|
||
v.sizeBytes !== null ? formatBytes(v.sizeBytes, 1) : null,
|
||
].filter((x): x is string => !!x);
|
||
}
|
||
|
||
/** 季 / 作品汇总:2160p WEB-DL DV ×8 · 1080p 蓝光压制 ×2 · 共 78 GB */
|
||
export function summaryText(s: VersionSummary): string {
|
||
const specs = s.specs.map((g) => {
|
||
const label = [g.resolution, sourceLabel(g.source), hdrLabel(g.hdr)].filter(Boolean).join(" ") || "规格未知";
|
||
return s.specs.length > 1 ? `${label} ×${g.count}` : label;
|
||
});
|
||
const shown = specs.length > 2 ? [...specs.slice(0, 2), `等 ${specs.length} 种`] : specs;
|
||
return [...shown, s.sizeBytes ? `共 ${formatBytes(s.sizeBytes, 1)}` : null].filter(Boolean).join(" · ");
|
||
}
|
||
|
||
export function seasonLine(s: SeasonVersions, withMatch = true): string | null {
|
||
if (s.summary.versionCount === 0) return null;
|
||
const count = `${s.episodesWithVersion}/${s.episodeTotal ?? "?"} 集`;
|
||
const up = withMatch && s.matchCounts?.upgradeable ? `${s.matchCounts.upgradeable} 集可升级` : null;
|
||
return [count, summaryText(s.summary), up].filter(Boolean).join(" · ");
|
||
}
|
||
|
||
function audioText(v: AssetVersion): string | null {
|
||
if (!v.audio.length) return null;
|
||
return v.audio
|
||
.map((a) => [a.codec, a.channels, a.language ? langLabel(a.language) : null].filter(Boolean).join(" "))
|
||
.join("；");
|
||
}
|
||
|
||
function duration(sec: number | null): string | null {
|
||
if (!sec) return null;
|
||
const h = Math.floor(sec / 3600);
|
||
const m = Math.round((sec % 3600) / 60);
|
||
return h ? `${h} 小时 ${m} 分钟` : `${m} 分钟`;
|
||
}
|
||
|
||
const SPEC_FROM: Record<string, string> = { name: "文件名", probe: "ffprobe" };
|
||
|
||
/** 与收录版本的差距 → 人话短句("可换成 2160p"、"缺 HDR 版本");原文留给技术信息 */
|
||
export function gapLine(match: UnitMatch | undefined): string | null {
|
||
if (match?.state !== "upgradeable") return null;
|
||
const texts = matchGapTexts(match.codes);
|
||
return texts.length ? texts.join(" · ") : "还有更好的版本可换";
|
||
}
|
||
|
||
/** 选中版本的详情:路径、音轨、字幕、时长;规格来源、探测原始值、比对原文进「技术信息」 */
|
||
function VersionDetail({ v, match }: { v: AssetVersion; match?: UnitMatch | undefined }) {
|
||
const items: KvItem[] = [
|
||
{ label: "文件", value: v.absolutePath ?? v.relativePath ?? v.fileName, mono: true, wide: true },
|
||
{ label: "音轨", value: audioText(v) },
|
||
{ label: "字幕", value: v.subtitleLanguages.map(langLabel).join("、") || null },
|
||
{ label: "时长", value: duration(v.durationSec) },
|
||
{ label: "色深", value: v.bitDepth ? `${v.bitDepth} bit` : null },
|
||
{ label: "入库时间", value: formatDateTime(v.organizedAt) },
|
||
{
|
||
label: "下载任务",
|
||
value: v.downloadTaskId ? (
|
||
<Link to={consolePath("downloads", v.downloadTaskId)} className="underline-offset-2 hover:underline">
|
||
查看下载任务
|
||
</Link>
|
||
) : null,
|
||
},
|
||
].filter((it) => it.value !== null && it.value !== undefined && it.value !== "");
|
||
const ownMatch = match && match.assetId === v.assetId ? match : undefined;
|
||
return (
|
||
<div className="grid gap-2 pt-1 pb-2 pl-2">
|
||
<KvList items={items} />
|
||
<TechInfo
|
||
items={[
|
||
{ label: "文件 ID", value: v.assetId, wide: true },
|
||
{ label: "规格来源", value: v.specFrom.map((f) => SPEC_FROM[f] ?? f).join(" + ") || null },
|
||
{ label: "比对说明", value: ownMatch?.reasons.join("；") || null, wide: true },
|
||
{ label: "原因码", value: ownMatch?.codes.join(", ") || null, wide: true },
|
||
]}
|
||
>
|
||
{v.probe ? (
|
||
<pre className="max-h-64 overflow-auto rounded-lg bg-muted/40 p-2 font-mono text-caption break-all whitespace-pre-wrap text-foreground">
|
||
{JSON.stringify(v.probe, null, 2)}
|
||
</pre>
|
||
) : null}
|
||
</TechInfo>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** 一个版本的规格一行:2160p · WEB-DL · HEVC · DV · FLUX · 13.2 GB + 状态 */
|
||
export function VersionSpecLine({ v, best, aside }: { v: AssetVersion; best?: boolean; aside?: ReactNode }) {
|
||
const parts = versionParts(v);
|
||
const missing = v.status === "missing" || (v.locationStatus !== null && v.locationStatus !== "available");
|
||
return (
|
||
<span className="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-1.5 text-caption tabular-nums text-muted-foreground">
|
||
{parts.length ? (
|
||
parts.map((p, i) => (
|
||
<span key={`${i}-${p}`} className={cn("whitespace-nowrap", i === 0 && "font-medium text-foreground")}>
|
||
{i > 0 ? <span className="mr-1.5 text-muted-foreground/60">·</span> : null}
|
||
{p}
|
||
</span>
|
||
))
|
||
) : (
|
||
<span className="break-all">{v.fileName}</span>
|
||
)}
|
||
{best ? <span className="text-meta text-success">符合收录版本</span> : null}
|
||
{missing ? <span className="text-meta text-warning">文件不在原位置</span> : null}
|
||
{aside}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
const ROW_CLASS =
|
||
"flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors duration-micro hover:bg-foreground/[0.05] focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none";
|
||
|
||
/**
|
||
* 版本列表(POLISH-1):每个版本一行同级并列,点一行选中并在它下方展开详情,再点收起。
|
||
* 电影面板、没对上集数的文件都用它;剧集每集先收成一行,见 EpisodeVersionList。
|
||
*/
|
||
export function VersionList({
|
||
versions,
|
||
match,
|
||
initial,
|
||
onCollapse,
|
||
}: {
|
||
versions: AssetVersion[];
|
||
match?: UnitMatch | undefined;
|
||
/** 初始选中的版本;缺省不选 */
|
||
initial?: string | null;
|
||
/** 收起选中版本时回调(剧集用来收回到一行) */
|
||
onCollapse?: () => void;
|
||
}) {
|
||
const [selected, setSelected] = useState<string | null>(initial ?? null);
|
||
const tagBest = match?.state === "satisfied" && versions.length > 1;
|
||
return (
|
||
<ul className="space-y-0.5">
|
||
{versions.map((v) => {
|
||
const on = selected === v.assetId;
|
||
return (
|
||
<li key={v.assetId} className={cn("rounded-lg", on && "bg-foreground/[0.04]")}>
|
||
<button
|
||
type="button"
|
||
aria-expanded={on}
|
||
data-version-row
|
||
onClick={() => {
|
||
if (!on) setSelected(v.assetId);
|
||
else if (onCollapse) onCollapse();
|
||
else setSelected(null);
|
||
}}
|
||
className={ROW_CLASS}
|
||
>
|
||
<VersionSpecLine v={v} best={tagBest && v.assetId === match?.assetId} />
|
||
<ChevronDown
|
||
aria-hidden
|
||
className={cn(
|
||
"size-3.5 shrink-0 text-muted-foreground transition-transform duration-micro",
|
||
on && "rotate-180",
|
||
)}
|
||
/>
|
||
</button>
|
||
{on ? <VersionDetail v={v} match={match} /> : null}
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 一集的版本:收起时一行(达标或最接近的版本 + "N 个版本"),点整行展开;
|
||
* 展开后每个版本一行同级并列,选中的版本下方显示文件路径、音轨、字幕等。
|
||
* 与收录版本的差距用人话写在下面("可换成 2160p · 缺 HDR 版本")。
|
||
*/
|
||
export function EpisodeVersionList({
|
||
versions,
|
||
match,
|
||
className,
|
||
}: {
|
||
versions: AssetVersion[];
|
||
match?: UnitMatch | undefined;
|
||
className?: string;
|
||
}) {
|
||
const [open, setOpen] = useState(false);
|
||
if (!versions.length) return null;
|
||
const lead = versions.find((v) => v.assetId === match?.assetId) ?? versions[0]!;
|
||
const ordered = [lead, ...versions.filter((v) => v !== lead)];
|
||
const gap = gapLine(match);
|
||
return (
|
||
<div className={cn("-mx-2 mt-1 space-y-0.5", className)}>
|
||
{open ? (
|
||
<VersionList versions={ordered} match={match} initial={lead.assetId} onCollapse={() => setOpen(false)} />
|
||
) : (
|
||
<button
|
||
type="button"
|
||
aria-expanded={false}
|
||
data-version-row
|
||
onClick={() => setOpen(true)}
|
||
className={ROW_CLASS}
|
||
>
|
||
<VersionSpecLine
|
||
v={lead}
|
||
aside={
|
||
versions.length > 1 ? (
|
||
<span className="text-meta whitespace-nowrap text-muted-foreground">{versions.length} 个版本</span>
|
||
) : null
|
||
}
|
||
/>
|
||
<ChevronDown aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
|
||
</button>
|
||
)}
|
||
{gap ? <p className="px-2 text-meta text-warning">{gap}</p> : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** 电影的入库版本面板:每个文件一行,附与收录版本的比对 */
|
||
export function MovieVersionsPanel({ entityId }: { entityId: string }) {
|
||
const q = useLibraryVersions(entityId);
|
||
const data = q.data;
|
||
if (!data?.movie || data.movie.versions.length === 0) return null;
|
||
const match = data.movie.matches?.[0];
|
||
const target = data.targets[0];
|
||
const versions = [...data.movie.versions].sort(
|
||
(a, b) => Number(b.assetId === match?.assetId) - Number(a.assetId === match?.assetId),
|
||
);
|
||
const state = match?.state === "satisfied" ? `符合「${target?.name}」` : gapLine(match);
|
||
return (
|
||
<Panel title="入库版本" description={[summaryText(data.summary), state].filter(Boolean).join(" · ")}>
|
||
<div className="-mx-2">
|
||
<VersionList versions={versions} match={match} />
|
||
</div>
|
||
</Panel>
|
||
);
|
||
}
|
||
|
||
/** 剧集里没对上具体集数的文件 */
|
||
export function UnplacedVersions({ versions }: { versions: AssetVersion[] }) {
|
||
const [open, setOpen] = useState(false);
|
||
if (!versions.length) return null;
|
||
return (
|
||
<div className="mt-3 rounded-xl border border-border/70 px-3 py-2.5">
|
||
<button
|
||
type="button"
|
||
aria-expanded={open}
|
||
onClick={() => setOpen(!open)}
|
||
className="inline-flex w-full cursor-pointer items-center justify-between gap-2 text-left text-caption text-foreground"
|
||
>
|
||
<span>{versions.length} 个文件没对上集数</span>
|
||
<ChevronDown className={cn("size-4 shrink-0 text-muted-foreground", open && "rotate-180")} aria-hidden />
|
||
</button>
|
||
{open ? (
|
||
<div className="-mx-2 mt-2">
|
||
<VersionList versions={versions} />
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|