- setTab(key as HistoryTab)}
+ className={styles.tabs}
+ keepDOM={false}
+ >
+
+
+
+ {/* keepDOM=false：切走即卸载播放器、断开全部预览连接 */}
+
+
setVisible(false)}
diff --git a/app/lib/api-streamer.ts b/app/lib/api-streamer.ts
index a9ebd83..7a7d7c7 100644
--- a/app/lib/api-streamer.ts
+++ b/app/lib/api-streamer.ts
@@ -93,6 +93,42 @@ export interface StudioEntity {
extra_fields?: string;
}
+/** 正在录制的直播间能否在页面内预览（复用正在录制的那一路流，见 GET /v1/streamers/{id}/live） */
+export interface LivePreviewInfo {
+ /** 当前下载器能否提供预览；为 true 时 format 仍可能是 null（刚开始拉流、容器未定） */
+ available: boolean;
+ /** 视频流的容器，与 /live 响应的 Content-Type 一致：flv / mpegts 走 mpegts.js，fmp4 直接 MediaSource */
+ format: 'flv' | 'mpegts' | 'fmp4' | null;
+ /** fmp4 时从 init segment 解出的 RFC 6381 编码串（如 avc1.64001f,mp4a.40.2），其它容器为 null */
+ codecs: string | null;
+ /** 不可预览的原因（ffmpeg / streamlink 子进程落盘、HEVC FLV 等） */
+ reason: string | null;
+ /** 这一路有没有实时弹幕（平台实现了弹幕客户端），有则 /v1/streamers/{id}/danmaku（SSE）可用 */
+ danmaku: boolean;
+ /** 浏览器能否直连 CDN 拉这一路（全局配置 preview_transport = direct 时用；不能则回落中转并显示原因） */
+ direct: DirectCapability;
+}
+
+export interface DirectCapability {
+ capable: boolean;
+ /** 不能直连的原因；capable 为 true 时为 null */
+ reason: string | null;
+}
+
+/** GET /v1/streamers/{id}/live-url：正在录制的那条流的 CDN 直链 */
+export interface LiveUrlInfo {
+ url: string;
+ /** 浏览器该用哪个播放器：flv → mpegts.js，hls → hls.js（TS / fMP4 分片都行） */
+ format: 'flv' | 'hls' | null;
+ platform: string;
+ /** 过期时间估计（Unix 秒），直链里没有可识别的过期参数时为 null */
+ expires_at: number | null;
+ direct: DirectCapability;
+}
+
+/** 直播预览的取流方式（全局配置 preview_transport），空值视同 relay */
+export type PreviewTransport = 'relay' | 'direct';
+
export interface LiveStreamerEntity {
id: number;
url: string;
@@ -111,6 +147,8 @@ export interface LiveStreamerEntity {
live_cover_url?: string | null;
/** 录制中的主播头像地址；图片请走 /v1/streamers/{id}/avatar 代理 */
live_avatar_url?: string | null;
+ /** 录制中的预览能力；未录制为 null */
+ preview?: LivePreviewInfo | null;
statusTag?: React.ReactNode;
format?: string;
time_range?: string | Date[];
diff --git a/app/lib/danmaku-feed.ts b/app/lib/danmaku-feed.ts
new file mode 100644
index 0000000..1759243
--- /dev/null
+++ b/app/lib/danmaku-feed.ts
@@ -0,0 +1,99 @@
+'use client'
+import { useEffect, useMemo } from 'react'
+import { API_BASE } from './api-streamer'
+
+/** SSE 里一条弹幕的形状，与后端 `DanmakuFrame` 一致 */
+export interface DanmakuFrame {
+ /** 直播间 id：一条 SSE 可能复用给多个直播间 */
+ id: number
+ kind: 'danmaku' | 'gift' | 'super_chat' | 'guard_buy'
+ text: string
+ name: string | null
+ /** RGB 整数（白 16777215） */
+ color: number
+ /** Unix 毫秒 */
+ ts: number
+}
+
+const KINDS: DanmakuFrame['kind'][] = ['danmaku', 'gift', 'super_chat', 'guard_buy']
+
+/**
+ * 若干直播间共用的一条实时弹幕连接。
+ *
+ * 浏览器对同一主机的 HTTP/1.1 并发连接只有 6 个，监视器同屏 N 路视频已经占了 N 个，
+ * 弹幕不能再每路一条——所以由页面持有一个 feed（`/v1/danmaku?ids=…`，一条 SSE），
+ * 各播放器按 id 订阅自己那一路。单路弹层同样走这里（ids 只有一个）。
+ */
+export class DanmakuFeed {
+ private source: EventSource | null = null
+ private active = false
+ private listeners = new Map void>>()
+
+ /** 构造不产生副作用；`open()` 之后、有订阅者时才真正连接（StrictMode 下重复构造无害） */
+ constructor(readonly ids: number[]) {}
+
+ /** 允许连接；已有订阅者就立刻连。 */
+ open() {
+ this.active = true
+ this.connectIfNeeded()
+ }
+
+ /** 断开并禁止再连；订阅者保留，`open()` 后可恢复。 */
+ close() {
+ this.active = false
+ this.source?.close()
+ this.source = null
+ }
+
+ /** 订阅某个直播间的弹幕；返回退订函数。 */
+ subscribe(id: number, listener: (frame: DanmakuFrame) => void): () => void {
+ let set = this.listeners.get(id)
+ if (!set) {
+ set = new Set()
+ this.listeners.set(id, set)
+ }
+ set.add(listener)
+ this.connectIfNeeded()
+ return () => {
+ set?.delete(listener)
+ }
+ }
+
+ private connectIfNeeded() {
+ if (!this.active || this.source || this.ids.length === 0 || typeof window === 'undefined') return
+ if (![...this.listeners.values()].some((set) => set.size > 0)) return
+ const source = new EventSource(`${API_BASE}/v1/danmaku?ids=${this.ids.join(',')}`)
+ const handle = (e: MessageEvent) => {
+ let frame: DanmakuFrame
+ try {
+ frame = JSON.parse(e.data)
+ } catch {
+ return
+ }
+ if (!frame.text) return
+ this.listeners.get(frame.id)?.forEach((l) => l(frame))
+ }
+ for (const kind of KINDS) source.addEventListener(kind, handle as EventListener)
+ this.source = source
+ }
+}
+
+/** 同一组 id 的稳定键，供 effect 依赖：顺序无关。 */
+export function feedKey(ids: number[]): string {
+ return [...ids].sort((a, b) => a - b).join(',')
+}
+
+/**
+ * 按需持有一个 feed：`enabled` 且 ids 非空时连接，ids 变化（监视器换路）时换一条，
+ * 关闭 / 卸载时断开。返回值给各播放器的 `danmaku.feed`。
+ */
+export function useDanmakuFeed(ids: number[], enabled: boolean): DanmakuFeed | null {
+ const key = enabled ? feedKey(ids) : ''
+ // 构造无副作用，连接在 effect 里 open() 之后才发生
+ const feed = useMemo(() => (key ? new DanmakuFeed(key.split(',').map(Number)) : null), [key])
+ useEffect(() => {
+ feed?.open()
+ return () => feed?.close()
+ }, [feed])
+ return feed
+}
diff --git a/app/lib/use-dashboard.ts b/app/lib/use-dashboard.ts
index 6fb4496..5759c15 100644
--- a/app/lib/use-dashboard.ts
+++ b/app/lib/use-dashboard.ts
@@ -1,7 +1,7 @@
'use client'
import { useSyncExternalStore } from 'react'
import useSWR from 'swr'
-import { API_BASE, fetcher, LiveStreamerEntity, StreamerInfo, FileList } from './api-streamer'
+import { API_BASE, fetcher, LiveStreamerEntity, StreamerInfo, FileList, LiveUrlInfo, PreviewTransport } from './api-streamer'
import { platformName } from './status'
/**
@@ -112,6 +112,71 @@ export function liveImageUrl(
return `${API_BASE}/v1/streamers/${id}/${kind}?v=${(h >>> 0).toString(36)}`
}
+/** 正在录制的那一路流的同源地址（chunked FLV / MPEG-TS / fMP4），供页面内播放器直接拉取。 */
+export function livePreviewUrl(id: number): string {
+ return `${API_BASE}/v1/streamers/${id}/live`
+}
+
+/** 浏览器直连模式：向后端要当前录制中那条流的 CDN 直链。 */
+export function fetchLiveUrl(id: number): Promise {
+ return fetcher(`/v1/streamers/${id}/live-url`, { cache: 'no-store' })
+}
+
+/**
+ * CDN 直链在页面里能不能直接用：https 页面拉 http 直链会被当作混合内容拦掉（抖音的直链就是 http），
+ * 实测这些 CDN 都支持 https，直接换协议。
+ */
+export function directPlayableUrl(url: string): string {
+ if (typeof window !== 'undefined' && window.location.protocol === 'https:' && url.startsWith('http://')) {
+ return 'https://' + url.slice('http://'.length)
+ }
+ return url
+}
+
+/**
+ * 全局配置里的预览取流方式。与空间配置页共用同一个 SWR key，改完保存这里立刻拿到；
+ * 配置还没加载到时按 relay 处理（默认值）。
+ */
+export function usePreviewTransport(): PreviewTransport {
+ const { data } = useSWR<{ preview_transport?: PreviewTransport | null }>('/v1/configuration', fetcher, {
+ refreshInterval: SLOW_REFRESH_MS,
+ })
+ return data?.preview_transport === 'direct' ? 'direct' : 'relay'
+}
+
+/**
+ * 卡片 / 监视器能否起播：正在录制、下载器能旁路、容器已确定。
+ * 容器未定（刚开始拉流的前几秒）时按钮先禁用，下一次轮询拿到 format 再放开。
+ */
+export function canPreview(streamer: LiveStreamerEntity): streamer is LiveStreamerEntity & {
+ preview: { available: true; format: 'flv' | 'mpegts' | 'fmp4' }
+} {
+ const format = streamer.preview?.format
+ return (
+ streamer.status === LIVE_STATUS &&
+ !!streamer.preview?.available &&
+ (format === 'flv' || format === 'mpegts' || format === 'fmp4')
+ )
+}
+
+/** 容器短名 → 界面标签 */
+export function previewFormatLabel(format: 'flv' | 'mpegts' | 'fmp4' | null | undefined): string | null {
+ if (format === 'flv') return 'FLV'
+ if (format === 'mpegts') return 'TS'
+ if (format === 'fmp4') return 'fMP4'
+ return null
+}
+
+/** 预览按钮禁用时的提示文案；能预览时返回 null。 */
+export function previewDisabledReason(streamer: LiveStreamerEntity): string | null {
+ if (streamer.status !== LIVE_STATUS) return '未在录制'
+ const preview = streamer.preview
+ if (!preview) return '预览信息尚未就绪'
+ if (!preview.available) return preview.reason || '当前下载器不支持预览'
+ if (!preview.format) return '正在建立预览，请稍候'
+ return null
+}
+
const DAY = 86400
const EVENT_WINDOW = DAY // 事件流只展示最近 24h
diff --git a/app/lib/use-local-pref.ts b/app/lib/use-local-pref.ts
new file mode 100644
index 0000000..537aa2e
--- /dev/null
+++ b/app/lib/use-local-pref.ts
@@ -0,0 +1,66 @@
+'use client'
+import { useSyncExternalStore } from 'react'
+
+/**
+ * 记在 localStorage 里的界面偏好（同屏路数、弹幕开关等）。
+ * 用 useSyncExternalStore 而不是「useState + effect 里 setState」：服务端与首屏统一给默认值，
+ * 挂载后同步读到真实值，没有水合不一致，也不触发 react-hooks/set-state-in-effect。
+ */
+const listeners = new Set<() => void>()
+
+function notify() {
+ listeners.forEach((l) => l())
+}
+
+function subscribe(listener: () => void) {
+ listeners.add(listener)
+ window.addEventListener('storage', listener)
+ return () => {
+ listeners.delete(listener)
+ window.removeEventListener('storage', listener)
+ }
+}
+
+export function readPref(key: string): string | null {
+ if (typeof window === 'undefined') return null
+ try {
+ return window.localStorage.getItem(key)
+ } catch {
+ return null
+ }
+}
+
+export function writePref(key: string, value: string) {
+ try {
+ window.localStorage.setItem(key, value)
+ } catch {
+ /* 隐私模式等写不进去时就只在本次会话里生效 */
+ }
+ notify()
+}
+
+/** 布尔偏好。 */
+export function useBoolPref(key: string, fallback: boolean): [boolean, (v: boolean) => void] {
+ const value = useSyncExternalStore(
+ subscribe,
+ () => {
+ const raw = readPref(key)
+ return raw === null ? fallback : raw === '1'
+ },
+ () => fallback
+ )
+ return [value, (v: boolean) => writePref(key, v ? '1' : '0')]
+}
+
+/** 只接受给定候选值的数字偏好。 */
+export function useChoicePref(key: string, options: number[], fallback: number): [number, (v: number) => void] {
+ const value = useSyncExternalStore(
+ subscribe,
+ () => {
+ const n = Number(readPref(key))
+ return options.includes(n) ? n : fallback
+ },
+ () => fallback
+ )
+ return [value, (v: number) => writePref(key, String(v))]
+}
diff --git a/app/ui/LiveMonitor.tsx b/app/ui/LiveMonitor.tsx
new file mode 100644
index 0000000..4d645b3
--- /dev/null
+++ b/app/ui/LiveMonitor.tsx
@@ -0,0 +1,270 @@
+'use client'
+import React, { useState } from 'react'
+import useSWR from 'swr'
+import { Button, Empty, Select, Switch, Tag, Tooltip, Typography } from '@douyinfe/semi-ui'
+import { IconPlay, IconStop } from '@douyinfe/semi-icons'
+import { fetcher, LiveStreamerEntity, StreamerInfo } from '@/app/lib/api-streamer'
+import { LIVE_STATUS, platformName } from '@/app/lib/status'
+import {
+ canPreview,
+ formatRate,
+ liveImageUrl,
+ previewDisabledReason,
+ previewFormatLabel,
+ SLOW_REFRESH_MS,
+ STREAMERS_REFRESH_MS,
+} from '@/app/lib/use-dashboard'
+import { useBoolPref, useChoicePref } from '@/app/lib/use-local-pref'
+import { useDanmakuFeed } from '@/app/lib/danmaku-feed'
+import { LivePreviewPlayer } from './LivePreview'
+import styles from './live-monitor.module.scss'
+
+/**
+ * 监视器默认同屏路数。每路小窗占用对应直播间的 1 个预览连接
+ * （服务端每间上限见 `PREVIEW_MAX_SUBSCRIBERS_PER_ROOM`，进程上限 16），改这里即可换默认值。
+ */
+export const DEFAULT_MONITOR_TILES = 4
+/**
+ * 浏览器对同一主机的 HTTP/1.1 并发连接只有 6 个：每路小窗占 1 个长连接，弹幕复用 1 个，
+ * 列表轮询还要留 1 个，所以 HTTP/1.1 下最多 4 路；页面走 HTTP/2、HTTP/3（TLS 反代）时不受此限，
+ * 放开 6 / 9 路。
+ */
+export const MONITOR_TILE_OPTIONS_H1 = [1, 2, 4]
+export const MONITOR_TILE_OPTIONS_H2 = [1, 2, 4, 6, 9]
+
+function tileOptions(): number[] {
+ if (typeof window === 'undefined') return MONITOR_TILE_OPTIONS_H1
+ const nav = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming | undefined
+ const proto = nav?.nextHopProtocol ?? ''
+ return proto === 'h2' || proto === 'h3' ? MONITOR_TILE_OPTIONS_H2 : MONITOR_TILE_OPTIONS_H1
+}
+const TILES_KEY = 'biliup.monitor.maxTiles'
+/** 多路同屏默认不开弹幕（每路一条 SSE、多路叠加太吵），开关记在本地 */
+const DANMAKU_KEY = 'biliup.monitor.danmaku'
+
+/** 用户的选择：手动激活的顺序（先进先出）与手动停掉的房间；其余由数据推导。 */
+interface Selection {
+ order: number[]
+ stopped: number[]
+}
+
+/**
+ * 由「用户选择 + 当前可预览房间 + 路数上限」推导正在播放的房间列表（纯函数，无副作用）：
+ * 先保留用户激活且仍可预览的，再按列表顺序自动补满，手动停掉的不自动补。
+ */
+export function resolveActive(
+ selection: Selection,
+ previewableIds: number[],
+ maxTiles: number
+): number[] {
+ const previewable = new Set(previewableIds)
+ const stopped = new Set(selection.stopped)
+ const active: number[] = []
+ for (const id of selection.order) {
+ if (previewable.has(id) && !active.includes(id)) active.push(id)
+ }
+ for (const id of previewableIds) {
+ if (active.length >= maxTiles) break
+ if (!active.includes(id) && !stopped.has(id)) active.push(id)
+ }
+ return active.slice(Math.max(0, active.length - maxTiles))
+}
+
+/**
+ * 实时监视：所有正在录制的直播间的小窗网格。
+ * 可预览且在路数上限内的直接播放（默认静音）；超出的显示封面，点击替换最早开始的一路；
+ * 下载器不能旁路的显示封面与原因。独立组件，可整体挪到别的页面。
+ */
+export default function LiveMonitor() {
+ const { Text } = Typography
+ const { data: streamers, error, isLoading } = useSWR(
+ '/v1/streamers',
+ fetcher,
+ { refreshInterval: STREAMERS_REFRESH_MS }
+ )
+ const { data: infos } = useSWR('/v1/streamer-info', fetcher, {
+ refreshInterval: SLOW_REFRESH_MS,
+ })
+ const options = tileOptions()
+ const [maxTiles, setMaxTiles] = useChoicePref(TILES_KEY, options, DEFAULT_MONITOR_TILES)
+ const [danmaku, setDanmaku] = useBoolPref(DANMAKU_KEY, false)
+ const [selection, setSelection] = useState({ order: [], stopped: [] })
+
+ const live = (streamers ?? []).filter((s) => s.status === LIVE_STATUS)
+ const previewable = live.filter(canPreview)
+ const previewableIds = previewable.map((s) => s.id)
+ const active = resolveActive(selection, previewableIds, maxTiles)
+ const activeSet = new Set(active)
+ // 正在播且平台有弹幕客户端的那几路共用一条弹幕连接
+ const danmakuIds = previewable.filter((s) => activeSet.has(s.id) && s.preview?.danmaku).map((s) => s.id)
+ const danmakuFeed = useDanmakuFeed(danmakuIds, danmaku)
+
+ const infoByUrl = new Map()
+ for (const i of infos ?? []) {
+ const cur = infoByUrl.get(i.url)
+ if (!cur || i.date > cur.date) infoByUrl.set(i.url, i)
+ }
+
+ // 激活：满了就替换最早开始的一路（先进先出）
+ const activate = (id: number) => {
+ setSelection((prev) => {
+ const current = resolveActive(prev, previewableIds, maxTiles)
+ const kept = current.length >= maxTiles ? current.slice(1) : current
+ return {
+ order: [...kept.filter((x) => x !== id), id],
+ stopped: prev.stopped.filter((x) => x !== id),
+ }
+ })
+ }
+ const stop = (id: number) => {
+ setSelection((prev) => ({
+ order: prev.order.filter((x) => x !== id),
+ stopped: prev.stopped.includes(id) ? prev.stopped : [...prev.stopped, id],
+ }))
+ }
+
+ if (error) {
+ return (
+
+
+ 画面来自各直播间正在写盘的同一路流，默认静音；每路小窗占用该直播间的 1 个预览连接。
+ 超出路数的直播间显示封面，点击可替换最早开始的一路。
+
+
+ )
+}
diff --git a/app/ui/LivePreview.tsx b/app/ui/LivePreview.tsx
new file mode 100644
index 0000000..1cb5acf
--- /dev/null
+++ b/app/ui/LivePreview.tsx
@@ -0,0 +1,462 @@
+'use client'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import dynamic from 'next/dynamic'
+import { Button, Modal, Switch, Tag, Toast, Tooltip, Typography } from '@douyinfe/semi-ui'
+import { IconPlay, IconRefresh } from '@douyinfe/semi-icons'
+import type { ButtonProps } from '@douyinfe/semi-ui/lib/es/button'
+import { LiveStreamerEntity } from '@/app/lib/api-streamer'
+import { platformName } from '@/app/lib/status'
+import {
+ canPreview,
+ directPlayableUrl,
+ fetchLiveUrl,
+ formatRate,
+ liveImageUrl,
+ livePreviewUrl,
+ previewDisabledReason,
+ previewFormatLabel,
+ usePreviewTransport,
+} from '@/app/lib/use-dashboard'
+import { useBoolPref } from '@/app/lib/use-local-pref'
+import { type DanmakuFeed, useDanmakuFeed } from '@/app/lib/danmaku-feed'
+import styles from './live-preview.module.scss'
+
+const Players = dynamic(() => import('@/app/ui/Player'), { ssr: false })
+
+/** 服务端断开（掉队 / 换直链）后自动重连的次数上限；超过后交给用户手动重试 */
+const MAX_AUTO_RECONNECT = 3
+const RECONNECT_DELAY_MS = 2000
+/** 弹层弹幕开关记在本地，默认开；监视器另有自己的开关（默认关） */
+const MODAL_DANMAKU_KEY = 'biliup.preview.danmaku'
+
+type Phase = 'connecting' | 'playing' | 'reconnecting' | 'ended' | 'error'
+
+/** 实际在用的取流方式与角标文案 */
+type Source =
+ | { kind: 'relay'; fallbackReason: null }
+ | { kind: 'relay'; fallbackReason: string }
+ | {
+ kind: 'direct'
+ url: string
+ format: 'flv' | 'hls' | null
+ /** 这条直链是不是失败后重取来的（立刻又失败就不再试直连） */
+ refetched: boolean
+ /** 开始用这条直链的时刻：播够一阵再断多半是直链到期（斗鱼 5 min、B 站 1 h），可以再取 */
+ startedAt: number
+ }
+
+/**
+ * 直播预览播放区：复用正在录制的那一路流（`/v1/streamers/{id}/live`）。
+ *
+ * 播放器（Artplayer + mpegts.js）挂在 `key={nonce}` 上，重连即换 key 重建；
+ * 组件卸载时播放器销毁、fetch 中止，服务端随之释放该连接的槽位。
+ * 既用于卡片弹层，也用于历史记录页的监视器小窗。
+ */
+export function LivePreviewPlayer({
+ streamer,
+ muted = false,
+ compact = false,
+ danmakuFeed = null,
+ onFatal,
+}: {
+ streamer: LiveStreamerEntity
+ muted?: boolean
+ /** 监视器小窗：状态文字更简短 */
+ compact?: boolean
+ /** 页面持有的实时弹幕连接；null 表示弹幕关。仅平台有弹幕客户端时装弹幕层 */
+ danmakuFeed?: DanmakuFeed | null
+ /** 自动重连耗尽或不可恢复错误（415 / 429 / 解码失败）时通知父组件 */
+ onFatal?: (message: string) => void
+}) {
+ const [nonce, setNonce] = useState(0)
+ const [phase, setPhase] = useState('connecting')
+ const [message, setMessage] = useState(null)
+ const attemptsRef = useRef(0)
+ const timerRef = useRef | null>(null)
+ const transport = usePreviewTransport()
+ const directCapable = !!streamer.preview?.direct?.capable
+ const directReason = streamer.preview?.direct?.reason ?? null
+ // direct 模式且平台能直连：先向后端要直链；否则走中转，direct 模式下把原因挂在角标上。
+ // 取流方式随（房间, 配置, 能力）变化而重算：异步结果与失败回落都带着 key，key 不匹配的一律忽略，
+ // 这样切换时不需要在 effect 里同步重置 state。
+ const wantDirect = transport === 'direct' && directCapable
+ const sourceKey = `${streamer.id}:${transport}:${directCapable}`
+ const [fetched, setFetched] = useState<{ key: string; source: Source } | null>(null)
+ const [override, setOverride] = useState<{ key: string; source: Source } | null>(null)
+ useEffect(() => {
+ if (!wantDirect) return
+ let cancelled = false
+ fetchLiveUrl(streamer.id).then(
+ (info) => {
+ if (cancelled) return
+ const source: Source =
+ info.direct.capable && info.url
+ ? { kind: 'direct', url: directPlayableUrl(info.url), format: info.format, refetched: false, startedAt: Date.now() }
+ : { kind: 'relay', fallbackReason: info.direct.reason ?? '该平台不支持直连' }
+ setFetched({ key: sourceKey, source })
+ },
+ (e: unknown) => {
+ if (cancelled) return
+ setFetched({
+ key: sourceKey,
+ source: { kind: 'relay', fallbackReason: `获取直链失败：${e instanceof Error ? e.message : String(e)}` },
+ })
+ }
+ )
+ return () => {
+ cancelled = true
+ }
+ }, [wantDirect, sourceKey, streamer.id])
+ const source = useMemo(() => {
+ if (override?.key === sourceKey) return override.source
+ if (!wantDirect) {
+ return { kind: 'relay', fallbackReason: transport === 'direct' ? (directReason ?? '该平台不支持直连') : null }
+ }
+ return fetched?.key === sourceKey ? fetched.source : null
+ }, [override, fetched, sourceKey, wantDirect, transport, directReason])
+
+ const relayFormat = streamer.preview?.format ?? undefined
+ const codecs = streamer.preview?.codecs ?? null
+ const relayUrl = livePreviewUrl(streamer.id)
+ const url = source?.kind === 'direct' ? source.url : relayUrl
+ const format = source?.kind === 'direct' ? (source.format ?? 'flv') : relayFormat
+ // 平台有弹幕客户端才装弹幕层；开关只控制订阅与显示
+ const danmakuLayer = streamer.preview?.danmaku
+ ? { id: streamer.id, feed: danmakuFeed, fontSize: compact ? 15 : 22 }
+ : undefined
+ // 出错 / 断开时把封面垫在说明文字后面，而不是一块黑
+ const cover = liveImageUrl(streamer.id, 'cover', streamer.live_cover_url)
+
+ useEffect(
+ () => () => {
+ if (timerRef.current) clearTimeout(timerRef.current)
+ },
+ []
+ )
+
+ const scheduleReconnect = useCallback(
+ (why: string) => {
+ if (attemptsRef.current >= MAX_AUTO_RECONNECT) {
+ setPhase('ended')
+ setMessage(`${why}，已重连 ${MAX_AUTO_RECONNECT} 次`)
+ onFatal?.(why)
+ return
+ }
+ attemptsRef.current += 1
+ setPhase('reconnecting')
+ setMessage(`${why}，${RECONNECT_DELAY_MS / 1000} 秒后重连（${attemptsRef.current}/${MAX_AUTO_RECONNECT}）`)
+ timerRef.current = setTimeout(() => {
+ setPhase('connecting')
+ setMessage(null)
+ setNonce((n) => n + 1)
+ }, RECONNECT_DELAY_MS)
+ },
+ [onFatal]
+ )
+
+ // 直连出问题（CDN 403 / 直链过期 / 断开）：重取一次直链再播；再失败就回落中转，不再试直连
+ const handleDirectFailure = useCallback(
+ (why: string) => {
+ const fallback = (reason: string) => {
+ setOverride({ key: sourceKey, source: { kind: 'relay', fallbackReason: reason } })
+ attemptsRef.current = 0
+ setPhase('connecting')
+ setMessage(null)
+ setNonce((n) => n + 1)
+ }
+ // 播够 60 s 再断多半是直链到期（斗鱼 token 5 min、B 站 1 h），照常再取一条；
+ // 刚起播就失败才算「直连不行」——重取一次后仍失败就回落中转
+ const playedAWhile = source?.kind === 'direct' && Date.now() - source.startedAt > 60_000
+ if (source?.kind !== 'direct' || (source.refetched && !playedAWhile)) {
+ fallback(`直连失败：${why}`)
+ return
+ }
+ setPhase('reconnecting')
+ setMessage('直连中断，重新获取直链…')
+ fetchLiveUrl(streamer.id).then(
+ (info) => {
+ if (info.direct.capable && info.url) {
+ setOverride({
+ key: sourceKey,
+ source: {
+ kind: 'direct',
+ url: directPlayableUrl(info.url),
+ format: info.format,
+ refetched: true,
+ startedAt: Date.now(),
+ },
+ })
+ setPhase('connecting')
+ setMessage(null)
+ setNonce((n) => n + 1)
+ } else {
+ fallback(info.direct.reason ?? `直连失败：${why}`)
+ }
+ },
+ () => fallback(`直连失败：${why}，且重取直链失败`)
+ )
+ },
+ [source, sourceKey, streamer.id]
+ )
+
+ const handleEnded = useCallback(() => {
+ if (source?.kind === 'direct') handleDirectFailure('连接已断开')
+ else scheduleReconnect('连接已断开')
+ }, [source, handleDirectFailure, scheduleReconnect])
+ const handleError = useCallback(
+ (text: string) => {
+ if (source?.kind === 'direct') {
+ handleDirectFailure(text)
+ return
+ }
+ // 415（不支持）/ 429（超限）/ 解码 / 浏览器不支持的编码不会因重试而变化；503 与网络抖动可以再试
+ const recoverable = /重连|503|网络|连接失败/.test(text) && !/不支持|拒绝|无法起播/.test(text)
+ if (recoverable) {
+ scheduleReconnect(text)
+ return
+ }
+ setPhase('error')
+ setMessage(text)
+ onFatal?.(text)
+ },
+ [source, handleDirectFailure, scheduleReconnect, onFatal]
+ )
+ const retry = () => {
+ attemptsRef.current = 0
+ setPhase('connecting')
+ setMessage(null)
+ setNonce((n) => n + 1)
+ }
+
+ // 播放器一旦起播就当作在放（mpegts.js 没有可靠的 first-frame 事件；错误会另行回调）
+ useEffect(() => {
+ if (phase !== 'connecting') return
+ const t = setTimeout(() => setPhase((p) => (p === 'connecting' ? 'playing' : p)), 1500)
+ return () => clearTimeout(t)
+ }, [phase, nonce])
+
+ const pending = source === null
+ const showPlayer = (phase === 'connecting' || phase === 'playing') && !pending
+ const badge =
+ source?.kind === 'direct'
+ ? { text: '直连 CDN', tone: 'direct' as const }
+ : source?.kind === 'relay' && source.fallbackReason
+ ? { text: `已回落中转：${source.fallbackReason}`, tone: 'fallback' as const }
+ : null
+ return (
+
+
+ {name}
+
+
+ {platformName(streamer.url)}
+
+ {previewFormatLabel(format) ? (
+
+ {previewFormatLabel(format)}
+
+ ) : null}
+
+ {rate ? `写盘 ${rate}` : '写盘速率 —'}
+
+
+
+
+ 弹幕
+
+ setDanmakuPref(!!v)}
+ aria-label="弹幕"
+ />
+
+
+
+ }
+ >
+ {/* 弹层关闭即卸载：不留后台连接 */}
+ {visible ? (
+
-
-
+
+
+
+
+
+ )
+ }
+ if (!isLoading && live.length === 0) {
+ return (
+
+
+ )
+ }
+
+ const full = active.length >= maxTiles
+ return (
+
+
+
+
+ 正在监视 {active.length} / {maxTiles} 路
+
+
+ 录制中 {live.length} 间 · 可预览 {previewable.length} 间
+
+
+
+
+
+
+ 弹幕
+
+ setDanmaku(!!v)} aria-label="弹幕" />
+
+
+
+ 同屏路数
+
+
+
+ {live.map((s) => {
+ const info = infoByUrl.get(s.url)
+ const playing = activeSet.has(s.id)
+ const can = canPreview(s)
+ const reason = can ? null : previewDisabledReason(s)
+ const cover = liveImageUrl(s.id, 'cover', s.live_cover_url)
+ const rate = formatRate(s.live_bytes_per_sec)
+ const name = s.remark || s.url
+ return (
+
+
+
+ {name}
+
+
+ {platformName(s.url)}
+
+ {previewFormatLabel(s.preview?.format) ? (
+
+ {previewFormatLabel(s.preview?.format)}
+
+ ) : null}
+ {rate ?? '—'}
+ {playing ? (
+
+ }
+ aria-label={`停止 ${name}`}
+ onClick={() => stop(s.id)}
+ />
+
+ ) : null}
+
+ {playing ? (
+
+ )
+ })}
+
+
+ {showPlayer ? (
+
+
+ {badge.text}
+
+
+ ) : null}
+ {phase !== 'playing' || pending ? (
+
+ )
+}
+
+/** 卡片里的「预览」弹层：关闭即卸载播放器、断开连接。 */
+export function LivePreviewModal({
+ streamer,
+ visible,
+ onClose,
+}: {
+ streamer: LiveStreamerEntity
+ visible: boolean
+ onClose: () => void
+}) {
+ const { Text } = Typography
+ const name = streamer.remark || streamer.url
+ const rate = formatRate(streamer.live_bytes_per_sec)
+ const format = streamer.preview?.format
+ const danmakuAvailable = !!streamer.preview?.danmaku
+ const [danmakuPref, setDanmakuPref] = useBoolPref(MODAL_DANMAKU_KEY, true)
+ const danmakuOn = visible && danmakuAvailable && danmakuPref
+ const danmakuFeed = useDanmakuFeed([streamer.id], danmakuOn)
+ const transport = usePreviewTransport()
+ const notifiedRef = useRef(false)
+ useEffect(() => {
+ if (!visible) notifiedRef.current = false
+ }, [visible])
+ const handleFatal = useCallback(
+ (text: string) => {
+ if (notifiedRef.current) return
+ notifiedRef.current = true
+ Toast.error({ content: `预览中断：${text}`, duration: 4 })
+ },
+ []
+ )
+
+ return (
+
+ {cover && (phase === 'error' || phase === 'ended') ? (
+ // 封面走同源代理；加载失败只剩底色
+ // eslint-disable-next-line @next/next/no-img-element
+ {
+ e.currentTarget.style.display = 'none'
+ }}
+ />
+ ) : null}
+
+ ) : null}
+
+ {pending
+ ? '正在获取直链…'
+ : phase === 'connecting'
+ ? source.kind === 'direct'
+ ? '正在连接 CDN…'
+ : '正在连接录制流…'
+ : message}
+
+ {phase === 'ended' || phase === 'error' ? (
+ }
+ theme="light"
+ onClick={retry}
+ >
+ 重试
+
+ ) : null}
+
+
+ {transport === 'direct'
+ ? '直连模式：能直连的平台由浏览器直接向 CDN 拉流，不经 biliup；不能的自动回落到录制流中转（角标标出原因）。关闭弹窗即断开。'
+ : '画面来自正在写盘的同一路流，不另外向直播平台拉流；关闭弹窗即断开。'}
+
+
+
+ )
+}
+
+/**
+ * 「预览」按钮 + 弹层。录制中且下载器能旁路时可点；否则禁用并用 tooltip 说明原因
+ * （ffmpeg / streamlink 子进程落盘、fMP4、HEVC、容器尚未确定）。
+ */
+export function LivePreviewButton({
+ streamer,
+ size = 'small',
+ theme = 'light',
+ iconOnly = false,
+ className,
+}: {
+ streamer: LiveStreamerEntity
+ size?: ButtonProps['size']
+ theme?: ButtonProps['theme']
+ iconOnly?: boolean
+ className?: string
+}) {
+ const [open, setOpen] = useState(false)
+ const enabled = canPreview(streamer)
+ const reason = previewDisabledReason(streamer)
+ const button = (
+ }
+ disabled={!enabled}
+ className={className}
+ aria-label={iconOnly ? '预览' : undefined}
+ onClick={(e) => {
+ e.stopPropagation()
+ setOpen(true)
+ }}
+ >
+ {iconOnly ? null : '预览'}
+
+ )
+ return (
+ <>
+ {enabled ? (
+ button
+ ) : (
+