1803 lines
69 KiB
TypeScript
1803 lines
69 KiB
TypeScript
"use client";
|
||
|
||
import { Ban, Loader2, MonitorPlay, Plus, Radio, RefreshCw, Trash2 } from "lucide-react";
|
||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||
|
||
import {
|
||
buildYoutubeIniFromFields,
|
||
extractDouyinLiveUrls,
|
||
managedUrlConfigRelPathForPm2,
|
||
managedYoutubeIniRelPathForPm2,
|
||
parseYoutubeIniFields,
|
||
parseYoutubeStreamKeySuffix,
|
||
type YoutubeIniFields,
|
||
} from "@/lib/youtubeConfigUtils";
|
||
import type { PortalNavTarget } from "@/components/live-product/LivePipelineStrip";
|
||
import { LivePipelineStrip } from "@/components/live-product/LivePipelineStrip";
|
||
import { LiveProcessLiveLogCard } from "@/components/live-product/LiveProcessLiveLogCard";
|
||
import {
|
||
defaultPm2NameForChannel,
|
||
fetchYoutubeProChannelsRemote,
|
||
loadYoutubeProChannels,
|
||
newChannelId,
|
||
pushYoutubeProChannelsRemote,
|
||
resolveYoutubeProChannelPm2,
|
||
saveYoutubeProChannels,
|
||
sanitizeYoutubePm2Name,
|
||
type YoutubeProChannel,
|
||
} from "@/lib/youtubeProChannels";
|
||
import { normalizeBrowserReachableHttpUrl } from "@/lib/panelUrls";
|
||
|
||
type ProcessEntry = { pm2: string; script: string; label: string };
|
||
|
||
type TFn = (zh: string, en: string) => string;
|
||
|
||
function isYoutubeProcess(e: ProcessEntry) {
|
||
return /youtube/i.test(e.script) || /youtube/i.test(e.pm2);
|
||
}
|
||
|
||
function scriptStem(script: string): string {
|
||
const base = script.split("/").pop() || script;
|
||
return base.replace(/\.[^.]+$/, "");
|
||
}
|
||
|
||
function isStaticYoutubeControlEntry(entry: ProcessEntry): boolean {
|
||
return isYoutubeProcess(entry) && entry.pm2.trim() === scriptStem(entry.script).trim();
|
||
}
|
||
|
||
function singleModeProcessLabel(entry: ProcessEntry, t: TFn): string {
|
||
const stem = scriptStem(entry.script).toLowerCase();
|
||
if (stem.startsWith("douyin_youtube")) return t("抖音→YouTube", "Douyin → YouTube");
|
||
if (stem.startsWith("youtube")) return t("YouTube", "YouTube");
|
||
return entry.label;
|
||
}
|
||
|
||
function preferredSingleProcessPm2(entries: ProcessEntry[]): string {
|
||
const exact = entries.find((entry) => entry.pm2.trim().toLowerCase() === "youtube");
|
||
if (exact) return exact.pm2;
|
||
const byScript = entries.find((entry) => scriptStem(entry.script).trim().toLowerCase() === "youtube");
|
||
if (byScript) return byScript.pm2;
|
||
return entries[0]?.pm2 ?? "";
|
||
}
|
||
|
||
function isYoutubeRow(row: LiveProcRow | undefined): boolean {
|
||
if (!row) return false;
|
||
return /youtube/i.test(row.pm2) || /youtube/i.test(row.script ?? "");
|
||
}
|
||
|
||
function singleProcessPriority(entry: ProcessEntry, row: LiveProcRow | undefined): number {
|
||
const business = (row?.business_status || "").trim().toLowerCase();
|
||
if (row?.is_pushing || business === "streaming") return 0;
|
||
if (pm2StatusOnline(row?.process_status)) return 1;
|
||
if (entry.pm2.trim().toLowerCase() === "youtube") return 2;
|
||
if (scriptStem(entry.script).trim().toLowerCase() === "youtube") return 3;
|
||
return 10;
|
||
}
|
||
|
||
function buildSingleProcessOptions(entries: ProcessEntry[], liveRows: LiveProcRow[]): ProcessEntry[] {
|
||
const youtubeEntries = entries.filter(isYoutubeProcess);
|
||
const staticYoutubeEntries = youtubeEntries.filter((entry) => isStaticYoutubeControlEntry(entry));
|
||
const base = staticYoutubeEntries.length
|
||
? [...staticYoutubeEntries]
|
||
: youtubeEntries.length
|
||
? [...youtubeEntries]
|
||
: [...entries];
|
||
|
||
const seen = new Set(base.map((entry) => entry.pm2.trim()));
|
||
for (const row of liveRows.filter(isYoutubeRow)) {
|
||
const pm2 = row.pm2.trim();
|
||
if (!pm2 || seen.has(pm2)) continue;
|
||
const business = (row.business_status || "").trim().toLowerCase();
|
||
if (!row.is_pushing && business !== "streaming" && !pm2StatusOnline(row.process_status)) continue;
|
||
const matched = youtubeEntries.find((entry) => entry.pm2.trim() === pm2);
|
||
base.push(
|
||
matched ?? {
|
||
pm2,
|
||
script: row.script ?? youtubeEntries[0]?.script ?? "youtube.py",
|
||
label: row.label ?? pm2,
|
||
},
|
||
);
|
||
seen.add(pm2);
|
||
}
|
||
return base;
|
||
}
|
||
|
||
function preferredSingleProcessPm2FromRuntime(entries: ProcessEntry[], liveRows: LiveProcRow[]): string {
|
||
if (!entries.length) return "";
|
||
const rowMap = new Map(
|
||
liveRows
|
||
.filter(isYoutubeRow)
|
||
.map((row) => [row.pm2.trim(), row] as const),
|
||
);
|
||
let best = entries[0];
|
||
let bestScore = singleProcessPriority(best, rowMap.get(best.pm2.trim()));
|
||
for (const entry of entries.slice(1)) {
|
||
const score = singleProcessPriority(entry, rowMap.get(entry.pm2.trim()));
|
||
if (score < bestScore) {
|
||
best = entry;
|
||
bestScore = score;
|
||
}
|
||
}
|
||
return best.pm2;
|
||
}
|
||
|
||
function resolveChannelPm2(channel: YoutubeProChannel): string {
|
||
return resolveYoutubeProChannelPm2(channel);
|
||
}
|
||
|
||
const MODE_KEY = "live-hub-youtube-mode-v1";
|
||
const PRO_PM2_RESERVED = new Set(["tiktok", "obs", "web"]);
|
||
|
||
/** UI 暂时隐藏「多频道 Pro」切换（DOM 与逻辑保留，改 false 即可恢复） */
|
||
const HIDE_YOUTUBE_MULTI_PRO_TOGGLE = false;
|
||
|
||
type QuickLinkMap = Record<string, string>;
|
||
type ProLaneDraft = {
|
||
name: string;
|
||
streamKey: string;
|
||
pm2Name: string;
|
||
notes: string;
|
||
};
|
||
|
||
function laneDraftFromChannel(channel: YoutubeProChannel): ProLaneDraft {
|
||
return {
|
||
name: channel.name,
|
||
streamKey: channel.streamKey ?? "",
|
||
pm2Name: channel.pm2Name ?? defaultPm2NameForChannel(channel.id),
|
||
notes: channel.notes ?? "",
|
||
};
|
||
}
|
||
|
||
type LiveProcRow = {
|
||
pm2: string;
|
||
script?: string;
|
||
label?: string;
|
||
process_status?: string;
|
||
business_status?: string;
|
||
business_note?: string;
|
||
is_pushing?: boolean;
|
||
};
|
||
|
||
function pm2StatusOnline(st?: string) {
|
||
return /^(online|running)$/i.test((st || "").trim());
|
||
}
|
||
|
||
function businessStatusLabel(row: LiveProcRow | undefined, t: TFn): string {
|
||
const business = (row?.business_status || "").trim().toLowerCase();
|
||
if (business === "ready") return t("已配置", "Ready");
|
||
if (business === "streaming") return t("推流中", "Pushing");
|
||
if (business === "waiting_source") return t("等待上游", "Waiting source");
|
||
if (business === "source_live") return t("源已开播，转推未起", "Source live, relay down");
|
||
if (business === "monitoring") return t("监控中", "Monitoring");
|
||
if (business === "misconfigured") return t("密钥异常", "Key invalid");
|
||
if (business === "stale") return t("心跳过期", "Stale");
|
||
if (business === "error") return t("异常", "Error");
|
||
if (pm2StatusOnline(row?.process_status)) return t("运行中", "Running");
|
||
return (row?.process_status || "").trim() || t("未运行", "Idle");
|
||
}
|
||
|
||
function businessStatusBadgeClass(row: LiveProcRow | undefined): string {
|
||
const business = (row?.business_status || "").trim().toLowerCase();
|
||
if (business === "ready") return "bg-sky-500/15 text-sky-100 ring-sky-500/25";
|
||
if (business === "streaming") return "bg-emerald-500/15 text-emerald-200 ring-emerald-500/30";
|
||
if (business === "waiting_source" || business === "monitoring") {
|
||
return "bg-amber-500/15 text-amber-100 ring-amber-500/25";
|
||
}
|
||
if (business === "source_live") return "bg-sky-500/15 text-sky-100 ring-sky-500/25";
|
||
if (business === "misconfigured" || business === "error" || business === "stale") {
|
||
return "bg-rose-500/15 text-rose-100 ring-rose-500/25";
|
||
}
|
||
if (pm2StatusOnline(row?.process_status)) return "bg-emerald-500/15 text-emerald-200 ring-emerald-500/30";
|
||
return "bg-zinc-600/20 text-zinc-400 ring-zinc-500/25";
|
||
}
|
||
|
||
function nonCommentUrlLinesOf(text: string): string[] {
|
||
return text
|
||
.split(/\r?\n/)
|
||
.map((line) => line.trim())
|
||
.filter((line) => line && !line.startsWith("#"));
|
||
}
|
||
|
||
function shouldPreserveLocalUrlDraft(localText: string, remoteText: string): boolean {
|
||
return nonCommentUrlLinesOf(localText).length > 0 && nonCommentUrlLinesOf(remoteText).length === 0;
|
||
}
|
||
|
||
function parseProcBusy(busy: string | null): { action: string; pm2: string } | null {
|
||
if (!busy?.startsWith("proc:")) return null;
|
||
const rest = busy.slice(5);
|
||
const idx = rest.indexOf(":");
|
||
if (idx <= 0) return null;
|
||
const action = rest.slice(0, idx);
|
||
const pm2 = rest.slice(idx + 1);
|
||
if (!pm2 || !["start", "stop", "restart"].includes(action)) return null;
|
||
return { action, pm2 };
|
||
}
|
||
|
||
function LiveStreamActionBtn({
|
||
kind,
|
||
busyKind,
|
||
targetPm2,
|
||
busy,
|
||
online,
|
||
label,
|
||
className,
|
||
baseLock,
|
||
onRun,
|
||
notify,
|
||
t,
|
||
compact,
|
||
}: {
|
||
kind: "start" | "stop" | "restart";
|
||
busyKind?: "start" | "stop" | "restart";
|
||
targetPm2: string;
|
||
busy: string | null;
|
||
online: boolean;
|
||
label: string;
|
||
className: string;
|
||
baseLock: boolean;
|
||
onRun: () => void;
|
||
notify: (s: string) => void;
|
||
t: TFn;
|
||
compact?: boolean;
|
||
}) {
|
||
const pb = parseProcBusy(busy);
|
||
const forThisProc = pb && pb.pm2 === targetPm2;
|
||
const actionForBusy = busyKind ?? kind;
|
||
const loading = !!(forThisProc && pb.action === actionForBusy);
|
||
const siblingBusy = !!(forThisProc && pb.action !== actionForBusy);
|
||
const blockStart = kind === "start" && online;
|
||
const blockStop = kind === "stop" && !online;
|
||
const blockRestart = kind === "restart" && !online;
|
||
const blocked = blockStart || blockStop || blockRestart;
|
||
const hardLock = baseLock || loading || siblingBusy;
|
||
|
||
const onClick = () => {
|
||
if (loading) return;
|
||
if (siblingBusy) {
|
||
notify(t("请等待当前操作完成", "Wait for the current action to finish"));
|
||
return;
|
||
}
|
||
if (blockStart) {
|
||
notify(t("已在直播中，无需重复开始", "Already live"));
|
||
return;
|
||
}
|
||
if (blockStop) {
|
||
notify(t("当前未在直播，无法停止", "Not live — cannot stop"));
|
||
return;
|
||
}
|
||
if (blockRestart) {
|
||
notify(t("进程未运行时请使用「开始直播」", "Use Start when the process is not running"));
|
||
return;
|
||
}
|
||
if (baseLock) return;
|
||
onRun();
|
||
};
|
||
|
||
const sizeCls = compact
|
||
? "min-h-[2rem] px-3 py-1.5 text-xs font-medium"
|
||
: "min-h-[2.75rem] px-4 py-3 text-sm font-medium";
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={onClick}
|
||
className={`relative overflow-hidden rounded-xl ring-1 transition ${sizeCls} ${className} ${
|
||
blocked || hardLock ? "cursor-not-allowed" : ""
|
||
} ${blocked && !loading ? "opacity-45" : ""} ${siblingBusy ? "opacity-35" : ""} ${loading ? "ring-violet-400/40" : ""}`}
|
||
>
|
||
{loading ? (
|
||
<span className="absolute inset-0 flex items-center justify-center bg-black/25 backdrop-blur-[2px]">
|
||
<Loader2 className={`${compact ? "h-4 w-4" : "h-6 w-6"} animate-spin text-white`} />
|
||
</span>
|
||
) : null}
|
||
<span className={`inline-flex items-center justify-center gap-1.5 ${loading ? "invisible" : ""}`}>
|
||
{blocked ? <Ban className={`${compact ? "h-3 w-3" : "h-4 w-4"} shrink-0 opacity-90`} aria-hidden /> : null}
|
||
{label}
|
||
</span>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
type Props = {
|
||
t: TFn;
|
||
busy: string | null;
|
||
entries: ProcessEntry[];
|
||
currentProc: string;
|
||
setCurrentProc: (v: string) => void;
|
||
urlConfig: string;
|
||
setUrlConfig: (v: string) => void;
|
||
onRunProcess: (a: "start" | "stop" | "restart", processPm2?: string) => void;
|
||
onSaveUrlConfig: (content?: string, processPm2?: string) => void | Promise<void>;
|
||
fetchJson: <T,>(path: string, init?: RequestInit) => Promise<T>;
|
||
liveProcesses: LiveProcRow[];
|
||
notify: (msg: string) => void;
|
||
onNavigate?: (target: PortalNavTarget) => void;
|
||
quickLinks?: QuickLinkMap;
|
||
};
|
||
|
||
export function LiveYoutubeUnmannedView({
|
||
t,
|
||
busy,
|
||
entries,
|
||
currentProc,
|
||
setCurrentProc,
|
||
urlConfig,
|
||
setUrlConfig,
|
||
onRunProcess,
|
||
onSaveUrlConfig,
|
||
fetchJson,
|
||
liveProcesses,
|
||
notify,
|
||
onNavigate,
|
||
quickLinks,
|
||
}: Props) {
|
||
const ytEntries = useMemo(() => entries.filter(isYoutubeProcess), [entries]);
|
||
const staticYoutubeEntries = useMemo(() => ytEntries.filter((entry) => isStaticYoutubeControlEntry(entry)), [ytEntries]);
|
||
const singleProcessOptions = useMemo(
|
||
() => buildSingleProcessOptions(ytEntries.length ? ytEntries : entries, liveProcesses),
|
||
[entries, liveProcesses, ytEntries],
|
||
);
|
||
const preferredSingleProc = useMemo(
|
||
() => preferredSingleProcessPm2FromRuntime(singleProcessOptions, liveProcesses) || preferredSingleProcessPm2(singleProcessOptions),
|
||
[liveProcesses, singleProcessOptions],
|
||
);
|
||
|
||
const [mode, setMode] = useState<"single" | "pro">("single");
|
||
const [channels, setChannels] = useState<YoutubeProChannel[]>([]);
|
||
const [activeCh, setActiveCh] = useState<string>("");
|
||
const [youtubeIniText, setYoutubeIniText] = useState("");
|
||
const [ytFields, setYtFields] = useState<YoutubeIniFields>({
|
||
key: "",
|
||
rtmps: true,
|
||
bitrate: "",
|
||
fastAudio: false,
|
||
});
|
||
const [ytIniStatus, setYtIniStatus] = useState<string | null>(null);
|
||
const [ytIniLoading, setYtIniLoading] = useState(false);
|
||
const [proUrlDraft, setProUrlDraft] = useState("");
|
||
const [urlAutoRefresh, setUrlAutoRefresh] = useState(true);
|
||
const [urlReloading, setUrlReloading] = useState(false);
|
||
const [urlOptimizing, setUrlOptimizing] = useState(false);
|
||
const [urlFetchNote, setUrlFetchNote] = useState<string | null>(null);
|
||
const [laneDrafts, setLaneDrafts] = useState<Record<string, ProLaneDraft>>({});
|
||
const [laneSaving, setLaneSaving] = useState(false);
|
||
const [laneStatus, setLaneStatus] = useState<string | null>(null);
|
||
const [activeViewRefreshToken, setActiveViewRefreshToken] = useState(0);
|
||
const urlListDirtyRef = useRef(false);
|
||
const singleUrlDraftRef = useRef(urlConfig);
|
||
const proUrlDraftRef = useRef(proUrlDraft);
|
||
const currentProcRef = useRef(currentProc);
|
||
const urlRequestSeqRef = useRef(0);
|
||
const ytIniRequestSeqRef = useRef(0);
|
||
|
||
const applySingleUrlDraft = useCallback(
|
||
(next: string) => {
|
||
singleUrlDraftRef.current = next;
|
||
setUrlConfig(next);
|
||
},
|
||
[setUrlConfig],
|
||
);
|
||
|
||
const applyProUrlDraft = useCallback((next: string) => {
|
||
proUrlDraftRef.current = next;
|
||
setProUrlDraft(next);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
urlListDirtyRef.current = false;
|
||
}, [currentProc]);
|
||
|
||
useEffect(() => {
|
||
currentProcRef.current = currentProc;
|
||
}, [currentProc]);
|
||
|
||
useEffect(() => {
|
||
singleUrlDraftRef.current = urlConfig;
|
||
}, [urlConfig]);
|
||
|
||
useEffect(() => {
|
||
proUrlDraftRef.current = proUrlDraft;
|
||
}, [proUrlDraft]);
|
||
|
||
const pullUrlConfigFromServer = useCallback(async () => {
|
||
const targetProc = currentProcRef.current.trim();
|
||
if (!targetProc) return;
|
||
const requestId = ++urlRequestSeqRef.current;
|
||
try {
|
||
const params = new URLSearchParams({
|
||
process: targetProc,
|
||
_ts: String(Date.now()),
|
||
});
|
||
const data = await fetchJson<{ content?: string }>(`/get_url_config?${params}`);
|
||
if (requestId !== urlRequestSeqRef.current || targetProc !== currentProcRef.current.trim()) return;
|
||
const c = data.content ?? "";
|
||
if (urlListDirtyRef.current) return;
|
||
if (mode === "single") applySingleUrlDraft(c);
|
||
else {
|
||
const localDraft = channels.find((row) => row.id === activeCh)?.urlLines ?? "";
|
||
if (shouldPreserveLocalUrlDraft(localDraft, c)) {
|
||
applyProUrlDraft(localDraft);
|
||
return;
|
||
}
|
||
applyProUrlDraft(c);
|
||
if (activeCh) {
|
||
setChannels((prev) => {
|
||
const next = prev.map((x) => (x.id === activeCh ? { ...x, urlLines: c } : x));
|
||
saveYoutubeProChannels(next);
|
||
return next;
|
||
});
|
||
}
|
||
}
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
}, [activeCh, applyProUrlDraft, applySingleUrlDraft, channels, fetchJson, mode]);
|
||
|
||
useEffect(() => {
|
||
if (!currentProc || !urlAutoRefresh) return;
|
||
const id = window.setInterval(() => {
|
||
if (urlListDirtyRef.current) return;
|
||
void pullUrlConfigFromServer();
|
||
}, 8000);
|
||
return () => clearInterval(id);
|
||
}, [currentProc, urlAutoRefresh, pullUrlConfigFromServer]);
|
||
|
||
const reloadUrlManual = async () => {
|
||
const targetProc = currentProcRef.current.trim();
|
||
if (!targetProc) return;
|
||
setUrlReloading(true);
|
||
setUrlFetchNote(null);
|
||
urlListDirtyRef.current = false;
|
||
const requestId = ++urlRequestSeqRef.current;
|
||
try {
|
||
const params = new URLSearchParams({
|
||
process: targetProc,
|
||
_ts: String(Date.now()),
|
||
});
|
||
const data = await fetchJson<{ content?: string }>(`/get_url_config?${params}`);
|
||
if (requestId !== urlRequestSeqRef.current || targetProc !== currentProcRef.current.trim()) return;
|
||
const c = data.content ?? "";
|
||
if (urlListDirtyRef.current) {
|
||
setUrlFetchNote(t("检测到本地未保存修改，已保留当前草稿", "Kept the local unsaved draft"));
|
||
return;
|
||
}
|
||
if (mode === "single") applySingleUrlDraft(c);
|
||
else {
|
||
const localDraft = channels.find((row) => row.id === activeCh)?.urlLines ?? "";
|
||
if (shouldPreserveLocalUrlDraft(localDraft, c)) {
|
||
applyProUrlDraft(localDraft);
|
||
setUrlFetchNote(t("服务器暂无已保存 URL，已保留本地草稿", "Server has no saved URLs, kept the local draft"));
|
||
return;
|
||
}
|
||
applyProUrlDraft(c);
|
||
if (activeCh) {
|
||
setChannels((prev) => {
|
||
const next = prev.map((x) => (x.id === activeCh ? { ...x, urlLines: c } : x));
|
||
saveYoutubeProChannels(next);
|
||
return next;
|
||
});
|
||
}
|
||
}
|
||
setUrlFetchNote(t("已从服务器读取 URL_config", "Reloaded URL_config from server"));
|
||
} catch (e) {
|
||
if (requestId !== urlRequestSeqRef.current || targetProc !== currentProcRef.current.trim()) return;
|
||
setUrlFetchNote((e as Error).message);
|
||
} finally {
|
||
if (requestId === urlRequestSeqRef.current && targetProc === currentProcRef.current.trim()) {
|
||
setUrlReloading(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
try {
|
||
if (HIDE_YOUTUBE_MULTI_PRO_TOGGLE) {
|
||
setMode("single");
|
||
return;
|
||
}
|
||
const m = window.localStorage.getItem(MODE_KEY);
|
||
if (m === "pro" || m === "single") setMode(m);
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
void (async () => {
|
||
try {
|
||
const remote = await fetchYoutubeProChannelsRemote(fetchJson);
|
||
if (remote.fetched && remote.channels.length && !cancelled) {
|
||
setChannels(remote.channels);
|
||
saveYoutubeProChannels(remote.channels);
|
||
return;
|
||
}
|
||
} catch {
|
||
/* 使用本机缓存 */
|
||
}
|
||
if (cancelled) return;
|
||
const list = loadYoutubeProChannels();
|
||
const initial =
|
||
list.length > 0
|
||
? list
|
||
: (() => {
|
||
const id = newChannelId();
|
||
return [
|
||
{
|
||
id,
|
||
name: "线路 1",
|
||
streamKey: "",
|
||
urlLines: "",
|
||
pm2Name: defaultPm2NameForChannel(id),
|
||
notes: "",
|
||
},
|
||
];
|
||
})();
|
||
setChannels(initial);
|
||
if (!list.length) saveYoutubeProChannels(initial);
|
||
})();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [fetchJson]);
|
||
|
||
useEffect(() => {
|
||
if (!channels.length) {
|
||
if (activeCh) setActiveCh("");
|
||
return;
|
||
}
|
||
if (!activeCh || !channels.some((row) => row.id === activeCh)) {
|
||
setActiveCh(channels[0].id);
|
||
}
|
||
}, [channels, activeCh]);
|
||
|
||
const rowForPm2 = useCallback((pm2: string) => liveProcesses.find((p) => p.pm2 === pm2), [liveProcesses]);
|
||
const statusForPm2 = useCallback(
|
||
(pm2: string) => rowForPm2(pm2)?.process_status,
|
||
[rowForPm2],
|
||
);
|
||
const currentProcRow = rowForPm2(currentProc);
|
||
const currentProcLooksYoutube = useMemo(
|
||
() => !!currentProc && (/youtube/i.test(currentProc) || /youtube/i.test(currentProcRow?.script ?? "") || /youtube/i.test(currentProcRow?.label ?? "")),
|
||
[currentProc, currentProcRow],
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (mode !== "single" || !preferredSingleProc) return;
|
||
if (!currentProc || !currentProcLooksYoutube) {
|
||
setCurrentProc(preferredSingleProc);
|
||
}
|
||
}, [currentProc, currentProcLooksYoutube, mode, preferredSingleProc, setCurrentProc]);
|
||
|
||
const applyChannelsLocal = useCallback((next: YoutubeProChannel[]) => {
|
||
setChannels(next);
|
||
saveYoutubeProChannels(next);
|
||
}, []);
|
||
|
||
const syncChannelsRemote = useCallback(
|
||
async (next: YoutubeProChannel[]) => {
|
||
await pushYoutubeProChannelsRemote(fetchJson, next);
|
||
},
|
||
[fetchJson],
|
||
);
|
||
|
||
const persistChannels = useCallback(
|
||
(next: YoutubeProChannel[]) => {
|
||
applyChannelsLocal(next);
|
||
void syncChannelsRemote(next).catch((e) => {
|
||
notify(
|
||
`${t("多频道列表未同步到服务器", "Channel list not saved on server")}: ${(e as Error).message}`,
|
||
);
|
||
});
|
||
},
|
||
[applyChannelsLocal, notify, syncChannelsRemote, t],
|
||
);
|
||
|
||
const active = channels.find((c) => c.id === activeCh) || channels[0];
|
||
const activeLaneDraft = useMemo(
|
||
() => (active ? laneDrafts[active.id] ?? laneDraftFromChannel(active) : null),
|
||
[active, laneDrafts],
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (!active) return;
|
||
setLaneDrafts((prev) => {
|
||
if (prev[active.id]) return prev;
|
||
return { ...prev, [active.id]: laneDraftFromChannel(active) };
|
||
});
|
||
}, [active]);
|
||
|
||
useEffect(() => {
|
||
setLaneStatus(null);
|
||
}, [activeCh]);
|
||
|
||
const setLaneDraftField = useCallback(
|
||
(key: keyof ProLaneDraft, value: string) => {
|
||
if (!active) return;
|
||
setLaneDrafts((prev) => ({
|
||
...prev,
|
||
[active.id]: {
|
||
...(prev[active.id] ?? laneDraftFromChannel(active)),
|
||
[key]: value,
|
||
},
|
||
}));
|
||
setLaneStatus(null);
|
||
},
|
||
[active],
|
||
);
|
||
|
||
const activeSavedPm2 = active ? resolveChannelPm2(active) : "";
|
||
const activeDraftPm2 = active && activeLaneDraft
|
||
? resolveYoutubeProChannelPm2({ id: active.id, pm2Name: activeLaneDraft.pm2Name })
|
||
: "";
|
||
const activePm2PreviewChanged = !!active && !!activeLaneDraft && activeDraftPm2 !== activeSavedPm2;
|
||
|
||
const activeLaneValidation = useMemo(() => {
|
||
if (!active || !activeLaneDraft) {
|
||
return {
|
||
ok: false,
|
||
message: t("请选择线路", "Pick a lane"),
|
||
normalizedName: "",
|
||
normalizedPm2: "",
|
||
normalizedStreamKey: "",
|
||
normalizedNotes: "",
|
||
};
|
||
}
|
||
const normalizedName = activeLaneDraft.name.trim() || `${t("线路", "Ch")} ${channels.findIndex((row) => row.id === active.id) + 1}`;
|
||
const normalizedPm2 = resolveYoutubeProChannelPm2({ id: active.id, pm2Name: activeLaneDraft.pm2Name });
|
||
if (!normalizedPm2) {
|
||
return {
|
||
ok: false,
|
||
message: t("进程名不能为空", "PM2 name is required"),
|
||
normalizedName,
|
||
normalizedPm2,
|
||
normalizedStreamKey: activeLaneDraft.streamKey.trim(),
|
||
normalizedNotes: activeLaneDraft.notes.trim(),
|
||
};
|
||
}
|
||
if (PRO_PM2_RESERVED.has(normalizedPm2)) {
|
||
return {
|
||
ok: false,
|
||
message: t("该进程名保留给系统模块，请换一个", "This PM2 name is reserved"),
|
||
normalizedName,
|
||
normalizedPm2,
|
||
normalizedStreamKey: activeLaneDraft.streamKey.trim(),
|
||
normalizedNotes: activeLaneDraft.notes.trim(),
|
||
};
|
||
}
|
||
const duplicate = channels.find((row) => row.id !== active.id && resolveChannelPm2(row) === normalizedPm2);
|
||
if (duplicate) {
|
||
return {
|
||
ok: false,
|
||
message: t("该进程名已被其它线路占用", "Another lane already uses this PM2 name"),
|
||
normalizedName,
|
||
normalizedPm2,
|
||
normalizedStreamKey: activeLaneDraft.streamKey.trim(),
|
||
normalizedNotes: activeLaneDraft.notes.trim(),
|
||
};
|
||
}
|
||
return {
|
||
ok: true,
|
||
message: "",
|
||
normalizedName,
|
||
normalizedPm2,
|
||
normalizedStreamKey: activeLaneDraft.streamKey.trim(),
|
||
normalizedNotes: activeLaneDraft.notes.trim(),
|
||
};
|
||
}, [active, activeLaneDraft, channels, t]);
|
||
|
||
const activeLaneDirty = useMemo(() => {
|
||
if (!active || !activeLaneDraft) return false;
|
||
const savedDraft = laneDraftFromChannel(active);
|
||
return (
|
||
activeLaneDraft.name !== savedDraft.name ||
|
||
activeLaneDraft.streamKey !== savedDraft.streamKey ||
|
||
sanitizeYoutubePm2Name(activeLaneDraft.pm2Name) !== sanitizeYoutubePm2Name(savedDraft.pm2Name) ||
|
||
activeLaneDraft.notes !== savedDraft.notes
|
||
);
|
||
}, [active, activeLaneDraft]);
|
||
|
||
const setModePersist = useCallback(
|
||
(m: "single" | "pro") => {
|
||
if (m === "single" && mode === "pro" && active) {
|
||
const latestProUrlDraft = proUrlDraftRef.current;
|
||
if (latestProUrlDraft !== (active.urlLines ?? "").trim()) {
|
||
persistChannels(channels.map((x) => (x.id === active.id ? { ...x, urlLines: latestProUrlDraft } : x)));
|
||
}
|
||
}
|
||
if (m === "pro" && channels.length) {
|
||
const first = channels[0];
|
||
const latestSingleUrlDraft = singleUrlDraftRef.current.trim();
|
||
const youtubePm2Ok = staticYoutubeEntries.some((e) => e.pm2 === currentProc);
|
||
const pm2Name =
|
||
youtubePm2Ok && currentProc.trim()
|
||
? currentProc.trim()
|
||
: resolveChannelPm2(first);
|
||
const next: YoutubeProChannel[] = [
|
||
{
|
||
...first,
|
||
streamKey: ytFields.key.trim() || first.streamKey || "",
|
||
urlLines: latestSingleUrlDraft || first.urlLines || "",
|
||
pm2Name,
|
||
},
|
||
...channels.slice(1),
|
||
];
|
||
persistChannels(next);
|
||
const ch = next.find((c) => c.id === activeCh) ?? next[0];
|
||
applyProUrlDraft((ch?.urlLines ?? "").trim() || latestSingleUrlDraft);
|
||
}
|
||
setMode(m);
|
||
try {
|
||
window.localStorage.setItem(MODE_KEY, m);
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
},
|
||
[
|
||
mode,
|
||
active,
|
||
channels,
|
||
applyProUrlDraft,
|
||
ytFields.key,
|
||
currentProc,
|
||
staticYoutubeEntries,
|
||
activeCh,
|
||
persistChannels,
|
||
],
|
||
);
|
||
|
||
const selectProChannel = useCallback(
|
||
(c: YoutubeProChannel) => {
|
||
const latestProUrlDraft = proUrlDraftRef.current;
|
||
if (active && mode === "pro" && latestProUrlDraft !== (active.urlLines ?? "").trim()) {
|
||
persistChannels(channels.map((x) => (x.id === active.id ? { ...x, urlLines: latestProUrlDraft } : x)));
|
||
}
|
||
const u = (c.urlLines ?? "").trim();
|
||
applyProUrlDraft(u);
|
||
setActiveCh(c.id);
|
||
setCurrentProc(resolveChannelPm2(c));
|
||
},
|
||
[active, applyProUrlDraft, mode, channels, setCurrentProc, persistChannels],
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (mode !== "pro" || !activeCh) return;
|
||
const ch = channels.find((x) => x.id === activeCh);
|
||
if (!ch) return;
|
||
const want = resolveChannelPm2(ch);
|
||
setCurrentProc(want);
|
||
}, [mode, activeCh, channels, setCurrentProc]);
|
||
|
||
const loadYoutubeIni = useCallback(async () => {
|
||
const targetProc = currentProcRef.current.trim();
|
||
if (!targetProc) return;
|
||
const requestId = ++ytIniRequestSeqRef.current;
|
||
setYtIniLoading(true);
|
||
setYtIniStatus(null);
|
||
try {
|
||
const params = new URLSearchParams({
|
||
process: targetProc,
|
||
_ts: String(Date.now()),
|
||
});
|
||
const data = await fetchJson<{ content?: string }>(`/get_config?${params}`);
|
||
if (requestId !== ytIniRequestSeqRef.current || targetProc !== currentProcRef.current.trim()) return;
|
||
const text = data.content ?? "";
|
||
setYoutubeIniText(text);
|
||
setYtFields(parseYoutubeIniFields(text));
|
||
} catch (e) {
|
||
if (requestId !== ytIniRequestSeqRef.current || targetProc !== currentProcRef.current.trim()) return;
|
||
setYtIniStatus((e as Error).message);
|
||
} finally {
|
||
if (requestId === ytIniRequestSeqRef.current && targetProc === currentProcRef.current.trim()) {
|
||
setYtIniLoading(false);
|
||
}
|
||
}
|
||
}, [fetchJson]);
|
||
|
||
useEffect(() => {
|
||
if (!currentProc) return;
|
||
void pullUrlConfigFromServer();
|
||
void loadYoutubeIni();
|
||
setActiveViewRefreshToken((prev) => prev + 1);
|
||
}, [activeCh, currentProc, loadYoutubeIni, mode, pullUrlConfigFromServer]);
|
||
|
||
const persistActiveLaneDraft = useCallback(
|
||
async () => {
|
||
if (!active || !activeLaneDraft) {
|
||
throw new Error(t("请选择线路", "Pick a lane"));
|
||
}
|
||
if (!activeLaneValidation.ok) {
|
||
throw new Error(activeLaneValidation.message);
|
||
}
|
||
const latestProUrlDraft = proUrlDraftRef.current;
|
||
const next = channels.map((row) =>
|
||
row.id === active.id
|
||
? {
|
||
...row,
|
||
name: activeLaneValidation.normalizedName,
|
||
streamKey: activeLaneValidation.normalizedStreamKey,
|
||
pm2Name: activeLaneValidation.normalizedPm2,
|
||
notes: activeLaneValidation.normalizedNotes,
|
||
urlLines: latestProUrlDraft,
|
||
}
|
||
: row,
|
||
);
|
||
applyChannelsLocal(next);
|
||
await syncChannelsRemote(next);
|
||
setLaneDrafts((prev) => ({
|
||
...prev,
|
||
[active.id]: {
|
||
name: activeLaneValidation.normalizedName,
|
||
streamKey: activeLaneValidation.normalizedStreamKey,
|
||
pm2Name: activeLaneValidation.normalizedPm2,
|
||
notes: activeLaneValidation.normalizedNotes,
|
||
},
|
||
}));
|
||
return {
|
||
next,
|
||
savedLane:
|
||
next.find((row) => row.id === active.id) ??
|
||
({
|
||
...active,
|
||
name: activeLaneValidation.normalizedName,
|
||
streamKey: activeLaneValidation.normalizedStreamKey,
|
||
pm2Name: activeLaneValidation.normalizedPm2,
|
||
notes: activeLaneValidation.normalizedNotes,
|
||
urlLines: latestProUrlDraft,
|
||
} satisfies YoutubeProChannel),
|
||
pm2: activeLaneValidation.normalizedPm2,
|
||
};
|
||
},
|
||
[
|
||
active,
|
||
activeLaneDraft,
|
||
activeLaneValidation,
|
||
applyChannelsLocal,
|
||
channels,
|
||
syncChannelsRemote,
|
||
t,
|
||
],
|
||
);
|
||
|
||
const saveProLaneSettings = useCallback(async () => {
|
||
if (!active) return;
|
||
setLaneSaving(true);
|
||
setLaneStatus(null);
|
||
try {
|
||
const saved = await persistActiveLaneDraft();
|
||
setCurrentProc(saved.pm2);
|
||
setLaneStatus(t("线路设置已保存", "Lane settings saved"));
|
||
} catch (e) {
|
||
const message = (e as Error).message;
|
||
setLaneStatus(message);
|
||
notify(message);
|
||
} finally {
|
||
setLaneSaving(false);
|
||
}
|
||
}, [active, notify, persistActiveLaneDraft, setCurrentProc, t]);
|
||
|
||
const saveYoutubeIniToServer = async (content: string, processPm2 = currentProcRef.current) => {
|
||
const targetPm2 = processPm2.trim();
|
||
if (!targetPm2) {
|
||
setYtIniStatus(t("请选择进程", "Pick a process"));
|
||
return;
|
||
}
|
||
setYtIniLoading(true);
|
||
setYtIniStatus(null);
|
||
try {
|
||
const params = new URLSearchParams({ process: targetPm2 });
|
||
await fetchJson(`/save_config?${params}`, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ content }),
|
||
});
|
||
setYoutubeIniText(content);
|
||
setYtIniStatus(t("youtube.ini 已保存", "youtube.ini saved"));
|
||
} catch (e) {
|
||
setYtIniStatus((e as Error).message);
|
||
} finally {
|
||
setYtIniLoading(false);
|
||
}
|
||
};
|
||
|
||
const applyFieldsAndSave = async () => {
|
||
const body = buildYoutubeIniFromFields(ytFields);
|
||
await saveYoutubeIniToServer(body);
|
||
};
|
||
|
||
const applyYoutubeBalancedPreset = async () => {
|
||
setYtIniLoading(true);
|
||
setYtIniStatus(null);
|
||
try {
|
||
const source = youtubeIniText || buildYoutubeIniFromFields(ytFields);
|
||
const data = await fetchJson<{ message?: string; content?: string }>("/config_optimize", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
root: "app-config",
|
||
path: managedYoutubeIniRelPathForPm2(currentProcRef.current),
|
||
content: source,
|
||
action: "youtube_balanced_preset",
|
||
}),
|
||
});
|
||
const next = data.content ?? source;
|
||
setYoutubeIniText(next);
|
||
setYtFields(parseYoutubeIniFields(next));
|
||
setYtIniStatus(data.message || t("已应用 YouTube 预设", "Applied YouTube preset"));
|
||
} catch (e) {
|
||
setYtIniStatus((e as Error).message);
|
||
} finally {
|
||
setYtIniLoading(false);
|
||
}
|
||
};
|
||
|
||
const syncFieldsFromText = () => {
|
||
setYtFields(parseYoutubeIniFields(youtubeIniText));
|
||
setYtIniStatus(t("已从下方原文同步到表单", "Synced from raw"));
|
||
};
|
||
|
||
const keySuffixUi = useMemo(() => {
|
||
if (mode === "single") return parseYoutubeStreamKeySuffix(`key = ${ytFields.key}`);
|
||
const k = activeLaneDraft?.streamKey ?? active?.streamKey ?? "";
|
||
return parseYoutubeStreamKeySuffix(`key = ${k}`);
|
||
}, [mode, ytFields.key, active?.streamKey, activeLaneDraft?.streamKey]);
|
||
|
||
const saveProUrlAndServer = async () => {
|
||
if (!active) return;
|
||
try {
|
||
setLaneSaving(true);
|
||
setLaneStatus(null);
|
||
urlRequestSeqRef.current += 1;
|
||
const latestProUrlDraft = proUrlDraftRef.current;
|
||
const saved = await persistActiveLaneDraft();
|
||
setCurrentProc(saved.pm2);
|
||
await Promise.resolve(onSaveUrlConfig(latestProUrlDraft, saved.pm2));
|
||
urlListDirtyRef.current = false;
|
||
setLaneStatus(t("线路与地址已保存", "Lane settings and URLs saved"));
|
||
} catch (e) {
|
||
const message = e instanceof Error ? e.message : String(e);
|
||
setLaneStatus(message);
|
||
notify(message);
|
||
} finally {
|
||
setLaneSaving(false);
|
||
}
|
||
};
|
||
|
||
const saveSingleUrlAndClearDirty = async () => {
|
||
const targetPm2 = currentProcRef.current.trim();
|
||
if (!targetPm2) {
|
||
notify(t("请选择进程", "Pick a process"));
|
||
return;
|
||
}
|
||
try {
|
||
urlRequestSeqRef.current += 1;
|
||
await Promise.resolve(onSaveUrlConfig(singleUrlDraftRef.current, targetPm2));
|
||
urlListDirtyRef.current = false;
|
||
} catch {
|
||
/* parent 已 toast */
|
||
}
|
||
};
|
||
|
||
const dedupeUrlDraft = async () => {
|
||
const source = mode === "single" ? singleUrlDraftRef.current : proUrlDraftRef.current;
|
||
setUrlOptimizing(true);
|
||
setUrlFetchNote(null);
|
||
try {
|
||
const data = await fetchJson<{ message?: string; content?: string }>("/config_optimize", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
root: "app-config",
|
||
path: managedUrlConfigRelPathForPm2(currentProcRef.current),
|
||
content: source,
|
||
action: "dedupe_urls",
|
||
}),
|
||
});
|
||
const next = data.content ?? source;
|
||
if (mode === "single") applySingleUrlDraft(next);
|
||
else {
|
||
applyProUrlDraft(next);
|
||
}
|
||
urlListDirtyRef.current = true;
|
||
setUrlFetchNote(data.message || t("已去重当前 URL 列表", "Deduplicated current URL list"));
|
||
} catch (e) {
|
||
setUrlFetchNote((e as Error).message);
|
||
} finally {
|
||
setUrlOptimizing(false);
|
||
}
|
||
};
|
||
|
||
const pushProStreamKeyToServer = async () => {
|
||
if (!active || !activeLaneDraft) return;
|
||
const base = parseYoutubeIniFields(youtubeIniText || buildYoutubeIniFromFields(ytFields));
|
||
const f: YoutubeIniFields = {
|
||
key: activeLaneDraft.streamKey.trim(),
|
||
rtmps: base.rtmps,
|
||
bitrate: base.bitrate,
|
||
fastAudio: base.fastAudio,
|
||
};
|
||
const body = buildYoutubeIniFromFields(f);
|
||
setLaneSaving(true);
|
||
setLaneStatus(null);
|
||
try {
|
||
const saved = await persistActiveLaneDraft();
|
||
setCurrentProc(saved.pm2);
|
||
await saveYoutubeIniToServer(body, saved.pm2);
|
||
setLaneStatus(t("线路设置与 youtube.ini 已保存", "Lane settings and youtube.ini saved"));
|
||
} catch (e) {
|
||
const message = (e as Error).message;
|
||
setLaneStatus(message);
|
||
notify(message);
|
||
} finally {
|
||
setLaneSaving(false);
|
||
}
|
||
};
|
||
|
||
const currentUrlDraft = mode === "single" ? urlConfig : proUrlDraft;
|
||
const currentUrlCount = useMemo(() => nonCommentUrlLinesOf(currentUrlDraft).length, [currentUrlDraft]);
|
||
const currentDouyinCount = useMemo(() => extractDouyinLiveUrls(currentUrlDraft).length, [currentUrlDraft]);
|
||
const laneQuickLinks = useMemo(
|
||
() =>
|
||
[
|
||
quickLinks?.neko_browser,
|
||
quickLinks?.chromium_remote_debug,
|
||
quickLinks?.srs_api,
|
||
].filter((value): value is string => !!value),
|
||
[quickLinks],
|
||
);
|
||
|
||
const flushProChannelsBeforeRun = useCallback(
|
||
async (targetPm2: string) => {
|
||
const next = channels;
|
||
const activePm2 = active ? resolveChannelPm2(active) : "";
|
||
if (active && targetPm2 === activePm2) {
|
||
const saved = await persistActiveLaneDraft();
|
||
return saved;
|
||
}
|
||
applyChannelsLocal(next);
|
||
await syncChannelsRemote(next);
|
||
return {
|
||
next,
|
||
savedLane: active ?? null,
|
||
pm2: targetPm2,
|
||
};
|
||
},
|
||
[active, applyChannelsLocal, channels, persistActiveLaneDraft, syncChannelsRemote],
|
||
);
|
||
|
||
const runProProcess = useCallback(
|
||
async (action: "start" | "stop" | "restart", targetPm2: string) => {
|
||
const targetMatchesActiveLane = !!active && resolveChannelPm2(active) === targetPm2;
|
||
if (action !== "stop") {
|
||
let next = channels;
|
||
let effectivePm2 = targetPm2;
|
||
try {
|
||
const saved = await flushProChannelsBeforeRun(targetPm2);
|
||
next = saved.next;
|
||
effectivePm2 = saved.pm2;
|
||
} catch (e) {
|
||
notify(
|
||
`${t("当前线路保存失败", "Failed to save the active lane")}: ${(e as Error).message}`,
|
||
);
|
||
return;
|
||
}
|
||
const target = next.find(
|
||
(row) => resolveChannelPm2(row) === effectivePm2,
|
||
);
|
||
const urlText = target?.urlLines ?? "";
|
||
if (!((target?.streamKey ?? "").trim())) {
|
||
notify(t("请先填写当前线路的推流密钥", "Fill the stream key before starting"));
|
||
return;
|
||
}
|
||
if (!nonCommentUrlLinesOf(urlText).length) {
|
||
notify(t("请先填写当前线路的直播地址", "Fill the source URLs before starting"));
|
||
return;
|
||
}
|
||
targetPm2 = effectivePm2;
|
||
}
|
||
if (targetMatchesActiveLane) {
|
||
setCurrentProc(targetPm2);
|
||
}
|
||
onRunProcess(action, targetPm2);
|
||
},
|
||
[active, channels, flushProChannelsBeforeRun, notify, onRunProcess, setCurrentProc, t],
|
||
);
|
||
|
||
const lock = !!busy || ytIniLoading || urlReloading || urlOptimizing || laneSaving;
|
||
|
||
const singleRow = currentProcRow;
|
||
const singleOnline = pm2StatusOnline(statusForPm2(currentProc));
|
||
|
||
const urlToolbar = (
|
||
<div className="mt-2 flex flex-wrap items-center gap-4 text-xs text-zinc-400">
|
||
<label className="flex cursor-pointer items-center gap-2">
|
||
<input
|
||
type="checkbox"
|
||
className="rounded border-white/20 bg-black/40"
|
||
checked={urlAutoRefresh}
|
||
onChange={(e) => setUrlAutoRefresh(e.target.checked)}
|
||
/>
|
||
{t("每 8 秒自动从服务器刷新", "Auto-refresh from server every 8s")}
|
||
</label>
|
||
<button
|
||
type="button"
|
||
disabled={lock}
|
||
onClick={() => void reloadUrlManual()}
|
||
className="rounded-lg border border-white/10 px-3 py-1.5 text-zinc-200 hover:bg-white/5"
|
||
>
|
||
{t("手动重新读取", "Reload from server")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
disabled={lock}
|
||
onClick={() => void dedupeUrlDraft()}
|
||
className="rounded-lg border border-cyan-500/20 bg-cyan-500/10 px-3 py-1.5 text-cyan-100 hover:bg-cyan-500/15"
|
||
>
|
||
{urlOptimizing ? t("去重中...", "Deduplicating...") : t("智能去重", "Deduplicate")}
|
||
</button>
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<div className="mx-auto max-w-6xl space-y-6">
|
||
{onNavigate ? (
|
||
<LivePipelineStrip
|
||
t={t}
|
||
title={t("YouTube 转播链路", "YouTube relay chain")}
|
||
subtitle={t(
|
||
"与「网络」页相同风格的链路示意：代理 → 编码推流 → 浏览器侧操作工作室。",
|
||
"Same visual language as Network: proxy → encode → browser studio.",
|
||
)}
|
||
onNavigate={onNavigate}
|
||
steps={[
|
||
{
|
||
label: "ShellCrash",
|
||
sub: t("透明代理", "Proxy"),
|
||
gradient: "from-violet-500 to-fuchsia-500",
|
||
target: "network",
|
||
},
|
||
{
|
||
label: "FFmpeg",
|
||
sub: t("推流 / 转码", "Stream"),
|
||
gradient: "from-cyan-400 to-blue-500",
|
||
target: "live_youtube",
|
||
},
|
||
{
|
||
label: "Neko",
|
||
sub: t("Chromium 工作室", "Chromium"),
|
||
gradient: "from-emerald-400 to-teal-500",
|
||
openUrl: normalizeBrowserReachableHttpUrl(quickLinks?.neko_browser || "http://live.local:9200/"),
|
||
},
|
||
]}
|
||
/>
|
||
) : null}
|
||
<div className="rounded-2xl border border-violet-500/25 bg-gradient-to-br from-violet-500/[0.12] via-zinc-950/80 to-cyan-500/5 p-6 shadow-xl shadow-violet-900/10">
|
||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-red-500/30 to-violet-600/30 ring-1 ring-white/10">
|
||
<MonitorPlay className="h-5 w-5 text-red-200" />
|
||
</div>
|
||
<div>
|
||
<h2 className="text-lg font-semibold tracking-tight text-white">
|
||
{t("YouTube 无人直播", "YouTube unmanned live")}
|
||
</h2>
|
||
<p className="mt-0.5 text-xs text-zinc-500">
|
||
{t(
|
||
"单路一条流；多路时每条线路独立保存自己的密钥、URL 列表和 PM2 任务。填好后保存，再点「开始」。Neko 浏览器仅作辅助工作室，不再阻塞推流。",
|
||
"Single lane or multi-lane: every lane keeps its own key, URL list, and PM2 task. Save, then Start. Neko is optional browser tooling and no longer blocks streaming.",
|
||
)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
className={`flex rounded-xl border border-white/10 bg-black/30 p-1 ${
|
||
HIDE_YOUTUBE_MULTI_PRO_TOGGLE ? "hidden" : ""
|
||
}`}
|
||
aria-hidden={HIDE_YOUTUBE_MULTI_PRO_TOGGLE}
|
||
>
|
||
<button
|
||
type="button"
|
||
onClick={() => setModePersist("single")}
|
||
className={`rounded-lg px-4 py-2 text-xs font-medium transition ${
|
||
mode === "single" ? "bg-violet-500/25 text-white" : "text-zinc-500 hover:text-zinc-300"
|
||
}`}
|
||
>
|
||
{t("单频道", "Single")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setModePersist("pro")}
|
||
className={`rounded-lg px-4 py-2 text-xs font-medium transition ${
|
||
mode === "pro" ? "bg-violet-500/25 text-white" : "text-zinc-500 hover:text-zinc-300"
|
||
}`}
|
||
>
|
||
{t("多频道 Pro", "Multi Pro")}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{laneQuickLinks.length ? (
|
||
<div className="flex flex-wrap gap-2">
|
||
{quickLinks?.neko_browser ? (
|
||
<a
|
||
href={normalizeBrowserReachableHttpUrl(quickLinks.neko_browser)}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="rounded-lg border border-emerald-500/20 bg-emerald-500/10 px-3 py-2 text-xs text-emerald-100 ring-1 ring-emerald-500/20"
|
||
>
|
||
{t("打开 Neko 工作室", "Open Neko studio")}
|
||
</a>
|
||
) : null}
|
||
{quickLinks?.chromium_remote_debug ? (
|
||
<a
|
||
href={normalizeBrowserReachableHttpUrl(quickLinks.chromium_remote_debug)}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="rounded-lg border border-cyan-500/20 bg-cyan-500/10 px-3 py-2 text-xs text-cyan-100 ring-1 ring-cyan-500/20"
|
||
>
|
||
{t("打开 Chromium 调试", "Open Chromium debug")}
|
||
</a>
|
||
) : null}
|
||
{quickLinks?.srs_api ? (
|
||
<a
|
||
href={normalizeBrowserReachableHttpUrl(quickLinks.srs_api)}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="rounded-lg border border-violet-500/20 bg-violet-500/10 px-3 py-2 text-xs text-violet-100 ring-1 ring-violet-500/20"
|
||
>
|
||
{t("打开 SRS API", "Open SRS API")}
|
||
</a>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
|
||
<div className="rounded-2xl border border-amber-500/20 bg-zinc-950/60 p-6 ring-1 ring-white/[0.04]">
|
||
<div className="flex items-center gap-2 text-amber-200/90">
|
||
<Radio className="h-4 w-4" />
|
||
<h3 className="text-sm font-semibold text-white">{t("直播开关", "Live control")}</h3>
|
||
</div>
|
||
|
||
{mode === "single" ? (
|
||
<>
|
||
<label className="mt-4 block text-xs font-semibold uppercase tracking-wider text-zinc-500">
|
||
{t("转播任务", "Relay task")}
|
||
</label>
|
||
<select
|
||
className="mt-2 w-full rounded-xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white"
|
||
value={currentProc}
|
||
onChange={(e) => {
|
||
const next = e.target.value;
|
||
currentProcRef.current = next;
|
||
setCurrentProc(next);
|
||
}}
|
||
>
|
||
{currentProc && !singleProcessOptions.some((entry) => entry.pm2 === currentProc) ? (
|
||
<option value={currentProc}>
|
||
{currentProc}
|
||
{currentProcRow ? ` (${businessStatusLabel(currentProcRow, t)})` : ""}
|
||
</option>
|
||
) : null}
|
||
{singleProcessOptions.map((e) => (
|
||
<option key={e.pm2} value={e.pm2}>
|
||
{singleModeProcessLabel(e, t)} ({e.pm2})
|
||
</option>
|
||
))}
|
||
</select>
|
||
<div className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||
<LiveStreamActionBtn
|
||
kind="start"
|
||
targetPm2={currentProc}
|
||
busy={busy}
|
||
online={singleOnline}
|
||
label={t("开始直播", "Start")}
|
||
className="bg-emerald-500/20 text-emerald-200 ring-emerald-500/30"
|
||
baseLock={false}
|
||
onRun={() => onRunProcess("start", currentProc)}
|
||
notify={notify}
|
||
t={t}
|
||
/>
|
||
<LiveStreamActionBtn
|
||
kind="stop"
|
||
targetPm2={currentProc}
|
||
busy={busy}
|
||
online={singleOnline}
|
||
label={t("停止直播", "Stop")}
|
||
className="bg-rose-500/15 text-rose-200 ring-rose-500/25"
|
||
baseLock={false}
|
||
onRun={() => onRunProcess("stop", currentProc)}
|
||
notify={notify}
|
||
t={t}
|
||
/>
|
||
<LiveStreamActionBtn
|
||
kind="restart"
|
||
targetPm2={currentProc}
|
||
busy={busy}
|
||
online={singleOnline}
|
||
label={t("重新开始", "Restart")}
|
||
className="bg-amber-500/15 text-amber-200 ring-amber-500/25"
|
||
baseLock={false}
|
||
onRun={() => onRunProcess("restart", currentProc)}
|
||
notify={notify}
|
||
t={t}
|
||
/>
|
||
</div>
|
||
<p className="mt-3 text-center text-xs text-zinc-400">
|
||
{t("当前状态", "Current state")}: {businessStatusLabel(singleRow, t)}
|
||
</p>
|
||
<p className="mt-3 text-center font-mono text-[11px] text-zinc-600">
|
||
key {t("尾码", "suffix")}: {keySuffixUi || "—"}
|
||
</p>
|
||
</>
|
||
) : (
|
||
<>
|
||
<div className="mt-4 rounded-xl border border-cyan-500/25 bg-gradient-to-br from-cyan-500/[0.1] via-zinc-950/50 to-violet-500/[0.06] p-4 ring-1 ring-white/[0.04]">
|
||
<h4 className="text-xs font-semibold uppercase tracking-wider text-cyan-200/90">
|
||
{t("Pro 转播实况", "Pro relay status")}
|
||
</h4>
|
||
<p className="mt-1 text-[11px] text-zinc-500">
|
||
{t("对齐桌面端：每路独立 URL / youtube 配置文件；点左侧信息切换编辑，右侧控制进程。", "Per-lane config files like desktop; click row info to edit, use right-side controls for PM2.")}
|
||
</p>
|
||
<div className="mt-3 max-h-[min(24rem,55vh)] space-y-2 overflow-y-auto pr-1">
|
||
{channels.map((c) => {
|
||
const pm = resolveChannelPm2(c);
|
||
const row = rowForPm2(pm);
|
||
const st = statusForPm2(pm);
|
||
const laneUrls = nonCommentUrlLinesOf((c.urlLines ?? "").trim());
|
||
const douyinUrls = extractDouyinLiveUrls((c.urlLines ?? "").trim());
|
||
const dUrl = douyinUrls[0];
|
||
const suf = parseYoutubeStreamKeySuffix(`key = ${c.streamKey ?? ""}`);
|
||
const sel = activeCh === c.id;
|
||
const rowOnline = pm2StatusOnline(st);
|
||
return (
|
||
<div
|
||
key={c.id}
|
||
className={`flex flex-wrap items-center gap-2 rounded-lg border px-3 py-2.5 text-left text-xs transition sm:flex-nowrap ${
|
||
sel ? "border-violet-500/45 bg-violet-500/[0.1]" : "border-white/10 bg-black/30 hover:border-white/18"
|
||
}`}
|
||
>
|
||
<button
|
||
type="button"
|
||
className="min-w-0 flex-1 text-left"
|
||
onClick={() => {
|
||
currentProcRef.current = resolveChannelPm2(c);
|
||
selectProChannel(c);
|
||
}}
|
||
>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<span className="font-medium text-zinc-100">{c.name}</span>
|
||
<span
|
||
className={`shrink-0 rounded-md px-2 py-0.5 text-[10px] font-medium ring-1 ${
|
||
businessStatusBadgeClass(row)
|
||
}`}
|
||
>
|
||
{businessStatusLabel(row, t)}
|
||
</span>
|
||
</div>
|
||
<div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 font-mono text-[10px] text-zinc-500">
|
||
<span>
|
||
key …{suf || "—"}
|
||
</span>
|
||
<span className="text-zinc-600">·</span>
|
||
<span className="truncate" title={pm}>
|
||
{pm}
|
||
</span>
|
||
<span className="text-zinc-600">·</span>
|
||
<span>
|
||
URL {laneUrls.length}
|
||
</span>
|
||
<span className="text-zinc-600">·</span>
|
||
<span>
|
||
DY {douyinUrls.length}
|
||
</span>
|
||
</div>
|
||
{dUrl ? (
|
||
<a
|
||
href={dUrl}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="mt-1 block max-w-full truncate text-cyan-300/90 underline-offset-2 hover:underline"
|
||
onClick={(e) => e.stopPropagation()}
|
||
title={dUrl}
|
||
>
|
||
{dUrl.replace(/^https?:\/\//, "")}
|
||
</a>
|
||
) : (
|
||
<span className="mt-1 block text-zinc-600">—</span>
|
||
)}
|
||
</button>
|
||
<div
|
||
className="flex w-full shrink-0 flex-wrap items-center justify-end gap-1.5 sm:w-auto"
|
||
onClick={(e) => e.stopPropagation()}
|
||
onKeyDown={(e) => e.stopPropagation()}
|
||
>
|
||
<LiveStreamActionBtn
|
||
kind="start"
|
||
targetPm2={pm}
|
||
busy={busy}
|
||
online={rowOnline}
|
||
label={t("开始", "Start")}
|
||
className="rounded-lg bg-emerald-500/20 text-emerald-100 ring-emerald-500/30"
|
||
baseLock={false}
|
||
onRun={() => void runProProcess("start", pm)}
|
||
notify={notify}
|
||
t={t}
|
||
compact
|
||
/>
|
||
<LiveStreamActionBtn
|
||
kind="stop"
|
||
targetPm2={pm}
|
||
busy={busy}
|
||
online={rowOnline}
|
||
label={t("停止", "Stop")}
|
||
className="rounded-lg bg-rose-500/15 text-rose-100 ring-rose-500/25"
|
||
baseLock={false}
|
||
onRun={() => void runProProcess("stop", pm)}
|
||
notify={notify}
|
||
t={t}
|
||
compact
|
||
/>
|
||
<LiveStreamActionBtn
|
||
kind="restart"
|
||
targetPm2={pm}
|
||
busy={busy}
|
||
online={rowOnline}
|
||
label={t("重新开始", "Restart")}
|
||
className="rounded-lg bg-amber-500/15 text-amber-100 ring-amber-500/25"
|
||
baseLock={false}
|
||
onRun={() => void runProProcess("restart", pm)}
|
||
notify={notify}
|
||
t={t}
|
||
compact
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{mode === "single" ? (
|
||
<div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
|
||
<h3 className="text-sm font-semibold text-white">{t("YouTube 相关设置", "YouTube settings")}</h3>
|
||
<p className="mt-1 text-xs text-zinc-500">
|
||
{t("串流参数写进 youtube.ini，无需 Google 登录。", "Stream settings go to youtube.ini — no Google login.")}
|
||
</p>
|
||
|
||
<div className="mt-4 space-y-3">
|
||
<label className="block text-xs text-zinc-400">{t("串流密钥", "Stream key")}</label>
|
||
<input
|
||
className="w-full rounded-xl border border-white/10 bg-black/40 px-4 py-3 text-sm font-mono text-zinc-200"
|
||
spellCheck={false}
|
||
autoComplete="off"
|
||
value={ytFields.key}
|
||
onChange={(e) => setYtFields((f) => ({ ...f, key: e.target.value }))}
|
||
placeholder="xxxx-xxxx-xxxx-xxxx-xxxx"
|
||
/>
|
||
<div className="grid gap-3 sm:grid-cols-3">
|
||
<label className="flex flex-col gap-1 text-xs text-zinc-400">
|
||
RTMPS
|
||
<select
|
||
className="rounded-lg border border-white/10 bg-black/40 px-3 py-2 text-sm text-white"
|
||
value={ytFields.rtmps ? "1" : "0"}
|
||
onChange={(e) => setYtFields((f) => ({ ...f, rtmps: e.target.value === "1" }))}
|
||
>
|
||
<option value="1">{t("是（默认）", "Yes")}</option>
|
||
<option value="0">{t("否 → RTMP", "No")}</option>
|
||
</select>
|
||
</label>
|
||
<label className="flex flex-col gap-1 text-xs text-zinc-400">
|
||
{t("比特率 kbps", "Bitrate kbps")}
|
||
<input
|
||
className="rounded-lg border border-white/10 bg-black/40 px-3 py-2 font-mono text-sm"
|
||
value={ytFields.bitrate}
|
||
onChange={(e) => setYtFields((f) => ({ ...f, bitrate: e.target.value }))}
|
||
placeholder="4000"
|
||
/>
|
||
</label>
|
||
<label className="flex cursor-pointer items-center gap-2 pt-6 text-xs text-zinc-300">
|
||
<input
|
||
type="checkbox"
|
||
className="rounded border-white/20 bg-black/40"
|
||
checked={ytFields.fastAudio}
|
||
onChange={(e) => setYtFields((f) => ({ ...f, fastAudio: e.target.checked }))}
|
||
/>
|
||
fast_audio（{t("轻量音频", "lighter audio")}）
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 flex flex-wrap gap-2">
|
||
<button
|
||
type="button"
|
||
disabled={lock}
|
||
onClick={() => void loadYoutubeIni()}
|
||
className="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/[0.05] px-4 py-2 text-sm text-zinc-200"
|
||
>
|
||
<RefreshCw className={`h-3.5 w-3.5 ${ytIniLoading ? "animate-spin" : ""}`} />
|
||
{t("重新读取", "Reload")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
disabled={lock}
|
||
onClick={() => void applyFieldsAndSave()}
|
||
className="inline-flex items-center gap-2 rounded-xl bg-violet-500/25 px-4 py-2 text-sm font-medium text-violet-100 ring-1 ring-violet-500/35"
|
||
>
|
||
{ytIniLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
|
||
{t("保存 youtube.ini", "Save youtube.ini")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
disabled={lock}
|
||
onClick={() => void applyYoutubeBalancedPreset()}
|
||
className="rounded-xl border border-cyan-500/20 bg-cyan-500/10 px-4 py-2 text-sm text-cyan-100"
|
||
>
|
||
{t("平衡预设", "Balanced preset")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
disabled={lock}
|
||
onClick={syncFieldsFromText}
|
||
className="rounded-xl border border-white/10 px-4 py-2 text-sm text-zinc-400"
|
||
>
|
||
{t("从原文同步表单", "Parse raw")}
|
||
</button>
|
||
</div>
|
||
|
||
<details className="mt-4 rounded-xl border border-white/5 bg-black/20 p-3">
|
||
<summary className="cursor-pointer text-xs text-zinc-500">{t("高级：youtube.ini 原文", "Raw youtube.ini")}</summary>
|
||
<textarea
|
||
className="mt-2 h-36 w-full resize-y rounded-lg border border-white/10 bg-black/50 p-3 font-mono text-[11px] text-zinc-400"
|
||
value={youtubeIniText}
|
||
onChange={(e) => setYoutubeIniText(e.target.value)}
|
||
spellCheck={false}
|
||
/>
|
||
<button
|
||
type="button"
|
||
disabled={lock}
|
||
className="mt-2 rounded-lg bg-cyan-500/15 px-3 py-1.5 text-xs text-cyan-200"
|
||
onClick={() => void saveYoutubeIniToServer(youtubeIniText)}
|
||
>
|
||
{t("保存原文", "Save raw")}
|
||
</button>
|
||
</details>
|
||
|
||
{ytIniStatus ? <p className="mt-2 font-mono text-xs text-zinc-500">{ytIniStatus}</p> : null}
|
||
</div>
|
||
) : (
|
||
<div className="space-y-6">
|
||
<div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
|
||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||
<div>
|
||
<h3 className="text-sm font-semibold text-white">
|
||
{t("当前线路", "Current lane")}
|
||
{active ? (
|
||
<span className="ml-2 font-normal text-zinc-400">· {active.name}</span>
|
||
) : null}
|
||
{activeLaneDirty ? (
|
||
<span className="ml-2 rounded-md bg-amber-500/15 px-2 py-0.5 text-[10px] font-medium text-amber-100 ring-1 ring-amber-500/25">
|
||
{t("有未保存修改", "Unsaved")}
|
||
</span>
|
||
) : null}
|
||
</h3>
|
||
{active ? (
|
||
<p className="mt-0.5 font-mono text-[11px] text-zinc-500">
|
||
PM2: {activeSavedPm2}
|
||
{activePm2PreviewChanged ? ` → ${activeDraftPm2}` : ""}
|
||
{" · "}
|
||
key {keySuffixUi || "—"}
|
||
</p>
|
||
) : null}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
disabled={lock}
|
||
className="inline-flex items-center gap-1 rounded-lg bg-violet-500/20 px-3 py-1.5 text-xs text-violet-100 ring-1 ring-violet-500/30"
|
||
onClick={() => {
|
||
const id = newChannelId();
|
||
const nc: YoutubeProChannel = {
|
||
id,
|
||
name: `${t("线路", "Ch")} ${channels.length + 1}`,
|
||
streamKey: "",
|
||
urlLines: "",
|
||
pm2Name: defaultPm2NameForChannel(id),
|
||
notes: "",
|
||
};
|
||
setLaneDrafts((prev) => ({
|
||
...prev,
|
||
[id]: laneDraftFromChannel(nc),
|
||
}));
|
||
persistChannels([...channels, nc]);
|
||
setActiveCh(id);
|
||
currentProcRef.current = resolveChannelPm2(nc);
|
||
setCurrentProc(currentProcRef.current);
|
||
applyProUrlDraft("");
|
||
}}
|
||
>
|
||
<Plus className="h-3.5 w-3.5" />
|
||
{t("新增线路", "Add lane")}
|
||
</button>
|
||
</div>
|
||
|
||
{active ? (
|
||
<div className="mt-4 space-y-3 border-t border-white/5 pt-4">
|
||
<input
|
||
className="w-full rounded-xl border border-white/10 bg-black/40 px-3 py-2 text-sm"
|
||
value={activeLaneDraft?.name ?? ""}
|
||
onChange={(e) => setLaneDraftField("name", e.target.value)}
|
||
placeholder={t("线路名称", "Lane name")}
|
||
/>
|
||
<label className="block text-xs text-zinc-500">{t("串流密钥", "Stream key")}</label>
|
||
<input
|
||
className="w-full rounded-xl border border-white/10 bg-black/40 px-3 py-2 font-mono text-sm"
|
||
spellCheck={false}
|
||
value={activeLaneDraft?.streamKey ?? ""}
|
||
onChange={(e) => setLaneDraftField("streamKey", e.target.value)}
|
||
placeholder="xxxx-xxxx… / rtmp(s)://…"
|
||
/>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
type="button"
|
||
disabled={lock}
|
||
onClick={() => void saveProLaneSettings()}
|
||
className="rounded-xl border border-white/10 bg-white/[0.05] px-4 py-2 text-sm text-zinc-100"
|
||
>
|
||
{laneSaving ? t("保存中...", "Saving...") : t("保存线路设置", "Save lane")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
disabled={lock}
|
||
onClick={() => void pushProStreamKeyToServer()}
|
||
className="rounded-xl bg-violet-500/25 px-4 py-2 text-sm font-medium text-violet-100 ring-1 ring-violet-500/35"
|
||
>
|
||
{t("写入 youtube.ini", "Write youtube.ini")}
|
||
</button>
|
||
</div>
|
||
{!activeLaneValidation.ok ? (
|
||
<p className="text-xs text-rose-300">{activeLaneValidation.message}</p>
|
||
) : null}
|
||
<details className="rounded-xl border border-white/5 bg-black/20 p-3">
|
||
<summary className="cursor-pointer text-xs text-zinc-500">{t("高级：进程名", "Advanced: process name")}</summary>
|
||
<input
|
||
className="mt-2 w-full rounded-lg border border-white/10 bg-black/40 px-3 py-2 font-mono text-xs"
|
||
value={activeLaneDraft?.pm2Name ?? defaultPm2NameForChannel(active.id)}
|
||
onChange={(e) => setLaneDraftField("pm2Name", e.target.value)}
|
||
spellCheck={false}
|
||
placeholder="youtube2__…"
|
||
/>
|
||
<p className="mt-2 font-mono text-[11px] text-zinc-500">
|
||
{t("实际生效", "Effective")}: {activeDraftPm2 || "—"}
|
||
</p>
|
||
{activeLaneValidation.message && !activeLaneValidation.ok ? (
|
||
<p className="mt-2 text-[11px] text-rose-300">{activeLaneValidation.message}</p>
|
||
) : null}
|
||
</details>
|
||
<textarea
|
||
className="h-16 w-full resize-y rounded-xl border border-white/10 bg-black/40 p-3 text-xs text-zinc-300"
|
||
value={activeLaneDraft?.notes ?? ""}
|
||
onChange={(e) => setLaneDraftField("notes", e.target.value)}
|
||
placeholder={t("备注（可选）", "Notes (optional)")}
|
||
/>
|
||
{laneStatus ? <p className="text-xs text-zinc-400">{laneStatus}</p> : null}
|
||
<button
|
||
type="button"
|
||
disabled={lock || channels.length < 2}
|
||
className="inline-flex items-center gap-1 text-xs text-rose-300 hover:text-rose-200 disabled:opacity-30"
|
||
onClick={() => {
|
||
const next = channels.filter((c) => c.id !== active.id);
|
||
setLaneDrafts((prev) => {
|
||
const clone = { ...prev };
|
||
delete clone[active.id];
|
||
return clone;
|
||
});
|
||
persistChannels(next);
|
||
setActiveCh(next[0]?.id || "");
|
||
}}
|
||
>
|
||
<Trash2 className="h-3.5 w-3.5" />
|
||
{t("删除此线路", "Delete lane")}
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
|
||
<h3 className="text-sm font-semibold text-white">{t("直播地址列表", "URL list")}</h3>
|
||
<p className="mt-1 text-xs text-zinc-500">
|
||
{t(
|
||
"每条线路独立写入自己的 URL_config.<pm2>.ini，不再复用或回填所谓“全局地址”。",
|
||
"Each lane writes to its own URL_config.<pm2>.ini with no shared global URL draft.",
|
||
)}
|
||
</p>
|
||
<p className="mt-1 font-mono text-[10px] text-zinc-600">
|
||
{currentProc
|
||
? managedUrlConfigRelPathForPm2(currentProc)
|
||
: "URL_config.ini"}
|
||
</p>
|
||
<div className="mt-3 flex flex-wrap gap-2 text-[11px]">
|
||
<span className="rounded-full border border-cyan-500/20 bg-cyan-500/10 px-2.5 py-1 text-cyan-100">
|
||
{t("有效地址", "Valid URLs")}: {currentUrlCount}
|
||
</span>
|
||
<span className="rounded-full border border-violet-500/20 bg-violet-500/10 px-2.5 py-1 text-violet-100">
|
||
Douyin: {currentDouyinCount}
|
||
</span>
|
||
</div>
|
||
{urlToolbar}
|
||
{urlFetchNote ? <p className="mt-2 text-xs text-zinc-500">{urlFetchNote}</p> : null}
|
||
<textarea
|
||
className="mt-4 min-h-[160px] w-full resize-y rounded-xl border border-white/10 bg-black/50 p-4 font-mono text-xs text-zinc-300"
|
||
value={proUrlDraft}
|
||
onChange={(e) => {
|
||
urlListDirtyRef.current = true;
|
||
applyProUrlDraft(e.target.value);
|
||
}}
|
||
spellCheck={false}
|
||
placeholder="https://live.douyin.com/..."
|
||
/>
|
||
<div className="mt-3 flex flex-wrap gap-2">
|
||
<button
|
||
type="button"
|
||
disabled={lock}
|
||
onClick={() => void saveProUrlAndServer()}
|
||
className="rounded-xl bg-cyan-500/20 px-4 py-2 text-sm text-cyan-100 ring-1 ring-cyan-500/30"
|
||
>
|
||
{t("保存地址", "Save URLs")}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{mode === "single" ? (
|
||
<div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
|
||
<h3 className="text-sm font-semibold text-white">{t("直播地址列表 · URL_config.ini", "URL_config.ini")}</h3>
|
||
<p className="mt-1 text-xs text-zinc-500">
|
||
{t("一行一个地址；可自动刷新或手动重新读取。", "One URL per line; auto-refresh or reload.")}
|
||
</p>
|
||
<div className="mt-3 flex flex-wrap gap-2 text-[11px]">
|
||
<span className="rounded-full border border-cyan-500/20 bg-cyan-500/10 px-2.5 py-1 text-cyan-100">
|
||
{t("有效地址", "Valid URLs")}: {currentUrlCount}
|
||
</span>
|
||
<span className="rounded-full border border-violet-500/20 bg-violet-500/10 px-2.5 py-1 text-violet-100">
|
||
Douyin: {currentDouyinCount}
|
||
</span>
|
||
</div>
|
||
{urlToolbar}
|
||
{urlFetchNote ? <p className="mt-2 text-xs text-zinc-500">{urlFetchNote}</p> : null}
|
||
<textarea
|
||
className="mt-4 min-h-[200px] w-full resize-y rounded-xl border border-white/10 bg-black/50 p-4 font-mono text-xs text-zinc-300"
|
||
value={urlConfig}
|
||
onChange={(e) => {
|
||
urlListDirtyRef.current = true;
|
||
applySingleUrlDraft(e.target.value);
|
||
}}
|
||
spellCheck={false}
|
||
/>
|
||
<button
|
||
type="button"
|
||
disabled={lock}
|
||
onClick={() => void saveSingleUrlAndClearDirty()}
|
||
className="mt-3 rounded-xl bg-cyan-500/20 px-4 py-2 text-sm text-cyan-100 ring-1 ring-cyan-500/30"
|
||
>
|
||
{t("保存 URL 配置", "Save URL config")}
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
|
||
<LiveProcessLiveLogCard
|
||
t={t}
|
||
currentProc={currentProc}
|
||
fetchJson={fetchJson}
|
||
urlListText={mode === "single" ? urlConfig : proUrlDraft}
|
||
keySuffixUi={keySuffixUi}
|
||
showKeyRow
|
||
pollMs={800}
|
||
refreshToken={activeViewRefreshToken}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|