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:
Psychotoxical
2026-04-23 18:41:46 +02:00
parent ab5c8e0b48
commit e9e61b9a05
17 changed files with 238 additions and 170 deletions
+14 -95
View File
@@ -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 {