feat(hero): prev / next arrows on the Mainstage featured strip (#735)

* feat(hero): prev / next arrows on the Mainstage featured strip

Adds left and right chevron buttons over the featured-album hero so a
single click flips to the previous / next album. Hitting the 8 px dot
indicators was awkward and often opened the underlying album by
mistake; the arrows give a generous 44 px touch target on each edge.

- New `goPrev` / `goNext` callbacks wrap with modulo, restart the
  auto-advance timer on click (same pattern the old dot handler used).
- Buttons live in a new `.hero-nav` flex wrapper with `inset: 0` and
  `justify-content: space-between`, so they pin to the hero's left and
  right edges regardless of theme padding. `pointer-events: none` on
  the wrapper + `auto` on the buttons keeps the rest of the hero
  click-through (navigate to album).
- Dots are now decorative spans, not buttons — `pointer-events: none`,
  no hover state, no `onClick`. Clicking near a dot used to navigate
  to the album because the dot was too small to land on.
- i18n: `previousAlbum` / `nextAlbum` keys in all 9 locales.

Reported by zunoz on Discord.

* docs(changelog): note Mainstage hero prev / next arrows (#735)
This commit is contained in:
Frank Stellmacher
2026-05-16 13:43:09 +02:00
committed by GitHub
parent 2233e8fb91
commit 31abdc03ef
12 changed files with 109 additions and 21 deletions
+2
View File
@@ -3,4 +3,6 @@ export const hero = {
playAlbum: 'Album abspielen',
enqueue: 'Einreihen',
enqueueTooltip: 'Ganzes Album zur Warteschlange hinzufügen',
previousAlbum: 'Vorheriges Album',
nextAlbum: 'Nächstes Album',
};
+2
View File
@@ -3,4 +3,6 @@ export const hero = {
playAlbum: 'Play Album',
enqueue: 'Enqueue',
enqueueTooltip: 'Add entire album to queue',
previousAlbum: 'Previous album',
nextAlbum: 'Next album',
};
+2
View File
@@ -3,4 +3,6 @@ export const hero = {
playAlbum: 'Reproducir Álbum',
enqueue: 'Agregar a la Cola',
enqueueTooltip: 'Agregar álbum completo a la cola',
previousAlbum: 'Álbum anterior',
nextAlbum: 'Álbum siguiente',
};
+2
View File
@@ -3,4 +3,6 @@ export const hero = {
playAlbum: 'Lire l\'album',
enqueue: 'Mettre en file',
enqueueTooltip: 'Ajouter l\'album entier à la file d\'attente',
previousAlbum: 'Album précédent',
nextAlbum: 'Album suivant',
};
+2
View File
@@ -3,4 +3,6 @@ export const hero = {
playAlbum: 'Spill av album',
enqueue: 'Legg til i kø',
enqueueTooltip: 'Legg til hele albumet i køen',
previousAlbum: 'Forrige album',
nextAlbum: 'Neste album',
};
+2
View File
@@ -3,4 +3,6 @@ export const hero = {
playAlbum: 'Album afspelen',
enqueue: 'In wachtrij',
enqueueTooltip: 'Volledig album aan wachtrij toevoegen',
previousAlbum: 'Vorig album',
nextAlbum: 'Volgend album',
};
+2
View File
@@ -3,4 +3,6 @@ export const hero = {
playAlbum: 'Redă Album',
enqueue: 'Pune în coadă',
enqueueTooltip: 'Adaugă întregul album în coadă',
previousAlbum: 'Albumul anterior',
nextAlbum: 'Albumul următor',
};
+2
View File
@@ -3,4 +3,6 @@ export const hero = {
playAlbum: 'Воспроизвести альбом',
enqueue: 'В очередь',
enqueueTooltip: 'Добавить весь альбом в очередь',
previousAlbum: 'Предыдущий альбом',
nextAlbum: 'Следующий альбом',
};
+2
View File
@@ -3,4 +3,6 @@ export const hero = {
playAlbum: '播放专辑',
enqueue: '加入队列',
enqueueTooltip: '将整张专辑添加到播放队列',
previousAlbum: '上一张专辑',
nextAlbum: '下一张专辑',
};