fix render
This commit is contained in:
Mateusz Gruszczyński
@@ -24,6 +24,9 @@
|
||||
let trackerSummaryStatus = 'idle';
|
||||
let trackerSummarySignature = "";
|
||||
let trackerSummaryTimer = null;
|
||||
let lastLabelFiltersSignature = "";
|
||||
let lastTrackerFiltersSignature = "";
|
||||
let lastMobileFiltersSignature = "";
|
||||
const BASE_TITLE = document.title || "pyTorrent";
|
||||
const lastBrowserSpeed = {down: "0 B/s", up: "0 B/s"};
|
||||
const FOOTER_ITEM_DEFS = [
|
||||
@@ -226,21 +229,24 @@
|
||||
scheduleRender(true);
|
||||
}));
|
||||
}
|
||||
function renderLabelFilters(){
|
||||
function renderLabelFilters(force=false){
|
||||
const box=$('labelFilters');
|
||||
if(!box) return;
|
||||
const counts=new Map();
|
||||
[...torrents.values()].forEach(t=>labelNames(t.label).forEach(l=>counts.set(l,(counts.get(l)||0)+1)));
|
||||
const labels=[...counts.keys()].filter(l=>counts.get(l)>0).sort((a,b)=>a.localeCompare(b));
|
||||
if(activeFilter.startsWith('label:') && !counts.has(activeFilter.slice(6))) activeFilter='all';
|
||||
const sig=labels.map(l=>`${l}:${counts.get(l)}`).join('|');
|
||||
if(!force && sig===lastLabelFiltersSignature){ syncFilterButtons(); return; }
|
||||
lastLabelFiltersSignature=sig;
|
||||
box.innerHTML=labels.length?`<div class="small text-muted px-2 mb-1">Labels</div>${labels.map(l=>`<button class="filter label-filter ${activeFilter==='label:'+l?'active':''}" data-filter="label:${esc(l)}"><span><i class="fa-solid fa-tag"></i> ${esc(l)}</span><span>${counts.get(l)}</span></button>`).join('')}`:'';
|
||||
bindSidebarFilterClicks(box);
|
||||
}
|
||||
function trackerFavicon(tracker){
|
||||
const domain=typeof tracker==='string'?tracker:(tracker?.domain||'');
|
||||
if(!trackerFaviconsEnabled || !domain) return '<i class="fa-solid fa-bullseye"></i>';
|
||||
// Note: Cached favicons are served from the static/tracker_favicons symlink; the API path is only a one-time cache warmer fallback.
|
||||
const fallback=`/api/trackers/favicon/${encodeURIComponent(domain)}?refresh=1`;
|
||||
// Note: Normal rendering must use cached/static URLs only. Avoid refresh=1 here, otherwise scroll-triggered paints can re-warm icons repeatedly.
|
||||
const fallback=`/api/trackers/favicon/${encodeURIComponent(domain)}`;
|
||||
const src=(typeof tracker==='object' && tracker?.favicon_url) ? tracker.favicon_url : fallback;
|
||||
return `<img class="tracker-favicon" src="${esc(src)}" alt="" loading="lazy" data-fallback-src="${esc(fallback)}" onerror="if(this.dataset.retry!=='1'){this.dataset.retry='1';this.src=this.dataset.fallbackSrc;}else{this.classList.add('d-none')}"><i class="fa-solid fa-bullseye tracker-fallback-icon"></i>`;
|
||||
}
|
||||
@@ -251,11 +257,21 @@
|
||||
if(hasTorrentSnapshot && torrents.size) return '<div class="tracker-filter-empty">No trackers found</div>';
|
||||
return '<div class="tracker-filter-empty">Waiting for torrents...</div>';
|
||||
}
|
||||
function renderTrackerFilters(){
|
||||
function renderTrackerFilters(force=false){
|
||||
const box=$('trackerFilters');
|
||||
if(!box) return;
|
||||
const trackers=trackerSummary.trackers || [];
|
||||
if(activeFilter.startsWith('tracker:') && !trackers.some(t=>t.domain===activeFilter.slice(8))) activeFilter='all';
|
||||
const sig=[
|
||||
trackerSummaryStatus,
|
||||
trackerFaviconsEnabled ? 1 : 0,
|
||||
trackerSummary.pending || 0,
|
||||
trackerSummary.cached || 0,
|
||||
trackerSummary.scanned || 0,
|
||||
trackers.map(t=>`${t.domain}:${t.count||0}:${t.favicon_url||''}`).join('|')
|
||||
].join('::');
|
||||
if(!force && sig===lastTrackerFiltersSignature){ syncFilterButtons(); return; }
|
||||
lastTrackerFiltersSignature=sig;
|
||||
// Note: Tracker filter section is always visible, so an empty or failed tracker scan does not look like a missing feature.
|
||||
const rows=trackers.length
|
||||
? trackers.map(t=>`<button class="filter tracker-filter ${activeFilter==='tracker:'+t.domain?'active':''}" data-filter="tracker:${esc(t.domain)}"><span>${trackerFavicon(t)} ${esc(t.domain)}</span><span>${esc(t.count||0)}</span></button>`).join('')
|
||||
@@ -336,13 +352,17 @@
|
||||
if(!bar) return;
|
||||
const allVisible=visibleRows.length>0 && visibleRows.every(t=>selected.has(t.hash));
|
||||
const someVisible=visibleRows.some(t=>selected.has(t.hash));
|
||||
const opts=mobileFilterDefs().map(([key,label,count,type])=>`<option value="${esc(key)}" ${activeFilter===key?'selected':''}>${type==='label'?'Label: ':type==='tracker'?'Tracker: ':''}${esc(label)} (${count})</option>`).join('');
|
||||
const defs=mobileFilterDefs();
|
||||
const sig=[activeFilter, selected.size, allVisible ? 1 : 0, someVisible ? 1 : 0, defs.map(d=>`${d[0]}:${d[2]}`).join('|')].join('::');
|
||||
if(sig===lastMobileFiltersSignature) return;
|
||||
lastMobileFiltersSignature=sig;
|
||||
const opts=defs.map(([key,label,count,type])=>`<option value="${esc(key)}" ${activeFilter===key?'selected':''}>${type==='label'?'Label: ':type==='tracker'?'Tracker: ':''}${esc(label)} (${count})</option>`).join('');
|
||||
const bulk=selected.size?`<button id="mobileBulkLabel" class="btn btn-xs btn-outline-primary" type="button" data-bs-toggle="modal" data-bs-target="#labelModal"><i class="fa-solid fa-tag"></i> Label</button><button id="mobileBulkMove" class="btn btn-xs btn-outline-primary" type="button" data-action="move"><i class="fa-solid fa-folder-open"></i> Move</button>`:'';
|
||||
// Note: Mobile bulk actions reuse the existing label modal and move picker, so desktop behavior stays unchanged.
|
||||
bar.innerHTML=`<div class="mobile-filter-actions"><button id="mobileSelectAll" class="btn btn-xs ${allVisible?'btn-primary':'btn-outline-primary'}" type="button"><i class="fa-solid fa-check-double"></i> ${allVisible?'Unselect all':'Select all'}</button><button id="mobileClearSelection" class="btn btn-xs btn-outline-secondary" type="button" ${someVisible?'':'disabled'}><i class="fa-solid fa-xmark"></i> Clear</button>${bulk}<span>${selected.size} selected</span></div><div class="mobile-filter-select-row"><label for="mobileFilterSelect"><i class="fa-solid fa-filter"></i> Filter</label><select id="mobileFilterSelect" class="form-select form-select-sm">${opts}</select></div>`;
|
||||
}
|
||||
function renderMobile(){ const list=$('mobileList'); if(!list) return; const src=visibleRows.length?visibleRows:[...torrents.values()].filter(rowVisible).sort(compareRows); const rows=src.slice(0,250); renderMobileFilters(); list.innerHTML=rows.map(t=>{ const warn=torrentWarning(t); const op=activeOperationFor(t); const classes=[selected.has(t.hash)?'selected':'', op?'torrent-operating':'', warn?'torrent-warning':''].filter(Boolean).join(' '); return `<div class="mobile-card ${classes}" data-hash="${esc(t.hash)}" title="${esc(warn||op?.label||'')}"><div class="name">${warn?'<i class="fa-solid fa-triangle-exclamation torrent-warning-icon"></i> ':''}${torrentNameIcon(t)} ${esc(t.name)}</div><div class="small text-muted">${statusBadge(t)} · ${esc(t.progress)}% · Ratio ${esc(t.ratio)}</div><div class="small">DL ${esc(t.down_rate_h)} / UL ${esc(t.up_rate_h)}</div><div class="small text-truncate">${esc(t.path)}</div><div class="mobile-actions"><button class="btn btn-xs btn-outline-success" data-action="start" title="Start"><i class="fa-solid fa-play"></i></button><button class="btn btn-xs btn-outline-warning" data-action="pause" title="Pause"><i class="fa-solid fa-pause"></i></button><button class="btn btn-xs btn-outline-secondary" data-action="stop" title="Stop"><i class="fa-solid fa-stop"></i></button><button class="btn btn-xs btn-outline-primary" data-action="move" title="Move"><i class="fa-solid fa-folder-open"></i></button><button class="btn btn-xs btn-outline-primary" data-mobile-modal="label" title="Set label"><i class="fa-solid fa-tag"></i></button><button class="btn btn-xs btn-outline-info" data-action="recheck" title="Force recheck"><i class="fa-solid fa-rotate"></i></button><button class="btn btn-xs btn-outline-primary" data-action="reannounce" title="Reannounce"><i class="fa-solid fa-bullhorn"></i></button></div><div class="mobile-progress">${progress(t)}</div></div>`; }).join('') || (hasTorrentSnapshot ? `<div class="empty">No torrents.</div>` : loadingMarkup('Loading torrents...')); }
|
||||
function renderTable(){ updateBulkBar(); renderCounts(); renderLabelFilters(); renderTrackerFilters(); updateSortHeaders(); buildVisibleRows(); renderMobile(); const body=$('torrentBody'); if(!visibleRows.length){ body.innerHTML=hasTorrentSnapshot?'<tr><td colspan="13" class="empty">No torrents for this filter.</td></tr>':loadingTableRow('Loading torrents...'); return; } const wrap=$('tableWrap'); const start=Math.max(0,Math.floor((wrap?.scrollTop||0)/ROW_HEIGHT)-OVERSCAN); const count=Math.ceil((wrap?.clientHeight||500)/ROW_HEIGHT)+OVERSCAN*2; const end=Math.min(visibleRows.length,start+count); const sig=`${renderVersion}:${start}:${end}:${visibleRows.length}:${sortState.key}:${sortState.dir}:${selected.size}:${activeFilter}:${$('searchBox')?.value||''}:${[...selected].slice(0,30).join(',')}`; if(sig===lastRenderSignature) return; lastRenderSignature=sig; const top=start*ROW_HEIGHT,bottom=Math.max(0,(visibleRows.length-end)*ROW_HEIGHT); body.innerHTML=(top?`<tr class="virtual-spacer"><td colspan="13" style="height:${top}px"></td></tr>`:'')+visibleRows.slice(start,end).map(renderRow).join('')+(bottom?`<tr class="virtual-spacer"><td colspan="13" style="height:${bottom}px"></td></tr>`:''); applyColumnVisibility(); }
|
||||
function renderTable(){ updateBulkBar(); renderCounts(); renderLabelFilters(); updateSortHeaders(); buildVisibleRows(); renderMobile(); const body=$('torrentBody'); if(!visibleRows.length){ body.innerHTML=hasTorrentSnapshot?'<tr><td colspan="13" class="empty">No torrents for this filter.</td></tr>':loadingTableRow('Loading torrents...'); return; } const wrap=$('tableWrap'); const start=Math.max(0,Math.floor((wrap?.scrollTop||0)/ROW_HEIGHT)-OVERSCAN); const count=Math.ceil((wrap?.clientHeight||500)/ROW_HEIGHT)+OVERSCAN*2; const end=Math.min(visibleRows.length,start+count); const sig=`${renderVersion}:${start}:${end}:${visibleRows.length}:${sortState.key}:${sortState.dir}:${selected.size}:${activeFilter}:${$('searchBox')?.value||''}:${[...selected].slice(0,30).join(',')}`; if(sig===lastRenderSignature) return; lastRenderSignature=sig; const top=start*ROW_HEIGHT,bottom=Math.max(0,(visibleRows.length-end)*ROW_HEIGHT); body.innerHTML=(top?`<tr class="virtual-spacer"><td colspan="13" style="height:${top}px"></td></tr>`:'')+visibleRows.slice(start,end).map(renderRow).join('')+(bottom?`<tr class="virtual-spacer"><td colspan="13" style="height:${bottom}px"></td></tr>`:''); applyColumnVisibility(); }
|
||||
function scheduleRender(force=false){ if(force){lastRenderSignature='';renderVersion++;} if(renderPending)return; renderPending=true; requestAnimationFrame(()=>{renderPending=false;renderTable();}); }
|
||||
function patchRows(msg){ if(msg.summary) torrentSummary=msg.summary; (msg.removed||[]).forEach(h=>{torrents.delete(h);selected.delete(h);activeOperations.delete(h);if(selectedHash===h)selectedHash=null;}); (msg.added||[]).forEach(t=>torrents.set(t.hash,t)); (msg.updated||[]).forEach(p=>torrents.set(p.hash,{...(torrents.get(p.hash)||{}),...p})); scheduleRender(true); if(selectedHash&&torrents.has(selectedHash)&&activeTab()==='general') renderGeneral(); }
|
||||
function selectedHashes(){ return [...selected]; }
|
||||
|
||||
Reference in New Issue
Block a user