feat: 接入torbox视频转码

docs/design-system.md

@@ -4,7 +4,7 @@
 
 TorBox 是云端 debrid / seedbox 服务：代为下载种子、Usenet 与网页资源并存入云端，再以直链或串流取回。官网自称 _Private Infrastructure Provider_，视觉为墨黑底、翠绿强调色、点阵标题字体、6px 圆角。
 
-本项目是自托管的 TorBox 面板，核心任务是**浏览资源并一键交给 PotPlayer 串流**。风格定为 **「私有云控制台」**：
+本项目是自托管的 TorBox 面板，核心任务是**浏览资源并直接播放**：视频默认在网页内播放，PotPlayer 作为扩展的打开方式。风格定为 **「私有云控制台」**：
 
 - 墨黑底 + 翠绿**唯一**强调色，克制、不花哨
 - 点阵字标呼应 TorBox 品牌，等宽字体承载一切数据
@@ -100,10 +100,11 @@ div.flex.h-dvh.flex-col                 ← (app)/layout.tsx
 | 表单           | `FieldGroup` + `Field` + `FieldLabel` + `InputGroup` |
 | 2–5 个选项切换 | `ToggleGroup`（`variant="outline" size="sm" spacing={0}`） |
 | 资源分组       | `ItemHeader`（`aria-expanded` 按钮，展开状态在 `library-view-store`）；窄屏只显示来源色点、过期时间省略「后过期」，给标题留空间 |
-| 文件卡片       | `Card size="sm"` + `CardContent` + `CardFooter` |
+| 文件卡片       | `Card size="sm"` + `CardContent` + `CardFooter`；底栏左侧一个主操作（视频「播放」、图片「预览」，其他文件没有），右侧图标操作（视频多一个 PotPlayer，所有文件都有下载、复制直链），名称放在 `Tooltip` 与 `aria-label`；卡片是 `@container/card`，窄于 186px（手机两列）时主操作只显示图标 |
 | 标签           | `Badge`（来源：`variant="outline"` + `SourceDot`） |
 | 下拉操作       | `DropdownMenu`                               |
 | 图标按钮说明   | `Tooltip`                                    |
+| 视频播放       | `VideoPlayer`（Video.js v10 + `components/videojs` 皮肤，`I18nProvider` 固定中文）；资源库在 `Dialog` 中播放，`next/dynamic` 按需加载；MP4、M4V、WebM 直接播放原文件，其他格式经 TorBox 转码为 HLS（`HlsJsVideo`，hls.js 只在此时加载），标题下注明「TorBox 转码」；底栏提供下载与「PotPlayer 播放」；播放错误说明替换为中文并提示换用 PotPlayer |
 | 图片预览       | `ImageLightbox`（yet-another-react-lightbox + Zoom）：传入一组图片与当前序号；资源库以一个资源分组内的图片为一组，组内首尾循环，不跨组；列表只渲染一个灯箱 |
 | 提示消息       | `src/lib/message.ts`（不直接调用 `toast`）   |
 | 错误提示       | `Alert variant="destructive"`                |
@@ -114,8 +115,9 @@ div.flex.h-dvh.flex-col                 ← (app)/layout.tsx
 
 按钮层级：
 
-- `default`（翠绿）——每张卡片/每个视图最多一个主操作，如「PotPlayer」「进入」。
-- `secondary`——次要但常用，如「预览」「下载」。
+- `default`（翠绿）——每张卡片/每个视图最多一个主操作，如「播放」「进入」。
+- `secondary`——次要但常用，如「预览」。
+- 卡片上的下载、复制直链、PotPlayer 一律是 `ghost` + `icon-sm` 图标按钮，不作为主操作。
 - `outline` / `ghost`——工具栏与 header 中的辅助操作、图标按钮。
 
 ## 7. 状态
@@ -124,7 +126,7 @@ div.flex.h-dvh.flex-col                 ← (app)/layout.tsx
 | ------------ | ------------------------------------------------------------ |
 | 加载中       | `Skeleton` 复刻真实布局（分组标题 + 卡片网格）               |
 | 刷新中       | 刷新按钮内 `Spinner` 并禁用，列表保持原内容；手动刷新带 `?fresh=1`，服务端以 `bypass_cache` 绕过 TorBox 列表缓存（torrent 默认 600 秒才更新），自动重新获取仍走缓存 |
