@@ -612,7 +662,7 @@ function api(url, opt){
return fetch(url, opt);
}
// ========== 分区导航 ==========
-var tabNames = {mon:"监控", rec:"录制", mrg:"合并", ntf:"通知", file:"文件", sys:"设置"};
+var tabNames = {mon:"监控", rec:"录制", mrg:"合并", trc:"转码", ntf:"通知", file:"文件", sys:"设置"};
var curTab = "";
function showTab(name){
if(!tabNames[name]) name = "mon";
@@ -630,6 +680,10 @@ function showTab(name){
// 切过去的时候顺手刷新那个分区里的实时数据
if(name === "file" && authed) loadFiles();
if(name === "mrg" && authed) fillMergePickers();
+ // 转码页的文件下拉靠文件列表填，切过去时列表还是空的就先拉一次
+ if(name === "trc" && authed){
+ if(fileList.length) fillTranscodePick(); else loadFiles();
+ }
}
document.getElementById("tabs").addEventListener("click", function(e){
var t = e.target.closest(".tab");
@@ -750,6 +804,7 @@ async function refresh(){
setChk("mergeDelVideo", st.mergeDelVideo);
setChk("mergeDelDanmu", st.mergeDelDanmu);
syncMergeState(st);
+ syncTranscodeState(st);
// 顶栏的状态摘要
var sl = st.streamers||[];
var rec = 0, live = 0;
@@ -913,8 +968,6 @@ document.getElementById("defaultQualityPref").addEventListener("change", functio
dropDirty("defaultQualityPref");
saveSettings(null, true);
});
-// 手动合并的视频框：手填/粘贴完（失焦）也自动找一次同名弹幕文件
-document.getElementById("mrgVideos").addEventListener("change", function(){ autoMatchDanmu(); });
// HTML 高度只对 html 类型有意义，选 text 时收起来
function toggleMeowHeight(){
var isHTML = document.getElementById("meowMsgType").value === "html";
@@ -937,7 +990,13 @@ document.addEventListener("keydown", function(e){
if(el.classList.contains("br") || el.classList.contains("brnum")){ el.blur(); return; } // 档位相关的框失焦即提交
if(el.id === "newuid"){ e.preventDefault(); addUid(); return; }
if(el.id === "authTokenNew"){ e.preventDefault(); changeToken(); return; }
- if(el.id === "mrgOffset" || el.id === "mrgOut" || el.id === "mrgDanmu"){ e.preventDefault(); checkMerge(); return; }
+ // 合并 / 转码那一行一行的参数框不是设置项：回车用来触发检查或重新估算，别去点保存
+ if(el.closest && el.closest(".trow")){
+ e.preventDefault();
+ if(el.closest("#mrgJobs")) checkMerge();
+ else if(el.closest("#tcRows")) estimateTranscode();
+ return;
+ }
if(settingFields.indexOf(el.id) >= 0){ e.preventDefault(); saveSettings(null); }
});
// 还有没保存的改动时提醒一句，别直接关掉页面
@@ -972,6 +1031,7 @@ async function loadFiles(b){
fileList = d.files || [];
recDir = d.recordDir || "";
fillMergePickers();
+ fillTranscodePick();
document.getElementById("diskInfo").textContent =
"磁盘剩余 " + fmtSize(d.free) + " / 共 " + fmtSize(d.total) +
" 录播：" + d.recordDir + " 成片：" + d.mergeDir;
@@ -1015,16 +1075,19 @@ var pickCur = ""; // 当前所在目录
var pickParent = ""; // 上一级
var pickFile = ""; // 单选时选中的那个
var pickMulti = false; // 多选模式（视频框这种一行一个、可以选多个的）
+var pickCb = null; // 选完后交给它的回调，不为空时不再往输入框里填
var pickSel = []; // 多选已勾选的绝对路径，换目录也不清，所以能跨文件夹/跨盘攒
var recDir = ""; // 录播目录，挑弹幕和视频时从它开始
var lastPickKey = "", lastPickAt = 0; // 列表里连点同一项只算一次
var lastNavAt = 0; // 刚跳转过目录的这段时间里忽略列表上的点击，双击文件夹才不会连进两层
-function openPick(id, kind, multi){
- var el = document.getElementById(id);
+// cb 不为空时选完不填框，而是把选中的路径交给它（手动合并、转码这种一行一个的列表用）
+function openPick(id, kind, multi, cb){
+ var el = id ? document.getElementById(id) : null;
pickField = id;
pickKind = kind === "file" ? "file" : "dir";
pickMulti = !!multi && pickKind === "file";
+ pickCb = cb || null;
pickFile = "";
pickSel = [];
document.getElementById("pickTitle").textContent = pickMulti ? "选择文件（可多选）" : (pickKind === "file" ? "选择文件" : "选择文件夹");
@@ -1037,7 +1100,7 @@ function openPick(id, kind, multi){
// 多行框（视频）取第一行当起点，整段拿去当路径会解析出一个乱七八糟的目录
var start = el ? el.value.split("\n")[0].trim() : "";
// 框里是文件名而不是路径时（弹幕名、视频名这种）不算路径：这两个框从录播目录开始，其它从程序所在目录开始
- if(start.indexOf("/") < 0 && start.indexOf("\\") < 0) start = (id === "mrgDanmu" || id === "mrgVideos") ? recDir : "";
+ if(start.indexOf("/") < 0 && start.indexOf("\\") < 0) start = (id === "mrgDanmu" || !id) ? recDir : "";
pickGo(start);
}
function closePick(){ document.getElementById("pick").classList.remove("on"); }
@@ -1122,22 +1185,6 @@ function paintPickSel(){
updatePickBar();
}
function pickClearSel(){ pickSel = []; paintPickSel(); }
-// 选好视频后自动找同目录同名的弹幕文件（.jsonl / .ass），找不到就让用户自己选。
-// 弹幕框里已经有内容时不动它，避免把用户填好的覆盖掉
-async function autoMatchDanmu(){
- var vEl = document.getElementById("mrgVideos"), dEl = document.getElementById("mrgDanmu");
- if(!vEl || !dEl || dEl.value.trim()) return;
- var lines = vEl.value.split("\n").map(function(s){ return s.trim(); }).filter(function(s){ return s; });
- if(!lines.length) return;
- var r = null;
- try{ r = await api("/api/merge/danmu?video=" + encodeURIComponent(lines[0])); }catch(e){}
- if(!r || !r.ok) return;
- var d = null;
- try{ d = await r.json(); }catch(e){ return; }
- if(!d || !d.danmu) return;
- dEl.value = d.danmu;
- showMsg(true, "已按视频文件名自动匹配弹幕：" + d.danmu);
-}
// 录播目录下的文件就只填文件名，框里清爽，保存目录以后改了也还认得；别处的填绝对路径
function pickFillValue(p){
if(!recDir) return p;
@@ -1148,9 +1195,16 @@ function pickFillValue(p){
return p;
}
function pickConfirm(){
- var el = document.getElementById(pickField);
+ var el = pickField ? document.getElementById(pickField) : null;
+ // 多选模式下要先把路径换成「录播目录里的只写文件名」，填框和走回调都一样
if(pickMulti){
if(!pickSel.length) return;
+ var picked = pickSel.map(function(p){ return pickFillValue(p); });
+ if(pickCb){
+ closePick();
+ pickCb(picked);
+ return;
+ }
if(el){
// 追加：已有行原样留着，只把这次勾的加进去（同名/同路径不重复）
var lines = el.value.split("\n").map(function(s){ return s.trim(); }).filter(function(s){ return s; });
@@ -1163,12 +1217,16 @@ function pickConfirm(){
if(settingFields.indexOf(pickField) >= 0) markDirty(pickField);
}
closePick();
- if(pickField === "mrgVideos") autoMatchDanmu();
return;
}
var v = pickKind === "file" ? pickFile : pickCur;
if(!v) return;
if(pickKind === "file") v = pickFillValue(v);
+ if(pickCb){
+ closePick();
+ pickCb([v]);
+ return;
+ }
if(el){
el.value = v;
if(settingFields.indexOf(pickField) >= 0) markDirty(pickField);
@@ -1212,20 +1270,168 @@ document.addEventListener("keydown", function(e){
});
// ========== 手动合并 ==========
var mrgBusy = false; // 是否正在合并，跟着 /api/status 一起刷新
-function mrgPayload(){
- var videos = document.getElementById("mrgVideos").value.split("\n").map(function(s){ return s.trim(); }).filter(function(s){ return s; });
- var off = document.getElementById("mrgOffset").value.trim();
- var body = {
- videos: videos,
- danmu: document.getElementById("mrgDanmu").value.trim(),
- outName: document.getElementById("mrgOut").value.trim()
- };
- if(off !== ""){
- var v = parseFloat(off);
- if(isNaN(v)){ showMsg(false, "偏移必须是数字"); return null; }
- body.offset = v;
+var mrgJobs = []; // 待合并的任务：每个任务一组视频 + 自己的弹幕和参数
+var mrgSeq = 0; // 任务编号，重画行时靠它认回原来的数据
+
+// 文件名是「2006-01-02 15-04-05 主播名 标题.ext」，开头的录制时刻就在这里
+function nameStartTime(name){
+ var base = name.replace(/\.[^.]+$/, "");
+ if(base.length < 19) return 0;
+ var ms = Date.parse(base.slice(0,10).replace(/-/g,"/") + " " + base.slice(11,19).replace(/-/g,":"));
+ return isNaN(ms) ? 0 : ms;
+}
+// 去掉开头的时间和扩展名，剩下的就是这场的主播名 + 标题
+function nameSubject(name){
+ var base = name.replace(/\.[^.]+$/, "");
+ return base.length > 19 ? base.slice(19) : base;
+}
+// 把选中的视频按场次归组：主题相同、且相邻两段录制时间差在 2 小时内的算同一场
+// （同一天连着开两场、标题又一样的时候靠时间差分开，不然两场会被拼成一个成片）
+function groupVideos(names){
+ var items = names.slice().sort();
+ var groups = [], prevKey = null, prevT = 0;
+ items.forEach(function(n){
+ var key = nameSubject(n), t = nameStartTime(n);
+ var gap = (t && prevT) ? Math.abs(t - prevT) : 0;
+ if(!groups.length || key !== prevKey || gap > 2*3600*1000) groups.push([]);
+ groups[groups.length-1].push(n);
+ prevKey = key; prevT = t;
+ });
+ return groups;
+}
+// 浏览弹窗选回来的文件：视频按场次归组，弹幕直接跳过（视频自己会找同名弹幕）
+function addMergeVideos(names){
+ if(!names || !names.length) return;
+ var vids = names.filter(function(n){ return /\.(mp4|m4v|flv|ts|mkv|mov|webm)$/i.test(n); });
+ if(!vids.length){ showMsg(false, "选的是弹幕文件，视频请另外选"); return; }
+ var added = 0;
+ groupVideos(vids).forEach(function(g){
+ if(mergeJobsHave(g[0])) return;
+ mrgJobs.push({id: ++mrgSeq, videos: g, danmu: "", out: "", offset: "", br: "", fps: "", fs: "", enc: ""});
+ added++;
+ });
+ renderMergeJobs();
+ if(added) autoMatchAllDanmu();
+}
+// 这个视频是不是已经在某个任务里了（重复点选不该加出第二个一样的任务）
+function mergeJobsHave(name){
+ for(var i = 0; i < mrgJobs.length; i++){
+ if(mrgJobs[i].videos.indexOf(name) >= 0) return true;
}
- return body;
+ return false;
+}
+// 从文件列表里勾选
+function pickVideos(){
+ var names = [];
+ Array.prototype.forEach.call(document.getElementById("mrgVideoPick").options, function(o){ if(o.selected) names.push(o.value); });
+ names.sort(); // 按文件名里的录制时间排，点选顺序无所谓
+ addMergeVideos(names);
+}
+function removeMergeJob(i){
+ if(mrgBusy) return;
+ mrgJobs.splice(i, 1);
+ renderMergeJobs();
+}
+// 一个任务里有好几段时拆成一人一个任务（本来就是分开的两场却归到一组时用）
+function splitMergeJob(i){
+ if(mrgBusy) return;
+ var job = mrgJobs[i];
+ if(!job || job.videos.length < 2) return;
+ var parts = job.videos.map(function(v){ return {id: ++mrgSeq, videos: [v], danmu: "", out: job.out,
+ offset: job.offset, br: job.br, fps: job.fps, fs: job.fs, enc: job.enc}; });
+ mrgJobs.splice.apply(mrgJobs, [i, 1].concat(parts));
+ renderMergeJobs();
+ autoMatchAllDanmu();
+}
+function pickDanmuFor(i){
+ openPick(null, "file", false, function(v){
+ if(mrgJobs[i]) mrgJobs[i].danmu = v[0] || "";
+ renderMergeJobs();
+ });
+}
+// 每个还没填弹幕的任务都按视频名找一次同名的弹幕文件
+async function autoMatchAllDanmu(){
+ for(var i = 0; i < mrgJobs.length; i++){
+ var job = mrgJobs[i];
+ if(job.danmu || !job.videos.length) continue;
+ var r = null, d = null;
+ try{ r = await api("/api/merge/danmu?video=" + encodeURIComponent(job.videos[0])); }catch(e){ continue; }
+ if(!r || !r.ok) continue;
+ try{ d = await r.json(); }catch(e){ continue; }
+ if(d && d.danmu) job.danmu = d.danmu;
+ }
+ renderMergeJobs();
+}
+function renderMergeJobs(){
+ var box = document.getElementById("mrgJobs");
+ document.getElementById("mrgEmpty").style.display = mrgJobs.length ? "none" : "";
+ box.innerHTML = mrgJobs.map(function(job, i){
+ return '
'
+ + '
第 ' + (i+1) + ' 个' + (job.videos.length > 1 ? '（' + job.videos.length + ' 段拼接）' : '') + ''
+ + (job.videos.length > 1 ? '' : '')
+ + '
'
+ + '
' + job.videos.map(function(v){ return esc(v); }).join("
") + '
'
+ + '
';
+ }).join("");
+ var rows = document.querySelectorAll("#mrgJobs .trow");
+ for(var k = 0; k < rows.length; k++) bindMergeRow(rows[k]);
+}
+// 行里的输入直接写回对应的任务对象，重画时不会丢
+function bindMergeRow(row){
+ var job = mrgJobs[parseInt(row.dataset.i, 10)];
+ if(!job) return;
+ bindRowInput(row, ".mj-danmu", function(v){ job.danmu = v; });
+ bindRowInput(row, ".mj-out", function(v){ job.out = v; });
+ bindRowInput(row, ".mj-offset", function(v){ job.offset = v; });
+ bindRowInput(row, ".mj-br", function(v){ job.br = v; });
+ bindRowInput(row, ".mj-fps", function(v){ job.fps = v; });
+ bindRowInput(row, ".mj-fs", function(v){ job.fs = v; });
+ var sel = row.querySelector(".mj-enc");
+ if(sel) sel.addEventListener("change", function(){ job.enc = sel.value; });
+}
+function bindRowInput(row, css, set){
+ var el = row.querySelector(css);
+ if(!el) return;
+ el.addEventListener("input", function(){ set(el.value); });
+ el.addEventListener("change", function(){ set(el.value); });
+}
+// 拼请求体。留空的项就不带，服务端按全局设置走
+function mrgPayload(){
+ var jobs = [];
+ for(var i = 0; i < mrgJobs.length; i++){
+ var job = mrgJobs[i];
+ if(!job.videos.length){ showMsg(false, "第 " + (i+1) + " 个任务没有视频"); return null; }
+ var one = {videos: job.videos, danmu: job.danmu.trim(), outName: job.out.trim()};
+ var off = job.offset.trim();
+ if(off !== ""){
+ var v = parseFloat(off);
+ if(isNaN(v)){ showMsg(false, "第 " + (i+1) + " 个任务的偏移必须是数字"); return null; }
+ one.offset = v;
+ }
+ var opts = {}, nums = {bitrate: job.br, fps: job.fps, fontSize: job.fs};
+ for(var key in nums){
+ var s = (nums[key] || "").trim();
+ if(s === "") continue;
+ var n = parseInt(s, 10);
+ if(isNaN(n) || n < 0){ showMsg(false, "第 " + (i+1) + " 个任务的参数必须是 0 或正整数"); return null; }
+ opts[key] = n;
+ }
+ if(job.enc) opts.encoder = job.enc;
+ one.options = opts;
+ jobs.push(one);
+ }
+ if(!jobs.length){ showMsg(false, "请先选择要合并的视频"); return null; }
+ return {jobs: jobs};
}
// 用文件列表里的文件填下拉框和输入建议
function fillMergePickers(){
@@ -1249,28 +1455,43 @@ function fillMergePickers(){
return '
';
}).join("");
}
-function pickVideos(){
- var names = [];
- Array.prototype.forEach.call(document.getElementById("mrgVideoPick").options, function(o){ if(o.selected) names.push(o.value); });
- names.sort(); // 按文件名里的录制时间排，点选顺序无所谓
- if(names.length){
- document.getElementById("mrgVideos").value = names.join("\n");
- autoMatchDanmu();
- }
-}
-function setMergeState(){
+function setMergeState(st){
+ st = st || {};
var go = document.getElementById("mrgGo");
go.disabled = mrgBusy;
go.textContent = mrgBusy ? "合并中…" : "开始合并";
document.getElementById("mrgCheck").disabled = mrgBusy;
- document.getElementById("mrgState").textContent = mrgBusy ? "正在合并，进度见「监控」页的运行日志" : "";
+ var txt = "";
+ if(mrgBusy){
+ if(st.mergeQueueTotal > 1){
+ var n = Math.min((st.mergeQueueDone || 0) + 1, st.mergeQueueTotal);
+ txt = "正在合并第 " + n + "/" + st.mergeQueueTotal + " 个：" + (st.mergeOutName || "");
+ }else{
+ txt = "正在合并，进度见「监控」页";
+ }
+ }
+ document.getElementById("mrgState").textContent = txt;
+}
+// 把检查结果按任务分段显示
+function mergeInfoText(infos){
+ var lines = [];
+ infos.forEach(function(d, i){
+ if(infos.length > 1) lines.push("── 第 " + (i+1) + " 个 ──");
+ (d.videos||[]).forEach(function(v){
+ lines.push("视频 " + v.name + " " + fmtSize(v.size) + " 时长 " + v.duration.toFixed(1) + " 秒" + (v.inUse ? "（正在写入）" : ""));
+ });
+ lines.push("视频总时长 " + d.duration.toFixed(1) + " 秒");
+ lines.push("弹幕 " + d.danmuName + " " + d.danmuCount + " 条 时间 " + d.danmuFirst.toFixed(1) + " ~ " + d.danmuLast.toFixed(1) + " 秒（" + d.source + "）");
+ lines.push("偏移 " + d.offset.toFixed(3) + " 秒（" + d.offsetNote + "）");
+ lines.push("输出 " + d.outName);
+ (d.warnings||[]).forEach(function(w){ lines.push("注意：" + w); });
+ });
+ return lines.join("\n");
}
async function checkMerge(){
- // 弹幕框还空着就先按视频文件名自动找一次（选了视频直接点检查也能用）
- if(!document.getElementById("mrgDanmu").value.trim()) await autoMatchDanmu();
+ await autoMatchAllDanmu();
var body = mrgPayload();
if(!body) return;
- if(!body.videos.length || !body.danmu){ showMsg(false, "请先填写视频和弹幕文件"); return; }
var b = document.getElementById("mrgCheck");
b.disabled = true;
var r = null;
@@ -1279,23 +1500,17 @@ async function checkMerge(){
if(r && r.status === 401){ showLogin("管理口令已失效，请重新输入"); return; }
if(!r || !r.ok){ showMsg(false, r ? await r.text() : "连接失败"); return; }
var d = await r.json();
- var lines = [];
- (d.videos||[]).forEach(function(v){
- lines.push("视频 " + v.name + " " + fmtSize(v.size) + " 时长 " + v.duration.toFixed(1) + " 秒" + (v.inUse ? "（正在写入）" : ""));
- });
- lines.push("视频总时长 " + d.duration.toFixed(1) + " 秒");
- lines.push("弹幕 " + d.danmuName + " " + d.danmuCount + " 条 时间 " + d.danmuFirst.toFixed(1) + " ~ " + d.danmuLast.toFixed(1) + " 秒（" + d.source + "）");
- lines.push("偏移 " + d.offset.toFixed(3) + " 秒（" + d.offsetNote + "）");
- lines.push("输出 " + d.outName);
- (d.warnings||[]).forEach(function(w){ lines.push("注意：" + w); });
- document.getElementById("mrgInfo").textContent = lines.join("\n");
+ var infos = d && d.jobs ? d.jobs : [d];
+ document.getElementById("mrgInfo").textContent = mergeInfoText(infos);
}
async function startMerge(){
- if(!document.getElementById("mrgDanmu").value.trim()) await autoMatchDanmu();
+ await autoMatchAllDanmu();
var body = mrgPayload();
if(!body) return;
- if(!body.videos.length || !body.danmu){ showMsg(false, "请先填写视频和弹幕文件"); return; }
- if(!confirm("开始合并？合成期间可以在「监控」页的运行日志里看进度。")) return;
+ var n = body.jobs.length;
+ if(!confirm(n > 1
+ ? ("开始合并这 " + n + " 个任务？会按列表顺序一个一个来，进度见「监控」页。")
+ : "开始合并？合成期间可以在「监控」页的运行日志里看进度。")) return;
var b = document.getElementById("mrgGo");
b.disabled = true;
var r = null;
@@ -1308,19 +1523,312 @@ async function startMerge(){
}
var d = await r.json();
mrgBusy = true;
- setMergeState();
- showMsg(true, "已开始合并：" + d.outName);
+ setMergeState(lastSt);
+ showMsg(true, n > 1 ? ("已开始合并 " + n + " 个任务") : ("已开始合并：" + (d.outName || "")));
}
// 合并状态跟着 /api/status 一起刷新，只在「进行中 → 结束」这一刻提示一次
function syncMergeState(st){
var busy = !!st.mergeBusy;
- if(busy === mrgBusy) return;
+ var was = mrgBusy;
mrgBusy = busy;
- setMergeState();
- if(busy) return;
+ setMergeState(st);
+ if(busy || !was) return;
loadFiles();
+ var rs = st.mergeResults || [];
+ if(rs.length > 1){
+ var ok = 0;
+ rs.forEach(function(r){ if(!r.err) ok++; });
+ document.getElementById("mrgInfo").textContent = "合并结束：共 " + rs.length + " 个，成功 " + ok + " 个\n"
+ + rs.map(function(r, i){ return "第 " + (i+1) + " 个 " + r.outName + (r.err ? " 失败：" + r.err : " 完成"); }).join("\n");
+ }
if(st.mergeErr) showMsg(false, "合并失败：" + st.mergeErr);
- else showMsg(true, "手动合并结束，结果见「监控」页的运行日志");
+ else showMsg(true, rs.length > 1 ? ("手动合并全部结束，成功 " + rs.length + " 个") : "手动合并结束，结果见「监控」页的运行日志");
+}
+
+// ========== 转码 ==========
+var tcJobs = []; // {dir,name,size,dur,w,h,fps,vkbps,akbps,audio,codec,out,opts,est}
+var tcVideos = []; // 文件列表里的视频，下拉框按它在数组里的下标选
+var tcEncoders = []; // 本机可用的编码器
+var tcBusy = false;
+var tcEstTimer = null;
+var tcEstSeq = 0; // 估算请求的序号，回包时对不上就说明有更新的一次在跑，这次作废
+
+function fillTranscodePick(){
+ tcVideos = fileList.filter(function(f){ return /\.(mp4|m4v|flv|ts|mkv|mov|webm)$/i.test(f.name); });
+ tcVideos.sort(function(a,b){ return a.name < b.name ? -1 : (a.name > b.name ? 1 : 0); });
+ var sel = document.getElementById("tcFilePick");
+ // 刷新列表时不要把已经勾好的弄丢（和合并页那个下拉一样）
+ var keep = {};
+ Array.prototype.forEach.call(sel.options, function(o){ if(o.selected) keep[o.value] = 1; });
+ sel.innerHTML = tcVideos.map(function(f, i){
+ return '
';
+ }).join("");
+ Array.prototype.forEach.call(sel.options, function(o){ if(keep[o.value]) o.selected = true; });
+}
+// 新加一个文件时给的默认参数：优先硬件 HEVC，码率按源片的六成，音轨直接拷
+function defaultTranscodeOpts(){
+ return {encoder: "", mode: "percent", bitrate: 0, quality: 23, percent: 60,
+ preset: "medium", fps: 0, scale: 0, audio: "copy"};
+}
+function defaultTranscodeOut(p){
+ return p.name.replace(/\.[^.]+$/, "") + "_转码.mp4";
+}
+async function addTranscodeFiles(){
+ var sel = document.getElementById("tcFilePick");
+ var picks = [];
+ Array.prototype.forEach.call(sel.options, function(o){
+ if(o.selected){
+ var f = tcVideos[parseInt(o.value, 10)];
+ if(f && !tcJobs.some(function(j){ return j.dir === f.dir && j.name === f.name; })) picks.push(f);
+ }
+ });
+ if(!picks.length){ showMsg(false, tcJobs.length ? "选中的文件已经在列表里了" : "请先选择要转码的文件"); return; }
+ var r = null;
+ try{
+ r = await api("/api/transcode/probe", {method:"POST", headers:{"Content-Type":"application/json"},
+ body: JSON.stringify({files: picks.map(function(f){ return {dir: f.dir, name: f.name}; })})});
+ }catch(e){}
+ if(r && r.status === 401){ showLogin("管理口令已失效，请重新输入"); return; }
+ if(!r || !r.ok){ showMsg(false, r ? await r.text() : "连接失败"); return; }
+ var d = null;
+ try{ d = await r.json(); }catch(e){ showMsg(false, "读文件信息失败"); return; }
+ if(d && d.encoders && d.encoders.length) tcEncoders = d.encoders;
+ var skipped = [];
+ (d.files || []).forEach(function(p){
+ // 只有音轨（或只有封面图）的文件排进去也是白排，ffmpeg 会直接报没视频流
+ if(!p.hasVideo){ skipped.push(p.name); return; }
+ tcJobs.push({dir: p.dir, name: p.name, size: p.size, dur: p.duration, w: p.width, h: p.height,
+ fps: p.fps, vkbps: p.videoKbps, akbps: p.audioKbps, audio: !!p.hasAudio, codec: p.videoCodec,
+ out: defaultTranscodeOut(p), opts: defaultTranscodeOpts(), est: null});
+ });
+ renderTranscodeRows();
+ estimateTranscode();
+ if(skipped.length) showMsg(false, "这些文件里没有视频轨，已跳过：" + skipped.join("、"));
+}
+function clearTranscodeFiles(){
+ if(tcBusy) return;
+ tcJobs = [];
+ renderTranscodeRows();
+ updateTranscodeTotal();
+}
+function removeTranscodeFile(i){
+ if(tcBusy) return;
+ tcJobs.splice(i, 1);
+ renderTranscodeRows();
+ updateTranscodeTotal();
+}
+// 第一个文件调好之后，其余的照抄一份（多数情况整批用同一套参数）
+function applyTranscodeToAll(){
+ if(!tcJobs.length) return;
+ var o = tcJobs[0].opts;
+ for(var i = 1; i < tcJobs.length; i++) tcJobs[i].opts = JSON.parse(JSON.stringify(o));
+ renderTranscodeRows();
+ estimateTranscode();
+}
+function encSelectHtml(cls, cur){
+ var list = tcEncoders.length ? tcEncoders : ["hevc_qsv", "h264_qsv", "libx264"];
+ return '
';
+}
+// 码率控制模式决定那个数值框填的是什么
+function tcNumField(o){
+ if(o.mode === "bitrate") return {label: "目标码率（Kbps）", val: o.bitrate || "", ph: "例如 2000"};
+ if(o.mode === "quality") return {label: "质量值（0-51）", val: o.quality || "", ph: "越小越清晰，默认 23"};
+ if(o.mode === "percent") return {label: "源片码率的比例（%）", val: o.percent || "", ph: "例如 60"};
+ return {label: "数值（当前模式用不到）", val: "", ph: "跟随源片"};
+}
+function renderTranscodeRows(){
+ document.getElementById("tcEmpty").style.display = tcJobs.length ? "none" : "";
+ document.getElementById("tcCount").textContent = tcJobs.length ? (tcJobs.length + " 个文件") : "";
+ document.getElementById("tcRows").innerHTML = tcJobs.map(function(job, i){
+ var o = job.opts;
+ var num = tcNumField(o);
+ var meta = [job.w && job.h ? (job.w + "x" + job.h) : "", job.fps ? (Math.round(job.fps*10)/10 + " fps") : "",
+ job.vkbps ? (job.vkbps + " kbps") : "", job.codec ? ("源 " + job.codec) : "",
+ job.dur ? fmtDur(job.dur) : "", fmtSize(job.size), job.audio ? "" : "无音轨"]
+ .filter(function(x){ return x; }).join(" ");
+ var scales = [0, 2160, 1440, 1080, 720, 480, 360].filter(function(h){
+ return h === 0 || !job.h || h < job.h;
+ });
+ return '
'
+ + '
' + esc(job.name) + ''
+ + '' + esc(meta) + ''
+ + '
'
+ + '
'
+ + '
'
+ + '
' + encSelectHtml("tc-enc", o.encoder) + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
预估产物 —'
+ + '
'
+ + '
';
+ }).join("");
+ var rows = document.querySelectorAll("#tcRows .trow");
+ for(var k = 0; k < rows.length; k++) bindTcRow(rows[k]);
+ paintTranscodeEst();
+}
+// 行里的改动写回任务对象；下拉框一改就要重画（数值框的含义会跟着模式变）
+function bindTcRow(row){
+ var job = tcJobs[parseInt(row.dataset.i, 10)];
+ if(!job) return;
+ bindRowInput(row, ".tc-out", function(v){ job.out = v; });
+ bindRowInput(row, ".tc-num", function(v){ readTcNum(job, v); });
+ bindRowInput(row, ".tc-fps", function(v){ var n = parseInt(v, 10); job.opts.fps = isNaN(n) || n < 0 ? 0 : n; });
+ var sel = row.querySelector(".tc-mode");
+ if(sel) sel.addEventListener("change", function(){ job.opts.mode = sel.value; renderTranscodeRows(); scheduleEstimate(); });
+ var enc = row.querySelector(".tc-enc");
+ if(enc) enc.addEventListener("change", function(){ job.opts.encoder = enc.value; scheduleEstimate(); });
+ var pre = row.querySelector(".tc-preset");
+ if(pre) pre.addEventListener("change", function(){ job.opts.preset = pre.value; scheduleEstimate(); });
+ var sc = row.querySelector(".tc-scale");
+ if(sc) sc.addEventListener("change", function(){ job.opts.scale = parseInt(sc.value, 10) || 0; scheduleEstimate(); });
+ var au = row.querySelector(".tc-audio");
+ if(au) au.addEventListener("change", function(){ job.opts.audio = au.value; scheduleEstimate(); });
+}
+function readTcNum(job, v){
+ var n = parseInt(v, 10);
+ if(isNaN(n) || n < 0) n = 0;
+ if(job.opts.mode === "bitrate") job.opts.bitrate = n;
+ else if(job.opts.mode === "quality") job.opts.quality = n;
+ else if(job.opts.mode === "percent") job.opts.percent = n;
+ scheduleEstimate();
+}
+function scheduleEstimate(){
+ if(tcEstTimer) clearTimeout(tcEstTimer);
+ tcEstTimer = setTimeout(estimateTranscode, 350);
+}
+// 体积估算是服务端算的（公式只有一份，界面和落地的预估不会打架），输入停一下才发
+async function estimateTranscode(){
+ if(!tcJobs.length){ updateTranscodeTotal(); return; }
+ var seq = ++tcEstSeq;
+ var body = {jobs: tcJobs.map(function(j){ return {dir: j.dir, name: j.name, options: j.opts}; })};
+ var r = null;
+ try{
+ r = await api("/api/transcode/estimate", {method:"POST", headers:{"Content-Type":"application/json"}, body: JSON.stringify(body)});
+ }catch(e){ return; }
+ if(seq !== tcEstSeq) return; // 已经有更新的一次在跑，这次的结果别覆盖它
+ // 参数不合法时服务端会 400。这里必须把原因说出来，否则填错了框只会看到
+ // 预估体积一动不动，还以为是自己没改成功
+ if(!r || !r.ok){
+ document.getElementById("tcTotal").textContent = "估算失败：" + (r ? await r.text() : "连接失败");
+ return;
+ }
+ var d = null;
+ try{ d = await r.json(); }catch(e){ return; }
+ if(seq !== tcEstSeq) return;
+ var ests = (d && d.jobs) || [];
+ for(var i = 0; i < tcJobs.length && i < ests.length; i++) tcJobs[i].est = ests[i];
+ paintTranscodeEst();
+ updateTranscodeTotal();
+}
+function paintTranscodeEst(){
+ var rows = document.querySelectorAll("#tcRows .trow");
+ for(var k = 0; k < rows.length; k++){
+ var job = tcJobs[parseInt(rows[k].dataset.i, 10)];
+ if(!job) continue;
+ var est = rows[k].querySelector(".tc-est"), rate = rows[k].querySelector(".tc-rate"), note = rows[k].querySelector(".tc-note");
+ if(!est) continue;
+ if(!job.est || !job.est.bytes){ est.textContent = "—"; continue; }
+ var pct = job.size > 0 ? Math.round(job.est.bytes / job.size * 100) : 0;
+ est.textContent = fmtSize(job.est.bytes) + "（源片的 " + pct + "%）";
+ rate.textContent = "视频 " + job.est.videoKbps + " kbps + 音频 " + job.est.audioKbps + " kbps";
+ note.textContent = job.est.exact ? "" : ("· " + (job.est.note || "粗估"));
+ }
+}
+function updateTranscodeTotal(){
+ var el = document.getElementById("tcTotal");
+ var src = 0, out = 0, got = 0;
+ tcJobs.forEach(function(j){ src += j.size; if(j.est && j.est.bytes){ out += j.est.bytes; got++; } });
+ if(!tcJobs.length){ el.textContent = ""; return; }
+ if(!got){ el.textContent = "共 " + fmtSize(src); return; }
+ var pct = src > 0 ? Math.round(out / src * 100) : 0;
+ el.textContent = "合计 " + fmtSize(src) + " → " + fmtSize(out) + "（" + pct + "%）";
+}
+function setTranscodeState(st){
+ st = st || {};
+ var go = document.getElementById("tcGo");
+ go.disabled = tcBusy;
+ go.textContent = tcBusy ? "转码中…" : "开始转码";
+ var txt = "";
+ if(tcBusy && st.transcodeTotal > 1){
+ txt = "正在转第 " + Math.min((st.transcodeDone || 0) + 1, st.transcodeTotal) + "/" + st.transcodeTotal + " 个：" + (st.transcodeCurrent || "");
+ }else if(tcBusy){
+ txt = "正在转码，进度见「监控」页";
+ }
+ document.getElementById("tcState").textContent = txt;
+}
+function syncTranscodeState(st){
+ var busy = !!st.transcodeBusy;
+ var was = tcBusy;
+ tcBusy = busy;
+ setTranscodeState(st);
+ // 跑完给每行标一下结果
+ var rs = st.transcodeResults || [];
+ var rows = document.querySelectorAll("#tcRows .trow");
+ for(var k = 0; k < rows.length; k++){
+ var badge = rows[k].querySelector(".tc-badge");
+ if(!badge) continue;
+ var res = rs[k];
+ if(!busy && res){
+ badge.innerHTML = res.err
+ ? '
失败 ' + esc(res.err)
+ : '
完成 ' + fmtSize(res.bytes || 0);
+ rows[k].classList.toggle("done", !res.err);
+ }else{
+ if(busy && k === (st.transcodeDone || 0)) badge.innerHTML = '
进行中';
+ else badge.innerHTML = "";
+ rows[k].classList.remove("done");
+ }
+ }
+ if(!busy && was && rs.length){
+ var ok = 0;
+ rs.forEach(function(r){ if(!r.err) ok++; });
+ showMsg(true, "转码结束：共 " + rs.length + " 个，成功 " + ok + " 个");
+ loadFiles();
+ }
+}
+async function startTranscode(){
+ if(!tcJobs.length){ showMsg(false, "请先选择要转码的文件"); return; }
+ var n = tcJobs.length;
+ if(!confirm(n > 1 ? ("开始转码这 " + n + " 个文件？会按列表顺序一个一个来。") : "开始转码？")) return;
+ var body = {outDir: document.getElementById("tcOutDir").value.trim(),
+ jobs: tcJobs.map(function(j){ return {dir: j.dir, name: j.name, outName: j.out, options: j.opts}; })};
+ var b = document.getElementById("tcGo");
+ b.disabled = true;
+ var r = null;
+ try{ r = await api("/api/transcode", {method:"POST", headers:{"Content-Type":"application/json"}, body: JSON.stringify(body)}); }catch(e){}
+ if(r && r.status === 401){ showLogin("管理口令已失效，请重新输入"); b.disabled = false; return; }
+ if(!r || !r.ok){ showMsg(false, r ? await r.text() : "连接失败"); b.disabled = false; return; }
+ tcBusy = true;
+ setTranscodeState(lastSt);
+ showMsg(true, n > 1 ? ("已开始转码 " + n + " 个文件") : "已开始转码");
}
async function testNotify(b, channel){
if(b) b.disabled = true;
@@ -1498,6 +2006,8 @@ setInterval(refresh, 3000);
var JOB_LINGER_MS = 20000;
// 自动任务结束后要播报一下，同一次任务只报一次
var jobAnnounced = "";
+// 最近一次的任务快照，窗口尺寸变化时用它重画折线
+var lastJob = null;
function fmtBytes(n){
if(!n || n <= 0) return "—";
@@ -1522,6 +2032,7 @@ function fmtEta(sec){
return "剩余约 " + h + " 小时 " + (m%60) + " 分";
}
function renderJob(j){
+ lastJob = j; // 窗口宽度变了要按新宽度重画折线，留一份最近的数据
var card = document.getElementById("jobCard");
var topEl = document.getElementById("jobTop");
var recent = j.doneAt > 0 && (Date.now() - j.doneAt*1000) < JOB_LINGER_MS;
@@ -1537,8 +2048,10 @@ function renderJob(j){
// 「被手动停止」不是失败，别当成错误报出来
var failed = !!j.err && j.err !== "任务已被手动停止";
+ // 批量任务（多个手动合并 / 多个转码）标出这是队列里的第几个
+ var q = (j.queueTotal > 1) ? "（第 " + Math.min((j.queueDone || 0) + 1, j.queueTotal) + "/" + j.queueTotal + " 个）" : "";
document.getElementById("jobOut").textContent =
- (j.kind || "") + (j.outName ? " · " + j.outName : "");
+ (j.kind || "") + q + (j.outName ? " · " + j.outName : "");
// 控制按钮只在跑的时候出现；暂停中也允许直接停止（后台杀挂起的进程没问题）
var pb = document.getElementById("jobPause"), sb = document.getElementById("jobStop");
@@ -1621,7 +2134,12 @@ function renderJob(j){
var wrap = document.getElementById("jobSparkWrap");
if(samples.length >= 2){
wrap.style.display = "";
- var W = 300, H = 48, PAD = 5, maxS = 0;
+ var svg = document.getElementById("jobSpark");
+ // viewBox 的宽度必须跟着元素的实际宽度走：写死一个值再靠 preserveAspectRatio="none"
+ // 铺满整行的话，宽屏上横轴被放大好几倍而纵轴不变，里面的文字会被拉扁
+ var W = Math.round(svg.getBoundingClientRect().width);
+ if(!W || W < 200) W = 300;
+ var H = 48, PAD = 5, maxS = 0;
samples.forEach(function(s){ if(s.speed > maxS) maxS = s.speed; });
if(maxS <= 0) maxS = 1;
var t0 = samples[0].t, span = Math.max(samples[samples.length-1].t - t0, 1);
@@ -1631,7 +2149,8 @@ function renderJob(j){
return x.toFixed(1) + "," + y.toFixed(1);
}).join(" ");
var last = samples[samples.length-1];
- document.getElementById("jobSpark").innerHTML =
+ svg.setAttribute("viewBox", "0 0 " + W + " " + H);
+ svg.innerHTML =
'
' +
'
峰值 ' + maxS.toFixed(2) + 'x' +
'
当前 ' + (last.speed || 0).toFixed(2) + 'x';
@@ -1677,6 +2196,8 @@ async function pollJob(){
setTimeout(pollJob, (j && j.active) ? 1000 : 4000);
}
pollJob();
+// 折线图的 viewBox 是按元素宽度算的，窗口尺寸一变就得重画，否则文字又被拉扁
+window.addEventListener("resize", function(){ if(lastJob) renderJob(lastJob); });
document.getElementById("tokenInput").addEventListener("keydown", function(e){ if(e.key === "Enter") login(); });