mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 07:15:47 +00:00
refactor(lucky-mix): review follow-ups from Psychotoxical
- Drop the ~110 lines of dead full-screen overlay CSS that was never
referenced in JSX (.lucky-mix-overlay*, .lucky-mix-cube*, full-screen
@keyframes). Keep the .lucky-mix-pip* rules since the inline queue
variant re-uses them.
- Extract availability gate into hooks/useLuckyMixAvailable.ts (pure
predicate + hook). Replaces five duplicated inline checks in Sidebar,
MobileMoreOverlay, RandomLanding, Settings/SidebarCustomizer, and the
internal re-check in buildAndPlayLuckyMix.
- Add a cancel mechanic:
* luckyMixStore gets a cancelRequested flag + cancel() method
* LuckyMixCancelled sentinel is thrown from a bailIfCancelled() helper
sprinkled between await boundaries in the build loop
* catch-block swallows the sentinel silently (no toast, no error state)
* auto-cancel subscription on playerStore detects manual user track
changes (anything not in queuedIds) and flips cancelRequested so the
finished mix does not later overwrite the user's choice
* inline .queue-lucky-loading dice indicator is now a button — click
triggers explicit cancel, hover fades the dice to signal the action
- Restore the queue snapshot when the build fails before ever starting
playback, so the user does not land in an empty player after an error.
If playTrack already ran, leave current state alone (their track plus
whatever was enqueued is more useful than a stale pre-click queue).
- Rework locale labels to consistently carry the "Mix" suffix so the
entry reads well next to "Random Mix" / "Random Albums" in the
sidebar: DE Glücks-Mix, ES Mezcla Suerte, FR Mix Chance, NB Lykkemiks,
NL Geluksmix, ZH 好运混音. EN stays "Lucky Mix", RU stays
«Мне повезёт». Toast/settings/randomNavSplit copy aligned to the new
names. New luckyMix.cancelTooltip key added in all 8 locales.
AudioMuse gating stays — as Cuca confirmed, the feature's quality relies
on a correct similar-track selection, so the requirement is intentional.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
+14
-95
@@ -2427,68 +2427,7 @@
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
|
||||
}
|
||||
|
||||
/* ─ Lucky Mix overlay (big rolling dice) ─ */
|
||||
.lucky-mix-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10050;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
background: color-mix(in srgb, var(--ctp-mantle) 84%, transparent);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.lucky-mix-overlay__dice {
|
||||
position: relative;
|
||||
width: 240px;
|
||||
height: 190px;
|
||||
}
|
||||
|
||||
.lucky-mix-cube {
|
||||
position: absolute;
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
border-radius: 18px;
|
||||
border: 2px solid color-mix(in srgb, #fff 70%, var(--accent) 30%);
|
||||
background: linear-gradient(
|
||||
160deg,
|
||||
color-mix(in srgb, var(--accent) 72%, #fff 28%) 0%,
|
||||
color-mix(in srgb, var(--accent) 84%, #000 16%) 100%
|
||||
);
|
||||
box-shadow:
|
||||
0 12px 28px rgba(0, 0, 0, 0.4),
|
||||
inset -8px -10px 18px rgba(0, 0, 0, 0.2),
|
||||
inset 6px 8px 16px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.lucky-mix-cube--a {
|
||||
left: 10px;
|
||||
top: 74px;
|
||||
transform: rotate(-12deg);
|
||||
animation: luckyCubeA 980ms ease-in-out infinite;
|
||||
}
|
||||
|
||||
.lucky-mix-cube--b {
|
||||
left: 76px;
|
||||
top: 18px;
|
||||
width: 98px;
|
||||
height: 98px;
|
||||
transform: rotate(9deg);
|
||||
animation: luckyCubeB 900ms ease-in-out infinite;
|
||||
}
|
||||
|
||||
.lucky-mix-cube--c {
|
||||
left: 152px;
|
||||
top: 82px;
|
||||
transform: rotate(15deg);
|
||||
animation: luckyCubeC 1120ms ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ─ Lucky Mix pips (shared by the inline queue-lucky-cube indicator) ─ */
|
||||
.lucky-mix-pip {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
@@ -2508,44 +2447,24 @@
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.lucky-mix-overlay__title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(30px, 4.5vw, 52px);
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
letter-spacing: 0.01em;
|
||||
text-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.lucky-mix-overlay__phase {
|
||||
font-size: clamp(14px, 2vw, 18px);
|
||||
color: color-mix(in srgb, #fff 78%, var(--accent) 22%);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@keyframes luckyCubeA {
|
||||
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
||||
50% { transform: translate(-7px, -14px) rotate(-20deg) scale(1.06); }
|
||||
100% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
||||
}
|
||||
|
||||
@keyframes luckyCubeB {
|
||||
0% { transform: translate(0, 0) rotate(0deg) scale(1.02); }
|
||||
50% { transform: translate(6px, -18px) rotate(13deg) scale(1.09); }
|
||||
100% { transform: translate(0, 0) rotate(0deg) scale(1.02); }
|
||||
}
|
||||
|
||||
@keyframes luckyCubeC {
|
||||
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
||||
50% { transform: translate(8px, -12px) rotate(17deg) scale(1.04); }
|
||||
100% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
||||
}
|
||||
|
||||
.queue-lucky-loading {
|
||||
margin: 2px 10px 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 7px 10px;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
width: calc(100% - 20px);
|
||||
transition: background 140ms ease, border-color 140ms ease;
|
||||
}
|
||||
.queue-lucky-loading:hover {
|
||||
background: color-mix(in srgb, var(--danger) 8%, transparent);
|
||||
border-color: color-mix(in srgb, var(--danger) 28%, transparent);
|
||||
}
|
||||
.queue-lucky-loading:hover .queue-lucky-cube {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.queue-lucky-loading__dice {
|
||||
|
||||
Reference in New Issue
Block a user