video2slides(ui): toolbar 加缩略图缩放 slider(CSS 变量控制列宽,记忆到 localStorage)
deploy video2slides / build-and-deploy (push) Successful in 2m11s
deploy video2slides / build-and-deploy (push) Successful in 2m11s
This commit is contained in:
@@ -51,7 +51,7 @@
|
|||||||
.content{flex:1;overflow:auto;padding:16px;min-height:0}
|
.content{flex:1;overflow:auto;padding:16px;min-height:0}
|
||||||
|
|
||||||
/* 网格 */
|
/* 网格 */
|
||||||
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
|
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--thumbw,180px),1fr));gap:12px}
|
||||||
.card{position:relative;background:var(--panel);border:2px solid transparent;border-radius:10px;overflow:hidden;transition:opacity .15s,border-color .15s;cursor:pointer}
|
.card{position:relative;background:var(--panel);border:2px solid transparent;border-radius:10px;overflow:hidden;transition:opacity .15s,border-color .15s;cursor:pointer}
|
||||||
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000;transition:filter .15s}
|
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000;transition:filter .15s}
|
||||||
.card .cap{display:flex;justify-content:space-between;padding:5px 8px;font-size:11px;color:var(--mut)}
|
.card .cap{display:flex;justify-content:space-between;padding:5px 8px;font-size:11px;color:var(--mut)}
|
||||||
@@ -156,7 +156,10 @@ let cur=null; // 当前打开的 video 对象 (来自 frames 接口)
|
|||||||
let curId=null;
|
let curId=null;
|
||||||
let threshold=10, page=0, pageSize=48, onlyKept=false;
|
let threshold=10, page=0, pageSize=48, onlyKept=false;
|
||||||
let overrides={}; // idx -> true(手动保留) / false(手动弃用),覆盖阈值判定
|
let overrides={}; // idx -> true(手动保留) / false(手动弃用),覆盖阈值判定
|
||||||
|
let thumbW=+(localStorage.getItem('v2s_thumbw')||180); // 缩略图列宽(px)
|
||||||
let pollTimer=null;
|
let pollTimer=null;
|
||||||
|
function applyThumbW(){document.documentElement.style.setProperty('--thumbw',thumbW+'px');}
|
||||||
|
applyThumbW();
|
||||||
|
|
||||||
// ====================== 侧栏 ======================
|
// ====================== 侧栏 ======================
|
||||||
async function loadVideos(){
|
async function loadVideos(){
|
||||||
@@ -279,6 +282,11 @@ function buildToolbar(){
|
|||||||
const cb=el('input');cb.type='checkbox';cb.checked=onlyKept;
|
const cb=el('input');cb.type='checkbox';cb.checked=onlyKept;
|
||||||
cb.onchange=()=>{onlyKept=cb.checked;page=0;renderGrid();};
|
cb.onchange=()=>{onlyKept=cb.checked;page=0;renderGrid();};
|
||||||
g2.append(cb,document.createTextNode('仅显示保留帧'));
|
g2.append(cb,document.createTextNode('仅显示保留帧'));
|
||||||
|
// 缩略图缩放
|
||||||
|
const gz=el('div','grp');gz.innerHTML=`<label>缩略图</label>`;
|
||||||
|
const zs=el('input');zs.type='range';zs.min='110';zs.max='420';zs.step='10';zs.value=thumbW;zs.style.width='120px';zs.title='缩放缩略图';
|
||||||
|
zs.oninput=()=>{thumbW=+zs.value;localStorage.setItem('v2s_thumbw',thumbW);applyThumbW();};
|
||||||
|
gz.append(zs);
|
||||||
// 统计
|
// 统计
|
||||||
const g3=el('div','grp');g3.innerHTML=`<span class="stat" id="stat"></span>`;
|
const g3=el('div','grp');g3.innerHTML=`<span class="stat" id="stat"></span>`;
|
||||||
// 导出 / 重置手动 / 间隔 / 重分析
|
// 导出 / 重置手动 / 间隔 / 重分析
|
||||||
@@ -291,7 +299,7 @@ function buildToolbar(){
|
|||||||
g4.appendChild(re);
|
g4.appendChild(re);
|
||||||
// 分页
|
// 分页
|
||||||
const g5=el('div','grp pager');g5.id='pager';
|
const g5=el('div','grp pager');g5.id='pager';
|
||||||
t.append(g1,g2,g3,g4,g5);
|
t.append(g1,g2,gz,g3,g4,g5);
|
||||||
setTimeout(()=>{updateStats();renderPager();},0);
|
setTimeout(()=>{updateStats();renderPager();},0);
|
||||||
return t;
|
return t;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user