-| 资源下载中   | 标题行显示 `Progress` + 百分比 + 状态名（`DOWNLOAD_STATE_LABELS`）；卡片封面为沙漏占位，主操作禁用但可聚焦（`focusableWhenDisabled`），复制直链禁用；不进入 M3U 播放列表 |
+| 资源下载中   | 标题行显示 `Progress` + 百分比 + 状态名（`DOWNLOAD_STATE_LABELS`）；卡片封面为沙漏占位，主操作（没有主操作时为下载图标）禁用但可聚焦（`focusableWhenDisabled`），其余图标操作禁用；不进入 M3U 播放列表 |
 | 资源已失效   | 下载完成但文件不在服务器上：标题行 `destructive` 色「文件不可用」，卡片同上禁用 |
 | 资源快过期   | 距 `expires_at` 不足 3 天：标题行 `ClockAlert` +「N 天后过期」（`muted-foreground`）；不足 24 小时或已过期转为 `destructive`；悬停显示具体时间。阈值见 `EXPIRING_WINDOW_MS / EXPIRING_URGENT_MS`；文件已不可用时不重复提示 |
 | 演示模式     | 未配置 `TORBOX_API_KEY` 时资源库返回 `server/mock-library.ts` 的模拟数据；header 字标旁 `Badge variant="outline"`「演示数据」（窄屏隐藏）；图片文件返回生成的 SVG 占位图，可预览、缩放，其他文件不可播放；未配置 `ACCESS_TOKEN` 时登录框下方 `FieldDescription` 提示演示密钥 |
@@ -142,6 +144,7 @@ div.flex.h-dvh.flex-col                 ← (app)/layout.tsx
 | ---------- | ---------------- |
 | 品牌       | `Box`            |
 | 播放       | `Play`           |
+| PotPlayer  | `MonitorPlay`    |
 | 复制直链   | `Copy`           |
 | 图片预览   | `Eye`            |
 | 下载       | `Download`       |
@@ -175,7 +178,7 @@ div.flex.h-dvh.flex-col                 ← (app)/layout.tsx
 | `src/utils/` | `scramble`、`grid-nav`、`layout`、`date`、`sort` | 纯函数，无 React、无业务 |
 | `src/lib/dot-field.ts` | 画布点阵场引擎 | 不依赖 React；渲染循环用 Motion `frame`，涟漪时序用 `animate` |
 | `src/hooks/` | `use-follow-highlight`、`use-spotlight`、`use-grid-keyboard-nav`、`use-hotkey` | 通用交互，无业务语义；只产出 MotionValue / 几何 |
-| `src/components/` | `Reticle`、`DotField`、`ScrambleText`、`AnimatedNumber`、`TypeText`、`ImageLightbox` | 通用展示组件，外观在这里 |
+| `src/components/` | `Reticle`、`DotField`、`ScrambleText`、`AnimatedNumber`、`TypeText`、`ImageLightbox`、`VideoPlayer` | 通用展示组件，外观在这里 |
 | 页面组件 | `library-list`、`file-card`、`login-stage` 等 | 只做接线：传选择器、参数与回调 |
 
 - 容器级交互 hook 统一签名 `useXxx(containerRef, options)`，在容器上做事件委托，彼此独立；删掉一行调用即可拆掉一个交互。
@@ -197,6 +200,7 @@ div.flex.h-dvh.flex-col                 ← (app)/layout.tsx
 | 分组标题 | 24 小时内加入的资源显示呼吸的 NEW | `NewBadge`，以数据拉取时间为「现在」 |
 | 分组吸顶 | 滚过分组标题后标题吸附在顶部，下一分组到达时被推出；吸附时可直接收起该分组并回到其标题处 | 原生 `sticky` + 分组容器（`layoutVirtualRows`），无滚动监听 |
 | 全部展开 / 收起 | 工具栏图标按钮，有展开的资源时收起全部，否则展开全部；当前分组保持在顶部 | `setAllExpanded` + 列表订阅 `bulkToggleCount` |
+| 视频播放 | 点击视频封面或「播放」在弹窗中网页播放并自动开始，焦点交给播放器（空格、方向键等快捷键直接可用）；「PotPlayer 播放」交给外部播放器后关闭弹窗 | `LibraryVideoDialog` + `VideoPlayer`；弹窗与灯箱都在列表层只渲染一个，全屏或缩放窗口重建卡片行时不会中断播放 |
 | 图片预览 | 点击图片封面或「预览」打开灯箱：左右键 / 按钮 / 滑动在同一分组内循环切换；滚轮、双击、双指或工具栏按钮缩放；Esc、点击空白处或下拉关闭，焦点回到打开它的按钮 | `ImageLightbox`；配色通过 `--yarl__*` 变量映射到主题变量，图标换成 lucide，加载超过 0.4s 才淡入转圈；减弱动态效果由灯箱自行处理 |
 | 键盘 | `/` 聚焦搜索，搜索框内 Esc 先清空再失焦；方向键在卡片间移动（跨分组、自动滚动），Enter 执行主操作 | `useHotkey`、`useGridKeyboardNav` + `utils/grid-nav` |