feat(seekbar): configurable seekbar styles with animated preview

Add five seekbar styles selectable in Settings → Appearance:
Waveform, Line & Dot, Bar, Thick Bar, and Segmented. Each option
shows an animated canvas preview using requestAnimationFrame.

Style is persisted in authStore (seekbarStyle, default: waveform).
Translations added for all 7 languages.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-08 01:39:08 +02:00
parent ada7dd010f
commit 829936a78d
10 changed files with 377 additions and 53 deletions
+7
View File
@@ -543,6 +543,13 @@ export const deTranslation = {
infiniteQueue: 'Endlose Warteschlange',
infiniteQueueDesc: 'Automatisch Zufallstitel anhängen wenn die Warteschlange leer wird',
experimental: 'Experimentell',
seekbarStyle: 'Seekbar-Stil',
seekbarStyleDesc: 'Aussehen der Wiedergabe-Seekbar auswählen',
seekbarWaveform: 'Wellenform',
seekbarLinedot: 'Linie & Punkt',
seekbarBar: 'Balken',
seekbarThick: 'Dicker Balken',
seekbarSegmented: 'Segmentiert',
},
changelog: {
modalTitle: 'Was ist neu',
+7
View File
@@ -544,6 +544,13 @@ export const enTranslation = {
infiniteQueue: 'Infinite Queue',
infiniteQueueDesc: 'Automatically append random tracks when the queue runs out',
experimental: 'Experimental',
seekbarStyle: 'Seekbar Style',
seekbarStyleDesc: 'Choose the look of the player seek bar',
seekbarWaveform: 'Waveform',
seekbarLinedot: 'Line & Dot',
seekbarBar: 'Bar',
seekbarThick: 'Thick Bar',
seekbarSegmented: 'Segmented',
},
changelog: {
modalTitle: "What's New",
+7
View File
@@ -541,6 +541,13 @@ export const frTranslation = {
infiniteQueue: 'File infinie',
infiniteQueueDesc: 'Ajouter automatiquement des morceaux aléatoires quand la file est épuisée',
experimental: 'Expérimental',
seekbarStyle: 'Style de la barre de lecture',
seekbarStyleDesc: 'Choisir l\'apparence de la barre de progression',
seekbarWaveform: 'Forme d\'onde',
seekbarLinedot: 'Ligne & point',
seekbarBar: 'Barre',
seekbarThick: 'Barre épaisse',
seekbarSegmented: 'Segmentée',
},
changelog: {
modalTitle: 'Quoi de neuf',
+7
View File
@@ -540,6 +540,13 @@ export const nbTranslation = {
preloadEarly: 'Tidlig (etter 5 s avspilling)',
preloadCustom: 'Egendefinert',
preloadCustomSeconds: 'Sekunder før slutt: {{n}}',
seekbarStyle: 'Søkefelt-stil',
seekbarStyleDesc: 'Velg utseendet på avspillingssøkefeltet',
seekbarWaveform: 'Bølgeform',
seekbarLinedot: 'Linje & punkt',
seekbarBar: 'Linje',
seekbarThick: 'Tykk linje',
seekbarSegmented: 'Segmentert',
},
changelog: {
modalTitle: "Nyheter",
+7
View File
@@ -541,6 +541,13 @@ export const nlTranslation = {
infiniteQueue: 'Oneindige wachtrij',
infiniteQueueDesc: 'Automatisch willekeurige nummers toevoegen als de wachtrij leeg raakt',
experimental: 'Experimenteel',
seekbarStyle: 'Zoekbalkstijl',
seekbarStyleDesc: 'Kies het uiterlijk van de afspeelbalk',
seekbarWaveform: 'Golfvorm',
seekbarLinedot: 'Lijn & punt',
seekbarBar: 'Balk',
seekbarThick: 'Dikke balk',
seekbarSegmented: 'Gesegmenteerd',
},
changelog: {
modalTitle: 'Wat is nieuw',
+7
View File
@@ -564,6 +564,13 @@ export const ruTranslation = {
infiniteQueue: 'Бесконечная очередь',
infiniteQueueDesc: 'Подмешивать случайные треки, когда очередь закончится',
experimental: 'Экспериментально',
seekbarStyle: 'Стиль прогресс-бара',
seekbarStyleDesc: 'Выбор внешнего вида полосы воспроизведения',
seekbarWaveform: 'Форма волны',
seekbarLinedot: 'Линия и точка',
seekbarBar: 'Полоса',
seekbarThick: 'Толстая полоса',
seekbarSegmented: 'Сегменты',
},
changelog: {
modalTitle: 'Что нового',
+7
View File
@@ -537,6 +537,13 @@ export const zhTranslation = {
infiniteQueue: '无限队列',
infiniteQueueDesc: '队列播完时自动追加随机曲目',
experimental: '实验性',
seekbarStyle: '进度条样式',
seekbarStyleDesc: '选择播放进度条的外观',
seekbarWaveform: '波形',
seekbarLinedot: '线条与点',
seekbarBar: '条形',
seekbarThick: '粗条形',
seekbarSegmented: '分段式',
},
changelog: {
modalTitle: '新功能',