feat: queue-ux-improvements (#419)

* feat(queue): add ETA display, equalizer indicator and collapsible now playing

* deleted endsAt and showDuration strings, changed eta update to 30s

* feat(queue): ETA tooltip, persistent Now Playing collapse, EQ bar pause, remove redundant Play icon

* feat(queue): fold ETA into existing total/remaining toggle as third mode

The standalone ETA span next to the track counter is removed; instead the
clickable duration label in the queue header now rotates through three
modes per click: total → remaining → eta → total. Counter (N/M) stays
where it was.

ETA mode keeps the live-feel treatment from the original PR (accent
colour while playing, muted at 50% opacity when paused). The other two
modes use plain accent.

i18n: queue.etaTooltip removed (no longer a separate descriptive label),
queue.showEta added as the action tooltip ('Show estimated end time')
in all 8 locales — matches the showRemaining / showTotal pattern.

* docs(changelog): add #419 queue UX improvements entry

Adds the [1.45.0] / Added entry for this PR's queue panel refinements
(position counter, tri-state duration toggle including ETA, collapsible
Now Playing section, animated EQ indicator).

---------

Co-authored-by: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com>
This commit is contained in:
Kveld.
2026-05-02 16:45:55 -03:00
committed by GitHub
parent 5662dafe97
commit 18b4a982ef
33 changed files with 10115 additions and 1498 deletions
-19
View File
@@ -580,25 +580,6 @@ function AppShell() {
return () => document.removeEventListener('visibilitychange', update);
}, []);
// Pause cosmetic animations when the window loses OS focus but stays visible
// (alt-tab, click into another app). On low-VRAM laptops WebView2 keeps
// compositing mesh blobs / waveform / marquee at full rate even though the
// user isn't looking — measurable GPU drain reported in issue #334.
useEffect(() => {
const update = () => {
const blurred = !document.hasFocus();
window.__psyBlurred = blurred;
document.documentElement.dataset.appBlurred = blurred ? 'true' : 'false';
};
window.addEventListener('focus', update);
window.addEventListener('blur', update);
update();
return () => {
window.removeEventListener('focus', update);
window.removeEventListener('blur', update);
};
}, []);
const isMobilePlayer = isMobile && location.pathname === '/now-playing';
return (