-
📊 Library statistics ✕
-
Computing…
+ bg.innerHTML=`
+
Library statistics ✕
+
Computing…
`;
document.body.appendChild(bg);
try{
@@ -2347,75 +2420,164 @@ function fmtHours(secs){
return h>0?`${h}h ${m}m`:`${m}m`;
}
+// Stash the last stats payload so the leaderboard's Size/Count toggle can
+// re-render without another round-trip.
+let _statsR=null;
+
function renderStats(r){
const body=document.getElementById('stats-body');if(!body)return;
- const tot=fmtHours(r.total_duration_secs);
+ _statsR=r;
+ const reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
const wat=fmtHours(r.watched_duration_secs);
- const tile=(label,value)=>`
${esc(label)}
${esc(value)}
`;
- let h=`
- ${tile('Channels',r.total_channels.toLocaleString())}
- ${tile('Videos',r.total_videos.toLocaleString())}
- ${tile('Playlists',r.total_playlists.toLocaleString())}
- ${tile('Disk used',fmtSize(r.total_size_bytes))}
- ${tile('Total runtime',tot)}
- ${tile('Watched',`${r.watched_count.toLocaleString()} · ${wat}`)}
- ${tile('Continue watching',r.continue_watching_count.toLocaleString())}
-
`;
+ const pct=r.total_videos?Math.round(r.watched_count/r.total_videos*100):0;
+ const weeks=r.downloads_per_week||[], years=r.videos_per_year||[];
+ const wkTotal=weeks.reduce((a,w)=>a+w.count,0), wkPeak=Math.max(0,...weeks.map(w=>w.count));
- // Downloads per week — horizontal bar chart.
- const weeks=r.downloads_per_week||[];
- const maxWeek=Math.max(1,...weeks.map(w=>w.count));
- h+=`
Downloads — last ${weeks.length} weeks `;
- h+=`
`;
- for(const w of weeks){
- const pct=(w.count/maxWeek)*100;
- const d=new Date(w.week_start_unix*1000);
- const lbl=`${d.getMonth()+1}/${d.getDate()}`;
- const tip=`${lbl}: ${w.count} videos, ${fmtSize(w.size_bytes)}`;
- h+=`
-
-
${esc(lbl)}
+ // A metric card; the number counts up from 0 on reveal (data-target/kind
+ // are read by the post-render pass).
+ const card=(k,target,kind,sub,hero)=>`
+
${esc(k)}
+
0
+ ${sub?`
${esc(sub)}
`:''}
`;
+
+ let h=`
Library observatory
+
+ ${card('Videos archived',r.total_videos,'int','across '+r.total_channels.toLocaleString()+' channels',true)}
+ ${card('Disk used',r.total_size_bytes,'size','')}
+ ${card('Total runtime',r.total_duration_secs,'secs','')}
+ ${card('Watched',r.watched_count,'int',pct+'% · '+wat)}
+ ${card('Playlists',r.total_playlists,'int','')}
+ ${card('Continue watching',r.continue_watching_count,'int','in progress')}
+
+
+
Download activity
+ ${weeks.length} weeks · ${wkTotal.toLocaleString()} videos · peak ${wkPeak}/wk
+ ${sxArea(weeks)}
+
+
+
+
By upload year
+ ${sxCols(years)}
+
+
+
Top channels
+
+ Size
+ Count
+
+
${sxBoard(r.top_channels_by_size,'size')}
+
`;
- }
- h+=`
`;
-
- // Uploads per year.
- const years=r.videos_per_year||[];
- if(years.length){
- const maxYear=Math.max(1,...years.map(y=>y.count));
- h+=`
Videos by upload year `;
- h+=`
`;
- for(const y of years){
- const pct=(y.count/maxYear)*100;
- h+=`
`;
- }
- h+=`
`;
- }
-
- // Two side-by-side top-N tables.
- const topTable=(title,rows)=>{
- if(!rows||!rows.length)return'';
- let t=`
${esc(title)}
-
`;
- for(const row of rows){
- t+=`
- ${esc(row.name)}
- ${row.count} videos
- ${fmtSize(row.size_bytes)}
- ${fmtHours(row.duration_secs)}
- `;
- }
- t+=`
`;
- return t;
- };
- h+=`
-
${topTable('Top channels by size',r.top_channels_by_size)}
-
${topTable('Top channels by count',r.top_channels_by_count)}
-
`;
body.innerHTML=h;
+
+ // Trigger the reveal once the DOM is laid out: flip .sx-go (drives the CSS
+ // transitions for the area line, columns and meters) and run the count-ups.
+ requestAnimationFrame(()=>{
+ body.classList.add('sx-go');
+ body.querySelectorAll('.sx-v').forEach(el=>{
+ const tgt=+el.dataset.target, kind=el.dataset.kind;
+ const fmt=v=> kind==='size'?fmtSize(v):kind==='secs'?fmtHours(v):Math.round(v).toLocaleString();
+ if(reduce) el.textContent=fmt(tgt); else sxCount(el,tgt,fmt);
+ });
+ body.querySelectorAll('.sx-bar').forEach(el=>el.style.height=el.dataset.h+'%');
+ body.querySelectorAll('.sx-meter').forEach(el=>el.style.width=el.dataset.w+'%');
+ });
+}
+
+// Ease-out count-up for the headline numbers.
+function sxCount(el,target,fmt,dur=1100){
+ const t0=performance.now();
+ (function tick(now){
+ const p=Math.min(1,(now-t0)/dur), e=1-Math.pow(1-p,3);
+ el.textContent=fmt(target*e);
+ if(p<1) requestAnimationFrame(tick); else el.textContent=fmt(target);
+ })(performance.now());
+}
+
+// Catmull-Rom → cubic-bezier smoothing for the area line.
+function sxSmooth(pts){
+ if(pts.length<2) return pts.length?`M${pts[0][0]},${pts[0][1]}`:'';
+ let d=`M${pts[0][0]},${pts[0][1]}`;
+ for(let i=0;i
No download history yet. ';
+ const W=1000,H=220,padL=4,padR=4,padT=16,padB=24;
+ const max=Math.max(1,...weeks.map(w=>w.count)), n=weeks.length;
+ const x=i=> padL + (n===1?(W-padL-padR)/2:i*(W-padL-padR)/(n-1));
+ const y=c=> padT + (1-c/max)*(H-padT-padB);
+ const pts=weeks.map((w,i)=>[x(i),y(w.count)]);
+ const line=sxSmooth(pts);
+ const area=`${line} L${x(n-1).toFixed(1)},${H-padB} L${x(0).toFixed(1)},${H-padB} Z`;
+ let grid='',ax='';
+ for(let g=0;g<=3;g++){
+ const val=Math.round(max*(3-g)/3), yy=padT+(g/3)*(H-padT-padB);
+ grid+=`
`;
+ ax+=`
${val} `;
+ }
+ let xlab=''; const step=Math.max(1,Math.round(n/6));
+ for(let i=0;i
${d.getMonth()+1}/${String(d.getDate()).padStart(2,'0')}`;
+ }
+ let dots=''; weeks.forEach((w,i)=>{
+ const d=new Date(w.week_start_unix*1000);
+ dots+=`${esc((d.getMonth()+1)+'/'+d.getDate()+': '+w.count+' videos · '+fmtSize(w.size_bytes))}
+
+ `;
+}
+
+// Growing-column histogram for videos-by-year.
+function sxCols(years){
+ if(!years.length) return 'No upload-year data.
';
+ const max=Math.max(1,...years.map(y=>y.count));
+ let h='';
+ for(const y of years){
+ const ph=(y.count/max)*100;
+ h+=`
`;
+ }
+ return h+'
No channels.
';
+ const val=row=> metric==='size'?row.size_bytes:row.count;
+ const lbl=row=> metric==='size'?fmtSize(row.size_bytes):row.count.toLocaleString()+' videos';
+ const max=Math.max(1,...rows.map(val));
+ let h='';
+ rows.forEach((row,i)=>{
+ const w=(val(row)/max)*100;
+ h+=`
${i+1}
+
+
${esc(lbl(row))}
`;
+ });
+ return h+'