{tab==='info' && (()=>{
const p = detailData.props || {};
const pieces = p.pieces_num ? `${p.pieces_have||0} / ${p.pieces_num} (${fmtB(p.piece_size||0)})` : null;
const sections = [
['Transfert', [
['Taille',fmtB(torrent.size)],
['Téléchargé',fmtB(p.total_downloaded!=null?p.total_downloaded:torrent.downloaded)],
['Uploadé',fmtB(p.total_uploaded!=null?p.total_uploaded:torrent.uploaded)],
['Ratio',fmtRatio(torrent.ratio)],
['Gaspillé',p.total_wasted!=null?fmtB(p.total_wasted):null],
['Disponibilité',torrent.availability!=null?`${torrent.availability.toFixed(2)}×`:null],
]],
['Vitesse', [
['Vitesse DL',fmtSp(torrent.dlspeed)],
['Vitesse UL',fmtSp(torrent.upspeed)],
['Moy. DL',p.dl_speed_avg!=null?fmtSp(p.dl_speed_avg):null],
['Moy. UL',p.up_speed_avg!=null?fmtSp(p.up_speed_avg):null],
['Limite DL',p.dl_limit!=null?(p.dl_limit<=0?'∞':fmtSp(p.dl_limit)):null],
['Limite UL',p.up_limit!=null?(p.up_limit<=0?'∞':fmtSp(p.up_limit)):null],
['ETA',fmtETA(torrent.eta)],
]],
['Connexions', [
['Seeds / Pairs',`${torrent.num_seeds} / ${torrent.num_leechs}`],
['Connexions',p.nb_connections!=null?`${p.nb_connections} / ${p.nb_connections_limit||'∞'}`:null],
['Vu pour la dernière fois',p.last_seen!=null&&p.last_seen>0?fmtDate(p.last_seen):null],
]],
['Temps', [
['Ajouté le',fmtDate(p.addition_date||torrent.added_on)],
['Terminé le',p.completion_date!=null?fmtDate(p.completion_date):null],
['Temps actif',p.time_elapsed!=null?fmtDur(p.time_elapsed):null],
['Temps de partage',p.seeding_time!=null?fmtDur(p.seeding_time):null],
]],
['Informations', [
['Catégorie',torrent.category||'Aucune'],
['Pièces',pieces],
['Chemin',p.save_path||torrent.save_path||'—'],
['Créé par',p.created_by||null],
['Créé le',p.creation_date!=null?fmtDate(p.creation_date):null],
['Commentaire',p.comment||null],
['Hash',torrent.hash],
]],
];
return sections.map(([title,rows])=>{
const visible = rows.filter(([,v])=>v!=null && v!=='');
if (!visible.length) return null;
return (
{title}
{visible.map(([k,v])=>(
{k} {v}
))}
);
});
})()}
{tab==='fichiers' && (!detailData.files
?
: detailData.files.map((f,i)=>(
{f.name.split('/').pop()}
{fmtB(f.size)}
)))}
{tab==='trackers' && (!detailData.trackers
?
: detailData.trackers.map((tk,i)=>(
{tk.url}
{tk.status===2?'✓ OK':'✗ KO'}
Pairs : {tk.num_peers||0}
{tk.msg && {tk.msg} }
)))}
{tab==='pairs' && (!detailData.peers
?
: detailData.peers.length===0
?
: detailData.peers.map((p,i)=>{
const cc = (p.country_code || '').toLowerCase();
const ccOk = /^[a-z]{2}$/.test(cc);
return (
{ccOk &&
{p.client}{p.country&&` · ${p.country}`}
↓ {fmtSp(p.dl_speed)}
↑ {fmtSp(p.up_speed)}
{(p.progress*100).toFixed(0)}%
);
}))}
)}
);
};
// ─── LOGS VIEW ───────────────────────────────────────────────────────────────
const LogsView = ({ logs }) => (
Journaux système
{logs.length===0
?
: logs.map(l=>(
{new Date(l.timestamp*1000).toLocaleTimeString()}
{l.message}
))}
);
// ─── DASHBOARD ───────────────────────────────────────────────────────────────
const Dashboard = ({ api, onLogout, host }) => {
const [torrents, setTorrents] = useState([]);
const [transferInfo, setTransferInfo] = useState(null);
const [serverState, setServerState] = useState(null);
const [trackerStats, setTrackerStats] = useState(null);
const [speedHist, setSpeedHist] = useState(() => loadHist());
const [chartRange, setChartRange] = useState('1h');
const transferInfoRef = useRef(null);
const [sort, setSort] = useState({ key:null, dir:1 });
const [selectedHash, setSelectedHash] = useState(null);
const [activeFilter, setActiveFilter] = useState('all');
const [searchQuery, setSearchQuery] = useState('');
const [activeView, setActiveView] = useState('dashboard');
const [detailTab, setDetailTab] = useState('info');
const [detailData, setDetailData] = useState({});
const [logs, setLogs] = useState([]);
const [toast, setToast] = useState(null);
const [showAdd, setShowAdd] = useState(false);
const [showSpeed, setShowSpeed] = useState(false);
const [delTarget, setDelTarget] = useState(null);
const [autoRefresh, setAutoRefresh] = useState(true);
const [lastReannounce, setLastReannounce] = useState(null);
const notify = useCallback((msg, type='o') => {
setToast({msg,type}); setTimeout(()=>setToast(null), 2800);
}, []);
// main poll
useEffect(() => {
if (!autoRefresh) return;
let alive=true, tid;
const poll = async () => {
try {
const [ts,ti] = await Promise.all([api.getTorrents(), api.getTransferInfo()]);
if (!alive) return;
setTorrents(ts); setTransferInfo(ti); transferInfoRef.current = ti;
} catch(e) { console.warn('poll:', e.message); }
if (alive) tid = setTimeout(poll, 2000);
};
poll();
return () => { alive=false; clearTimeout(tid); };
}, [api, autoRefresh]);
// persistent speed history — sample every 10s, kept across refreshes
useEffect(() => {
if (!autoRefresh) return;
const id = setInterval(() => {
const ti = transferInfoRef.current; if (!ti) return;
setSpeedHist(prev => {
const now = Math.floor(Date.now() / 1000);
const next = compactHist([...prev, { t: now, dl: ti.dl_info_speed || 0, ul: ti.up_info_speed || 0 }], now);
saveHist(next);
return next;
});
}, 10000);
return () => clearInterval(id);
}, [autoRefresh]);
// all-time stats poll (heavier payload → slower cadence)
useEffect(() => {
if (!autoRefresh) return;
let alive=true, tid;
const poll = async () => {
try { const d = await api.getMainData(0); if (alive && d?.server_state) setServerState(d.server_state); }
catch(e) {}
if (alive) tid = setTimeout(poll, 12000);
};
poll();
return () => { alive=false; clearTimeout(tid); };
}, [api, autoRefresh]);
// private-tracker ratio poll (external fetch → slow cadence)
useEffect(() => {
if (!autoRefresh) return;
let alive=true, tid;
const poll = async () => {
try { const d = await api.getTrackerRatio(); if (alive && d && d.ratio != null) setTrackerStats(d); }
catch(e) {}
if (alive) tid = setTimeout(poll, 60000);
};
poll();
return () => { alive=false; clearTimeout(tid); };
}, [api, autoRefresh]);
// logs poll
useEffect(() => {
if (activeView !== 'logs') return;
let alive=true, tid, lastId=-1;
const poll = async () => {
try {
const nl = await api.getLogs(lastId);
if (alive && nl?.length) { lastId = Math.max(...nl.map(l=>l.id)); setLogs(prev => [...nl.slice().reverse(), ...prev].slice(0,300)); }
} catch(e) {}
if (alive) tid = setTimeout(poll, 4000);
};
poll();
return () => { alive=false; clearTimeout(tid); };
}, [api, activeView]);
// detail poll
useEffect(() => {
if (!selectedHash) { setDetailData({}); return; }
let alive=true, tid;
const fetch = async () => {
try {
const [props,files,trackers,peers] = await Promise.all([
api.getProperties(selectedHash).catch(()=>null),
api.getFiles(selectedHash), api.getTrackers(selectedHash), api.getPeers(selectedHash)]);
if (alive) setDetailData({props,files,trackers,peers});
} catch(e) {}
if (alive) tid = setTimeout(fetch, 5000);
};
fetch();
return () => { alive=false; clearTimeout(tid); };
}, [api, selectedHash]);
const handleSelect = hash => { setSelectedHash(prev => prev===hash ? null : hash); setDetailTab('info'); };
const handlePause = useCallback(async h => { try{await api.pauseTorrents(h);notify('Torrent mis en pause');}catch{notify('Erreur','e');} }, [api]);
const handleResume = useCallback(async h => { try{await api.resumeTorrents(h);notify('Torrent repris');}catch{notify('Erreur','e');} }, [api]);
const handleDelete = useCallback(async (h,wf) => { try{await api.deleteTorrents(h,wf);if(selectedHash===h)setSelectedHash(null);notify('Torrent supprimé');}catch{notify('Erreur','e');} }, [api, selectedHash]);
const handleAdd = useCallback(async (type,data,opts) => { try{ type==='url'?await api.addUrls(data,opts):await api.addFile(data,opts); notify('Torrent ajouté !'); }catch{notify("Erreur lors de l'ajout",'e');} }, [api]);
const handleReannounce = useCallback(async (auto=false) => {
const hashes = torrents.filter(t => { const s=(t.state||'').toLowerCase(); return t.progress>=1 && !s.includes('paused') && !s.includes('error') && !s.includes('checking') && !s.includes('missing'); }).map(t=>t.hash);
if (!hashes.length) { if (!auto) notify('Aucun torrent en partage', 'e'); return; }
try { await api.reannounceTorrents(hashes); setLastReannounce(Date.now()); notify(`Réannonce ${auto?'auto ':''}· ${hashes.length} torrents`); }
catch { if (!auto) notify('Erreur lors de la réannonce', 'e'); }
}, [api, torrents]);
// auto-reannounce every 30 min — stable interval that calls the latest closure
const reannounceRef = useRef(handleReannounce);
reannounceRef.current = handleReannounce;
useEffect(() => {
const id = setInterval(() => reannounceRef.current(true), 30 * 60 * 1000);
return () => clearInterval(id);
}, []);
const switchView = v => { setActiveView(v); if (v==='logs') setSelectedHash(null); };
const toggleSort = key => setSort(s => s.key===key ? { key, dir:-s.dir } : { key, dir:1 });
const filtered = useMemo(() => {
let r = torrents;
if (activeFilter !== 'all') r = r.filter(t => normState(t.state) === activeFilter);
if (searchQuery) { const q = searchQuery.toLowerCase(); r = r.filter(t => t.name.toLowerCase().includes(q) || (t.category||'').toLowerCase().includes(q)); }
if (sort.key) {
const col = LIST_COLS.find(c => c.key === sort.key);
r = [...r].sort((a,b) => {
const va = col.get(a), vb = col.get(b);
const c = typeof va === 'string' ? va.localeCompare(vb) : (va - vb);
return c * sort.dir;
});
}
return r;
}, [torrents, activeFilter, searchQuery, sort]);
const activeCount = torrents.filter(t => ['downloading','seeding'].includes(normState(t.state))).length;
const selectedTorrent = torrents.find(t=>t.hash===selectedHash) || null;
const today = new Date().toLocaleDateString('fr-FR', {weekday:'long', day:'numeric', month:'long', year:'numeric'});
const chartData = useMemo(() => {
const now = Math.floor(Date.now() / 1000);
const sec = RANGE_SEC[chartRange];
const win = sec === Infinity ? speedHist : speedHist.filter(p => now - p.t <= sec);
return downsample(win, 360);
}, [speedHist, chartRange]);
const topDl = useMemo(()=>[...torrents].filter(t=>t.dlspeed>0).sort((a,b)=>b.dlspeed-a.dlspeed).slice(0,60), [torrents]);
const topUl = useMemo(()=>[...torrents].filter(t=>t.upspeed>0).sort((a,b)=>b.upspeed-a.upspeed).slice(0,60), [torrents]);
const titles = { dashboard:'Tableau de bord', torrents:'Torrents', logs:'Journaux' };
return (
setShowSpeed(true)}/>
{/* top utility bar */}
{activeView!=='dashboard' && }
Réannonce {fmtAgo(lastReannounce)}
handleReannounce(false)} title="Forcer le réannonce de tous les torrents en partage · auto toutes les 30 min">
setShowAdd(true)}>
{/* title bar */}
{titles[activeView]}
{today} · {torrents.length} torrents · {activeCount} actifs
Actualisation
setAutoRefresh(v=>!v)}/>
{activeView==='dashboard' && (
)}
{activeView==='torrents' && (
<>
{LIST_COLS.map(c=>(
toggleSort(c.key)}>
{c.label}{sort.key===c.key ? (sort.dir>0?'▲':'▼') : ''}
))}
Actions
{filtered.length===0
?
{searchQuery?'Aucun résultat':'Aucun torrent'}
: filtered.map(t=>(
setDelTarget(t)}/>
))}
)}
{activeView==='logs' &&
}
setSelectedHash(null)}/>
{showAdd && setShowAdd(false)} onAdd={handleAdd}/>}
{showSpeed && setShowSpeed(false)} api={api}/>}
{delTarget && setDelTarget(null)} torrent={delTarget} onConfirm={handleDelete}/>}
{toast && {toast.msg}
}
: ;
};
ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));