205 lines
10 KiB
JavaScript
205 lines
10 KiB
JavaScript
// ─── Listening statistics view ──────────────────────────────────────────────
|
|
// Opened from Settings ("Meine Statistiken"). Reads the self-hosted scrobble
|
|
// service (S.cfg.scrobbleUrl) → GET /scrobble/stats and renders totals, top
|
|
// artists/albums/tracks, a per-bucket play series, and a 24h listening clock.
|
|
// Self-contained: builds its own overlay DOM, so no index.html markup is needed.
|
|
|
|
import { S } from '../state.js';
|
|
import { esc, formatDur } from '../utils.js';
|
|
import { subsonicAuthParams, coverUrl } from '../api.js';
|
|
|
|
let _overlay = null;
|
|
let _period = 'all'; // all | year | 30d
|
|
|
|
const PERIODS = [
|
|
{ key: 'all', label: 'Alles', bucket: 'month' },
|
|
{ key: 'year', label: 'Dieses Jahr', bucket: 'month' },
|
|
{ key: '30d', label: 'Letzte 30 Tage', bucket: 'day' },
|
|
];
|
|
|
|
// Human listening time: "3h 12m" / "12m" / "45s"
|
|
function _fmtTime(sec) {
|
|
sec = Math.floor(sec || 0);
|
|
const h = Math.floor(sec / 3600);
|
|
const m = Math.floor((sec % 3600) / 60);
|
|
if (h) return `${h}h ${m}m`;
|
|
if (m) return `${m}m`;
|
|
return `${sec}s`;
|
|
}
|
|
|
|
function _tzOffsetSec() { return -new Date().getTimezoneOffset() * 60; }
|
|
|
|
function _periodRange(key) {
|
|
const now = Math.floor(Date.now() / 1000);
|
|
if (key === 'year') {
|
|
const from = Math.floor(new Date(new Date().getFullYear(), 0, 1).getTime() / 1000);
|
|
return { from, to: now + 1 };
|
|
}
|
|
if (key === '30d') return { from: now - 30 * 86400, to: now + 1 };
|
|
return { from: 0, to: now + 1 }; // all time
|
|
}
|
|
|
|
export function openStats() {
|
|
if (!_overlay) _buildOverlay();
|
|
_overlay.classList.add('open'); // .modal-overlay.open = visible (matches app's modals)
|
|
document.body.style.overflow = 'hidden';
|
|
_load();
|
|
}
|
|
|
|
export function closeStats() {
|
|
if (_overlay) _overlay.classList.remove('open');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
function _buildOverlay() {
|
|
_overlay = document.createElement('div');
|
|
_overlay.className = 'modal-overlay';
|
|
_overlay.id = 'stats-overlay';
|
|
_overlay.addEventListener('click', e => { if (e.target === _overlay) closeStats(); });
|
|
_overlay.innerHTML = `
|
|
<div class="modal-card stats-card" style="max-width:720px;width:calc(100vw - 32px);max-height:88vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border2);border-radius:18px;box-shadow:0 40px 80px #0009;overflow:hidden">
|
|
<div class="modal-head" style="display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)">
|
|
<span style="font-size:18px">📊</span>
|
|
<div style="font-size:17px;font-weight:800;letter-spacing:-.3px;flex:1">Meine Statistiken</div>
|
|
<button class="hbtn" onclick="closeStats()" title="Schließen"
|
|
style="padding:6px 10px;color:var(--text2);font-size:18px;background:none;border:none;cursor:pointer">✕</button>
|
|
</div>
|
|
<div class="stats-tabs" id="stats-tabs" style="display:flex;gap:6px;padding:12px 18px 0"></div>
|
|
<div class="stats-body" id="stats-body" style="padding:16px 18px;overflow-y:auto"></div>
|
|
</div>`;
|
|
document.body.appendChild(_overlay);
|
|
_renderTabs();
|
|
}
|
|
|
|
function _renderTabs() {
|
|
const tabs = _overlay.querySelector('#stats-tabs');
|
|
tabs.innerHTML = PERIODS.map(p => `
|
|
<button class="stats-tab${p.key === _period ? ' active' : ''}" data-period="${p.key}"
|
|
style="padding:7px 14px;border-radius:999px;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;
|
|
border:1px solid var(--border);transition:all .15s;
|
|
background:${p.key === _period ? 'var(--accent)' : 'transparent'};
|
|
color:${p.key === _period ? '#fff' : 'var(--text2)'}">${p.label}</button>`).join('');
|
|
tabs.querySelectorAll('.stats-tab').forEach(b =>
|
|
b.addEventListener('click', () => { _period = b.dataset.period; _renderTabs(); _load(); }));
|
|
}
|
|
|
|
async function _load() {
|
|
const body = _overlay.querySelector('#stats-body');
|
|
if (!S.cfg.scrobbleUrl) {
|
|
body.innerHTML = `<div class="stats-empty" style="text-align:center;color:var(--text2);padding:40px 0;line-height:1.6">
|
|
Kein Scrobble-Dienst konfiguriert.<br>Trage die <b>Scrobble-URL</b> in den Einstellungen ein,
|
|
damit deine Wiedergaben aufgezeichnet werden.</div>`;
|
|
return;
|
|
}
|
|
const auth = subsonicAuthParams();
|
|
if (!auth) { body.innerHTML = _errBox('Nicht angemeldet.'); return; }
|
|
|
|
body.innerHTML = `<div style="text-align:center;color:var(--text2);padding:40px 0">Lade…</div>`;
|
|
|
|
const bucket = PERIODS.find(p => p.key === _period)?.bucket || 'month';
|
|
const { from, to } = _periodRange(_period);
|
|
const qs = `${auth}&from=${from}&to=${to}&tz=${_tzOffsetSec()}&bucket=${bucket}&limit=10`;
|
|
try {
|
|
const res = await fetch(`${S.cfg.scrobbleUrl}/scrobble/stats?${qs}`);
|
|
if (!res.ok) { body.innerHTML = _errBox(`Fehler ${res.status}`); return; }
|
|
const d = await res.json();
|
|
_render(body, d);
|
|
} catch {
|
|
body.innerHTML = _errBox('Scrobble-Dienst nicht erreichbar.');
|
|
}
|
|
}
|
|
|
|
function _errBox(msg) {
|
|
return `<div style="text-align:center;color:var(--danger);padding:40px 0">${esc(msg)}</div>`;
|
|
}
|
|
|
|
function _render(body, d) {
|
|
if (!d.totalPlays) {
|
|
body.innerHTML = `<div style="text-align:center;color:var(--text2);padding:40px 0;line-height:1.6">
|
|
Noch keine Wiedergaben in diesem Zeitraum.<br>Spiel ein paar Songs — sie erscheinen hier automatisch.</div>`;
|
|
return;
|
|
}
|
|
body.innerHTML = [
|
|
_tiles(d),
|
|
_seriesChart(d.series, d.range.bucket),
|
|
_topList('Top-Künstler', d.topArtists, a => a.name, a => a.plays, a => a.artistId, true),
|
|
_topList('Top-Songs', d.topTracks, t => `${t.title}${t.artist ? ' · ' + t.artist : ''}`, t => t.plays, t => t.albumId || t.songId),
|
|
_topList('Top-Alben', d.topAlbums, a => `${a.name}${a.artist ? ' · ' + a.artist : ''}`, a => a.plays, a => a.albumId),
|
|
_hourClock(d.byHour),
|
|
].join('');
|
|
}
|
|
|
|
function _tiles(d) {
|
|
const tile = (val, label) => `
|
|
<div style="flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px 16px">
|
|
<div style="font-size:24px;font-weight:800;letter-spacing:-.5px">${val}</div>
|
|
<div style="font-size:12px;color:var(--text2);margin-top:2px">${label}</div>
|
|
</div>`;
|
|
return `<div style="display:flex;gap:10px;margin-bottom:18px">
|
|
${tile(d.totalPlays.toLocaleString('de-DE'), 'Plays')}
|
|
${tile(_fmtTime(d.totalSeconds), 'Hörzeit')}
|
|
${tile((d.topArtists?.length || 0) >= 10 ? '10+' : (d.topArtists?.length || 0), 'Künstler')}
|
|
</div>`;
|
|
}
|
|
|
|
// Simple vertical bar chart of plays per bucket.
|
|
function _seriesChart(series, bucket) {
|
|
if (!series?.length) return '';
|
|
const max = Math.max(...series.map(s => s.plays), 1);
|
|
const fmtLabel = b => bucket === 'month'
|
|
? b.slice(5) + '.' + b.slice(2, 4) // "08.25"
|
|
: bucket === 'year' ? b : b.slice(8) + '.' + b.slice(5, 7); // "03.08"
|
|
const bars = series.map(s => `
|
|
<div title="${esc(s.bucket)}: ${s.plays}" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0">
|
|
<div style="width:100%;display:flex;align-items:flex-end;height:90px">
|
|
<div style="width:100%;background:var(--accent);border-radius:4px 4px 0 0;height:${Math.round((s.plays / max) * 100)}%;min-height:2px"></div>
|
|
</div>
|
|
<div style="font-size:10px;color:var(--text2);white-space:nowrap;transform:rotate(-45deg);transform-origin:center;height:16px">${esc(fmtLabel(s.bucket))}</div>
|
|
</div>`).join('');
|
|
return `${_h('Verlauf')}
|
|
<div style="display:flex;gap:3px;align-items:flex-end;margin:6px 0 24px;overflow-x:auto;padding-bottom:8px">${bars}</div>`;
|
|
}
|
|
|
|
function _topList(title, items, labelFn, valFn, idFn = null, circular = false) {
|
|
if (!items?.length) return '';
|
|
const max = Math.max(...items.map(valFn), 1);
|
|
const radius = circular ? '50%' : '6px';
|
|
const rows = items.map((it, i) => {
|
|
const val = valFn(it);
|
|
const cover = idFn ? coverUrl(idFn(it), 80) : null;
|
|
const thumb = `<div style="width:40px;height:40px;border-radius:${radius};background:var(--surface2);flex-shrink:0;overflow:hidden">
|
|
${cover ? `<img src="${esc(cover)}" loading="lazy" style="width:100%;height:100%;object-fit:cover" onerror="this.style.display='none'">` : ''}
|
|
</div>`;
|
|
return `<div style="display:flex;align-items:center;gap:10px;padding:6px 0">
|
|
<div style="width:18px;text-align:right;color:var(--text2);font-size:13px;font-weight:700">${i + 1}</div>
|
|
${thumb}
|
|
<div style="flex:1;min-width:0">
|
|
<div style="font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(labelFn(it))}</div>
|
|
<div style="height:5px;background:var(--surface2);border-radius:3px;margin-top:4px;overflow:hidden">
|
|
<div style="height:100%;background:var(--accent);width:${Math.round((val / max) * 100)}%"></div>
|
|
</div>
|
|
</div>
|
|
<div style="font-size:13px;color:var(--text2);font-weight:600;min-width:34px;text-align:right">${val}</div>
|
|
</div>`;
|
|
}).join('');
|
|
return `${_h(title)}<div style="margin-bottom:22px">${rows}</div>`;
|
|
}
|
|
|
|
function _hourClock(byHour) {
|
|
if (!byHour?.length) return '';
|
|
const max = Math.max(...byHour.map(h => h.plays), 1);
|
|
const bars = byHour.map(h => `
|
|
<div title="${h.hour}:00 — ${h.plays}" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0">
|
|
<div style="width:100%;display:flex;align-items:flex-end;height:56px">
|
|
<div style="width:100%;background:var(--accent);opacity:${h.plays ? 1 : 0.15};border-radius:3px 3px 0 0;height:${Math.round((h.plays / max) * 100)}%;min-height:2px"></div>
|
|
</div>
|
|
${h.hour % 6 === 0 ? `<div style="font-size:9px;color:var(--text2)">${h.hour}</div>` : '<div style="height:11px"></div>'}
|
|
</div>`).join('');
|
|
return `${_h('Hör-Uhr (Stunde)')}
|
|
<div style="display:flex;gap:2px;align-items:flex-end;margin:6px 0 8px">${bars}</div>`;
|
|
}
|
|
|
|
function _h(t) {
|
|
return `<div style="font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text2);margin:0 0 8px">${esc(t)}</div>`;
|
|
}
|