feat: add long press to shuffle with a wave animation (#888)

* feat: add long press to shuffle with a wave animation to singnify how long to press

* refactor: long-press shuffle cleanup

Follow-up on the long-press shuffle PR: shared hook/overlay, playback parity,
pointer events, broader surface coverage, locales, and tests.

* docs: credit ImAsra for long-press album shuffle (PR #888)

Add CHANGELOG entry and Settings credits for the hold-to-shuffle play
interaction shipped in Psychotoxical/psysonic#888.

* fix: restore playAlbumShuffled and long-press hook wiring

The follow-up merge dropped playAlbumShuffled and reverted the shared
long-press hook in album play buttons, breaking tsc and vitest on PR #888.

---------

Co-authored-by: cucadmuh <49571317+cucadmuh@users.noreply.github.com>
This commit is contained in:
ImAsra
2026-05-28 22:59:49 +02:00
committed by GitHub
parent 8443b3d4be
commit ae2e123a14
21 changed files with 585 additions and 44 deletions
@@ -260,6 +260,79 @@
background: var(--accent);
}
.long-press-play-btn {
position: relative;
overflow: hidden;
}
.long-press-play-btn__icon {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
@keyframes long-press-slosh {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.long-press-wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
color: currentColor;
opacity: 0;
transform: translateY(calc(100% + 15px));
transition: none;
pointer-events: none;
z-index: 0;
}
.long-press-wave--compact {
transform: translateY(calc(100% + 10px));
}
.long-press-wave--active {
opacity: 0.25;
transform: translateY(0);
transition: transform 900ms linear;
}
.long-press-wave--compact.long-press-wave--active {
opacity: 0.35;
}
.long-press-wave__crest {
position: absolute;
top: -10px;
left: 0;
width: 200%;
height: 12px;
animation: none;
}
.long-press-wave--compact .long-press-wave__crest {
top: -6px;
height: 8px;
}
.long-press-wave--active .long-press-wave__crest {
animation: long-press-slosh 1.2s linear infinite;
}
.long-press-wave__fill {
position: absolute;
top: 2px;
left: 0;
width: 100%;
height: 100%;
background-color: currentColor;
}
/* ── Album card selection ── */
.album-card--selectable {