mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 15:25:46 +00:00
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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user