joshpatra/allstarr
1
0
Fork 0
mirror of https://github.com/SoPat712/allstarr.git synced 2026-02-09 23:55:10 -05:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Update playlist progress bar to show stacked blue/yellow segments

Browse Source 
- Blue segment shows local tracks percentage
- Yellow segment shows external matched tracks percentage
- Bar fills to 100% when all tracks are matched
- Added tooltips showing track counts on hover
This commit is contained in:
Josh Patra
2026-02-04 15:37:07 -05:00
parent 6ab5e44112
commit 7a7b884af2
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
allstarr/wwwroot/index.html
View File

@@ -1164,6 +1164,8 @@
// Calculate completion percentage
const completionPct = spotifyTotal > 0 ? Math.round((totalInJellyfin / spotifyTotal) * 100) : 0;
const localPct = spotifyTotal > 0 ? Math.round((localCount / spotifyTotal) * 100) : 0;
const externalPct = spotifyTotal > 0 ? Math.round((externalMatched / spotifyTotal) * 100) : 0;
const completionColor = completionPct === 100 ? 'var(--success)' : completionPct >= 80 ? 'var(--accent)' : 'var(--warning)';
return `
@@ -1173,8 +1175,9 @@
<td>${statsHtml}${breakdown}</td>
<td>
<div style="display:flex;align-items:center;gap:8px;">
<div style="flex:1;background:var(--bg-tertiary);height:6px;border-radius:3px;overflow:hidden;">
<div style="width:${completionPct}%;height:100%;background:${completionColor};transition:width 0.3s;"></div>
<div style="flex:1;background:var(--bg-tertiary);height:8px;border-radius:4px;overflow:hidden;display:flex;">
<div style="width:${localPct}%;height:100%;background:#3b82f6;transition:width 0.3s;" title="${localCount} local tracks"></div>
<div style="width:${externalPct}%;height:100%;background:#eab308;transition:width 0.3s;" title="${externalMatched} external tracks"></div>
</div>
<span style="font-size:0.85rem;color:${completionColor};font-weight:500;min-width:40px;">${completionPct}%</span>
</div>