itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-22 14:35:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: queue-ux-improvements (#419)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+7 -46
View File
@@ -1866,27 +1866,7 @@
transform: translateX(0.5px);
}
/* Loading state: the engine is still downloading/decoding/seeking. A short
rotating arc (~25% of the circumference) signals "pending" without
pretending to be progress. 150 ms delay suppresses the spinner for
small/cached files where audio starts almost instantly. */
.playlist-suggestion-preview-btn.is-previewing:not(.audio-started) .playlist-suggestion-preview-ring-progress {
/* circumference = 2π × 10.5 ≈ 65.97 → 25% arc + 75% gap */
stroke-dasharray: 16.5 49.5;
stroke-dashoffset: 0;
animation: playlist-preview-loading 1.1s linear infinite;
animation-delay: 150ms;
}
@keyframes playlist-preview-loading {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -65.97; }
}
/* Animation runs only after `audio-started` is added — i.e. once the engine
emitted `audio:preview-start` for this track. Prevents the ring from
sprinting ahead of audio during the engine's download/decode/seek warmup. */
.playlist-suggestion-preview-btn.audio-started .playlist-suggestion-preview-ring-progress {
.playlist-suggestion-preview-btn.is-previewing .playlist-suggestion-preview-ring-progress {
animation: playlist-preview-progress var(--preview-duration, 30s) linear forwards;
}
@@ -2062,6 +2042,11 @@ html[data-track-previews-randommix="off"] [data-preview-loc="randomMix"] .pl
animation-duration: 0.9s;
}
/* Pause EQ bars animation when playback is paused */
.eq-bars.paused .eq-bar {
animation-play-state: paused;
}
@keyframes eq-bounce {
0%,
@@ -2507,27 +2492,6 @@ html[data-track-previews-randommix="off"] [data-preview-loc="randomMix"] .pl
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
/* Loading spinner — same logic as the tracklist ring above. The SVG uses
pathLength="100", so the circumference is normalised: 25 unit arc + 75
unit gap, with the offset rolling from 0 to -100. */
.player-bar.is-previewing:not(.audio-started) .player-btn-preview-ring-progress {
stroke-dasharray: 25 75;
stroke-dashoffset: 0;
animation: player-preview-loading 1.1s linear infinite;
animation-delay: 150ms;
}
@keyframes player-preview-loading {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -100; }
}
/* Animation gated on the player-bar `audio-started` flag (set after the
engine emits `audio:preview-start`). Same rationale as the tracklist
preview ring above. */
.player-bar.audio-started .player-btn-preview-ring-progress {
animation: player-preview-progress var(--preview-duration, 30s) linear forwards;
}
@@ -11097,10 +11061,7 @@ html[data-app-hidden="true"] *::before,
html[data-app-hidden="true"] *::after,
html[data-psy-native-hidden="true"] *,
html[data-psy-native-hidden="true"] *::before,
html[data-psy-native-hidden="true"] *::after,
html[data-app-blurred="true"] *,
html[data-app-blurred="true"] *::before,
html[data-app-blurred="true"] *::after {
html[data-psy-native-hidden="true"] *::after {
animation-play-state: paused !important;
}