From 2c24b5f12fe87dd63752b9d5b3385c1ee64fb14e Mon Sep 17 00:00:00 2001 From: InstaZDLL Date: Wed, 20 May 2026 23:41:34 +0200 Subject: [PATCH 1/7] fix(player): tighten player-bar density to spotify/lokal levels MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The player bar was ~120 px tall (h-24 + h-6 footer), noticeably chunkier than comparable apps (lokal sits at 80 px, Spotify around 90 px). The issue was raised on small-screen feedback — 1080p users lose meaningful vertical real estate to the player. Compact pass that preserves every existing affordance: - PlayerBar: h-24 -> h-20, px-6 -> px-4, artwork w-14 -> w-12 (iconSize 24 -> 20), space-x-4 -> space-x-3 on the track-info column, right cluster space-x-3 -> space-x-2 with p-2 -> p-1.5 and icon size 20 -> 18 on every action button (lyrics, queue, devices, mini-player, fullscreen). - PlaybackControls: play button w-10 -> w-9 (icons 20 -> 18), skip / shuffle / repeat icons aligned at 18, space-x-6 -> space-x-5, mb-3 -> mb-1.5 between transport row and progress bar. - AudioQualityFooter: h-6 -> h-5, px-6 -> px-4, text-[11px] -> [10px]. Info stays permanently visible — the kHz/kbps strip is part of the app's identity, just slimmer. Net: ~120 px -> ~100 px, gaining ~20 px back to library / detail views at every viewport. --- src/components/player/AudioQualityFooter.tsx | 4 +-- src/components/player/PlaybackControls.tsx | 14 ++++----- src/components/player/PlayerBar.tsx | 30 ++++++++++---------- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/player/AudioQualityFooter.tsx b/src/components/player/AudioQualityFooter.tsx index 3b558b3..7900f86 100644 --- a/src/components/player/AudioQualityFooter.tsx +++ b/src/components/player/AudioQualityFooter.tsx @@ -19,7 +19,7 @@ interface AudioQualityFooterProps { export function AudioQualityFooter({ track }: AudioQualityFooterProps) { if (!track) { return ( -
+
); } @@ -42,7 +42,7 @@ export function AudioQualityFooter({ track }: AudioQualityFooterProps) { const hiRes = isHiRes(track.bit_depth, track.sample_rate); return ( -
+
{leftBits.join(" · ")} {hiRes && ( diff --git a/src/components/player/PlaybackControls.tsx b/src/components/player/PlaybackControls.tsx index ed82941..7f8b2d4 100644 --- a/src/components/player/PlaybackControls.tsx +++ b/src/components/player/PlaybackControls.tsx @@ -34,7 +34,7 @@ export function PlaybackControls() { const isRepeatActive = repeatMode !== "off"; return ( -
+
@@ -89,7 +89,7 @@ export function PlaybackControls() { aria-label={t("player.controls.next")} className="text-zinc-400 hover:text-zinc-800 dark:hover:text-white transition-colors disabled:opacity-40 disabled:cursor-not-allowed" > - + {!isSpotify && ( @@ -257,13 +257,13 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) { aria-label={t("playerBar.devices")} title={t("playerBar.devices")} aria-expanded={isDeviceMenuOpen} - className={`p-2 rounded-lg transition-colors border ${ + className={`p-1.5 rounded-lg transition-colors border ${ isDeviceMenuOpen ? "border-emerald-500 text-emerald-500 bg-emerald-500/10" : "border-transparent text-zinc-400 hover:text-zinc-800 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-zinc-800" }`} > - +
)} @@ -303,9 +303,9 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) { }} aria-label={t("playerBar.miniPlayer")} title={t("playerBar.miniPlayer")} - className="p-2 rounded-lg text-zinc-400 hover:text-zinc-800 dark:hover:text-white transition-colors" + className="p-1.5 rounded-lg text-zinc-400 hover:text-zinc-800 dark:hover:text-white transition-colors" > - + )} @@ -315,9 +315,9 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) { disabled={!currentTrack} aria-label={t("playerBar.openFullscreen")} title={t("playerBar.openFullscreen")} - className="p-2 rounded-lg text-zinc-400 hover:text-zinc-800 dark:hover:text-white transition-colors disabled:opacity-40 disabled:cursor-not-allowed" + className="p-1.5 rounded-lg text-zinc-400 hover:text-zinc-800 dark:hover:text-white transition-colors disabled:opacity-40 disabled:cursor-not-allowed" > - +
From 012e0aa1112f0ef9902fb9374114afdd2ead0017 Mon Sep 17 00:00:00 2001 From: InstaZDLL Date: Thu, 21 May 2026 00:30:17 +0200 Subject: [PATCH 2/7] fix(player): remove border from PlayerBar artwork for cleaner appearance --- src/components/common/Artwork.tsx | 14 ++++++++++---- src/components/player/PlayerBar.tsx | 2 +- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/common/Artwork.tsx b/src/components/common/Artwork.tsx index fd5118f..0b6a7df 100644 --- a/src/components/common/Artwork.tsx +++ b/src/components/common/Artwork.tsx @@ -71,10 +71,16 @@ export function Artwork({ xl: "rounded-xl", "2xl": "rounded-2xl", }[rounded]; - // Gradient + border combo reused as the placeholder background, both - // when no image is available and behind the fading . + // Gradient placeholder reused as the background behind the fading + // . The border is split off because it would otherwise consume + // 2 px inside the wrapper's content box (Tailwind defaults to + // `box-sizing: border-box`), shrinking the visible image by 2 px on + // every Artwork in the app. The border is invisible behind a loaded + // image anyway — keep it only on the no-src placeholder branch. const placeholderBg = - "bg-linear-to-br from-emerald-100 to-emerald-200 dark:from-emerald-900/40 dark:to-emerald-800/30 border border-emerald-200/60 dark:border-emerald-800/40"; + "bg-linear-to-br from-emerald-100 to-emerald-200 dark:from-emerald-900/40 dark:to-emerald-800/30"; + const placeholderBorder = + "border border-emerald-200/60 dark:border-emerald-800/40"; const discIcon = ( Date: Thu, 21 May 2026 00:36:24 +0200 Subject: [PATCH 3/7] feat(player): make the audio quality footer opt-in via Settings The kHz / kbps / codec / bit-depth strip under the player bar permanently took ~24 px of vertical real estate, which adds up on 1080p displays (issue #54 territory). Audiophiles love it, casual listeners mostly don't notice it. Make it opt-in like the existing sleep-timer / A-B loop pins. - New per-profile setting `ui.show_audio_quality_footer` (default off). PlayerBar reads it via the same `getProfileSetting` + window event pattern used by the other UI toggles, so the bandeau pops in and out without a reload when the user flips the switch. - SettingsView gets a matching ToggleSwitch entry next to the A-B loop / sleep-timer toggles, with an `Activity` icon and copy explaining the trade-off. - New i18n keys `settings.showAudioQualityFooter.{title,subtitle}` propagated to all 17 locales (fr/en hand-written, the rest a best-effort translation following the existing tone). --- src/components/player/PlayerBar.tsx | 29 +++++++++++++++- src/components/views/SettingsView.tsx | 50 +++++++++++++++++++++++++++ src/i18n/locales/ar.json | 4 +++ src/i18n/locales/de.json | 4 +++ src/i18n/locales/en.json | 4 +++ src/i18n/locales/es.json | 4 +++ src/i18n/locales/fr.json | 4 +++ src/i18n/locales/hi.json | 4 +++ src/i18n/locales/id.json | 4 +++ src/i18n/locales/it.json | 4 +++ src/i18n/locales/ja.json | 4 +++ src/i18n/locales/ko.json | 4 +++ src/i18n/locales/nl.json | 4 +++ src/i18n/locales/pt-BR.json | 4 +++ src/i18n/locales/pt.json | 4 +++ src/i18n/locales/ru.json | 4 +++ src/i18n/locales/tr.json | 4 +++ src/i18n/locales/zh-CN.json | 4 +++ src/i18n/locales/zh-TW.json | 4 +++ 19 files changed, 146 insertions(+), 1 deletion(-) diff --git a/src/components/player/PlayerBar.tsx b/src/components/player/PlayerBar.tsx index 97f0dfc..424cb18 100644 --- a/src/components/player/PlayerBar.tsx +++ b/src/components/player/PlayerBar.tsx @@ -53,6 +53,10 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) { // we re-read without polling. const [pinSleepTimer, setPinSleepTimer] = useState(false); const [pinAbLoop, setPinAbLoop] = useState(false); + // Audio quality strip (kHz / kbps / codec / bit depth) — hidden by + // default so the bar stays slim, opt-in via Settings. Same dispatch + // pattern as the other UI toggles above. + const [showAudioQualityFooter, setShowAudioQualityFooter] = useState(false); useEffect(() => { const refreshSleep = () => { getProfileSetting("ui.show_sleep_timer") @@ -69,16 +73,35 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) { }) .catch(() => {}); }; + const refreshAudioQuality = () => { + getProfileSetting("ui.show_audio_quality_footer") + .then((v) => { + // Missing key → off (slim bar by default). + setShowAudioQualityFooter( + v == null ? false : v === "1" || v === "true", + ); + }) + .catch(() => {}); + }; refreshSleep(); refreshAb(); + refreshAudioQuality(); window.addEventListener("waveflow:sleep-timer-visibility", refreshSleep); window.addEventListener("waveflow:ab-loop-visibility", refreshAb); + window.addEventListener( + "waveflow:audio-quality-footer-visibility", + refreshAudioQuality, + ); return () => { window.removeEventListener( "waveflow:sleep-timer-visibility", refreshSleep, ); window.removeEventListener("waveflow:ab-loop-visibility", refreshAb); + window.removeEventListener( + "waveflow:audio-quality-footer-visibility", + refreshAudioQuality, + ); }; }, []); @@ -321,7 +344,11 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) {
- + {showAudioQualityFooter && ( + + )}
{isFullscreenOpen && currentTrack && ( {}); + getProfileSetting("ui.show_audio_quality_footer") + .then((v) => { + if (cancelled) return; + // Missing key → off (matches PlayerBar default). + if (v != null) setShowAudioQualityFooter(v === "true" || v === "1"); + }) + .catch(() => {}); getProfileSetting("ui.show_spotify") .then((v) => { if (cancelled) return; @@ -537,6 +548,25 @@ export function SettingsView({ onNavigate }: SettingsViewProps) { }); }, [showAbLoop]); + const handleToggleShowAudioQualityFooter = useCallback(() => { + const next = !showAudioQualityFooter; + setShowAudioQualityFooter(next); + setProfileSetting( + "ui.show_audio_quality_footer", + next ? "true" : "false", + "bool", + ) + .then(() => { + window.dispatchEvent( + new CustomEvent("waveflow:audio-quality-footer-visibility"), + ); + }) + .catch((err) => { + console.error("[Settings] set show_audio_quality_footer failed", err); + setShowAudioQualityFooter(!next); + }); + }, [showAudioQualityFooter]); + const handleToggleAutoStart = useCallback(() => { const next = !autoStart; setAutoStart(next); @@ -1555,6 +1585,26 @@ export function SettingsView({ onNavigate }: SettingsViewProps) { /> + {/* Visibilité du bandeau qualité audio sous la player bar */} +
+
+
+ +
+ {/* Visibilité de l'entrée Spotify dans la sidebar */}
diff --git a/src/i18n/locales/ar.json b/src/i18n/locales/ar.json index 257aa12..77e93f2 100644 --- a/src/i18n/locales/ar.json +++ b/src/i18n/locales/ar.json @@ -1333,6 +1333,10 @@ "decreaseAria": "تصغير", "increaseAria": "تكبير", "resetAria": "إعادة التكبير إلى 100 %" + }, + "showAudioQualityFooter": { + "title": "إظهار شريط جودة الصوت", + "subtitle": "تفاصيل تقنية (kHz، kbps، الترميز، عمق البت) أسفل شريط المشغل. معطل افتراضيًا للحفاظ على شريط أنحف." } }, "scanProgress": { diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json index 7e06048..f816270 100644 --- a/src/i18n/locales/de.json +++ b/src/i18n/locales/de.json @@ -1329,6 +1329,10 @@ "decreaseAria": "Verkleinern", "increaseAria": "Vergrößern", "resetAria": "Zoom auf 100 % zurücksetzen" + }, + "showAudioQualityFooter": { + "title": "Audioqualitätsleiste anzeigen", + "subtitle": "Technische Details (kHz, kbps, Codec, Bittiefe) unter der Player-Leiste. Standardmäßig aus für eine schlankere Leiste." } }, "scanProgress": { diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 1fa9de7..af18d65 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -1395,6 +1395,10 @@ "decreaseAria": "Zoom out", "increaseAria": "Zoom in", "resetAria": "Reset zoom to 100 %" + }, + "showAudioQualityFooter": { + "title": "Show audio quality strip", + "subtitle": "Technical details (kHz, kbps, codec, bit depth) under the player bar. Off by default for a slimmer bar." } }, "spotify": { diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json index 963f3ba..a88e92f 100644 --- a/src/i18n/locales/es.json +++ b/src/i18n/locales/es.json @@ -1329,6 +1329,10 @@ "decreaseAria": "Reducir zoom", "increaseAria": "Aumentar zoom", "resetAria": "Restablecer al 100 %" + }, + "showAudioQualityFooter": { + "title": "Mostrar tira de calidad de audio", + "subtitle": "Detalles técnicos (kHz, kbps, códec, profundidad) bajo la barra de reproducción. Desactivado por defecto para una barra más fina." } }, "scanProgress": { diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json index 9298467..7870039 100644 --- a/src/i18n/locales/fr.json +++ b/src/i18n/locales/fr.json @@ -1395,6 +1395,10 @@ "decreaseAria": "Dézoomer l’interface", "increaseAria": "Zoomer l’interface", "resetAria": "Réinitialiser le zoom à 100 %" + }, + "showAudioQualityFooter": { + "title": "Afficher la qualité audio sous la barre", + "subtitle": "Détails techniques (kHz, kb/s, codec, profondeur) sous la player bar. Désactivé par défaut pour une barre plus fine." } }, "spotify": { diff --git a/src/i18n/locales/hi.json b/src/i18n/locales/hi.json index cd85f7d..bd6f918 100644 --- a/src/i18n/locales/hi.json +++ b/src/i18n/locales/hi.json @@ -1329,6 +1329,10 @@ "decreaseAria": "ज़ूम घटाएं", "increaseAria": "ज़ूम बढ़ाएं", "resetAria": "ज़ूम को 100 % पर रीसेट करें" + }, + "showAudioQualityFooter": { + "title": "ऑडियो गुणवत्ता पट्टी दिखाएं", + "subtitle": "प्लेयर बार के नीचे तकनीकी विवरण (kHz, kbps, कोडेक, बिट डेप्थ)। पतले बार के लिए डिफ़ॉल्ट रूप से बंद।" } }, "scanProgress": { diff --git a/src/i18n/locales/id.json b/src/i18n/locales/id.json index 86402db..28db2a7 100644 --- a/src/i18n/locales/id.json +++ b/src/i18n/locales/id.json @@ -1328,6 +1328,10 @@ "decreaseAria": "Perkecil", "increaseAria": "Perbesar", "resetAria": "Reset zoom ke 100 %" + }, + "showAudioQualityFooter": { + "title": "Tampilkan strip kualitas audio", + "subtitle": "Detail teknis (kHz, kbps, codec, kedalaman bit) di bawah bilah pemutar. Mati secara default untuk bilah yang lebih ramping." } }, "scanProgress": { diff --git a/src/i18n/locales/it.json b/src/i18n/locales/it.json index 2231478..050b201 100644 --- a/src/i18n/locales/it.json +++ b/src/i18n/locales/it.json @@ -1329,6 +1329,10 @@ "decreaseAria": "Riduci zoom", "increaseAria": "Aumenta zoom", "resetAria": "Ripristina al 100 %" + }, + "showAudioQualityFooter": { + "title": "Mostra la striscia di qualità audio", + "subtitle": "Dettagli tecnici (kHz, kbps, codec, profondità) sotto la player bar. Disattivato di default per una barra più sottile." } }, "scanProgress": { diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json index 2dd4dbe..24a212b 100644 --- a/src/i18n/locales/ja.json +++ b/src/i18n/locales/ja.json @@ -1328,6 +1328,10 @@ "decreaseAria": "縮小", "increaseAria": "拡大", "resetAria": "ズームを 100 % にリセット" + }, + "showAudioQualityFooter": { + "title": "オーディオ品質バーを表示", + "subtitle": "プレイヤーバー下に技術詳細（kHz、kbps、コーデック、ビット深度）を表示。スリムなバーを保つため既定でオフ。" } }, "scanProgress": { diff --git a/src/i18n/locales/ko.json b/src/i18n/locales/ko.json index 47a40c8..a24767a 100644 --- a/src/i18n/locales/ko.json +++ b/src/i18n/locales/ko.json @@ -1328,6 +1328,10 @@ "decreaseAria": "축소", "increaseAria": "확대", "resetAria": "확대/축소를 100 %로 재설정" + }, + "showAudioQualityFooter": { + "title": "오디오 품질 바 표시", + "subtitle": "플레이어 바 아래에 기술 정보(kHz, kbps, 코덱, 비트 깊이)를 표시합니다. 슬림한 바를 위해 기본값은 꺼짐입니다." } }, "scanProgress": { diff --git a/src/i18n/locales/nl.json b/src/i18n/locales/nl.json index c2d7b8b..04ea427 100644 --- a/src/i18n/locales/nl.json +++ b/src/i18n/locales/nl.json @@ -1329,6 +1329,10 @@ "decreaseAria": "Uitzoomen", "increaseAria": "Inzoomen", "resetAria": "Zoom terugzetten op 100 %" + }, + "showAudioQualityFooter": { + "title": "Audiokwaliteitsbalk tonen", + "subtitle": "Technische details (kHz, kbps, codec, bitdiepte) onder de afspeelbalk. Standaard uit voor een slankere balk." } }, "scanProgress": { diff --git a/src/i18n/locales/pt-BR.json b/src/i18n/locales/pt-BR.json index cb335fe..9fce115 100644 --- a/src/i18n/locales/pt-BR.json +++ b/src/i18n/locales/pt-BR.json @@ -1329,6 +1329,10 @@ "decreaseAria": "Diminuir zoom", "increaseAria": "Aumentar zoom", "resetAria": "Redefinir para 100 %" + }, + "showAudioQualityFooter": { + "title": "Mostrar faixa de qualidade de áudio", + "subtitle": "Detalhes técnicos (kHz, kbps, codec, profundidade) sob a barra do player. Desativado por padrão para uma barra mais fina." } }, "scanProgress": { diff --git a/src/i18n/locales/pt.json b/src/i18n/locales/pt.json index 6eb7246..0749624 100644 --- a/src/i18n/locales/pt.json +++ b/src/i18n/locales/pt.json @@ -1329,6 +1329,10 @@ "decreaseAria": "Diminuir zoom", "increaseAria": "Aumentar zoom", "resetAria": "Repor para 100 %" + }, + "showAudioQualityFooter": { + "title": "Mostrar faixa de qualidade de áudio", + "subtitle": "Detalhes técnicos (kHz, kbps, codec, profundidade) sob a barra do leitor. Desativado por padrão para uma barra mais fina." } }, "scanProgress": { diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json index a0c0701..ee9c59f 100644 --- a/src/i18n/locales/ru.json +++ b/src/i18n/locales/ru.json @@ -1331,6 +1331,10 @@ "decreaseAria": "Уменьшить", "increaseAria": "Увеличить", "resetAria": "Сбросить масштаб до 100 %" + }, + "showAudioQualityFooter": { + "title": "Показывать полосу качества аудио", + "subtitle": "Технические данные (кГц, кбит/с, кодек, разрядность) под панелью плеера. По умолчанию выключено для более компактной панели." } }, "scanProgress": { diff --git a/src/i18n/locales/tr.json b/src/i18n/locales/tr.json index 31df74f..5d3bcf0 100644 --- a/src/i18n/locales/tr.json +++ b/src/i18n/locales/tr.json @@ -1328,6 +1328,10 @@ "decreaseAria": "Uzaklaştır", "increaseAria": "Yakınlaştır", "resetAria": "Yakınlaştırmayı %100'e sıfırla" + }, + "showAudioQualityFooter": { + "title": "Ses kalitesi şeridini göster", + "subtitle": "Teknik ayrıntılar (kHz, kbps, codec, bit derinliği) oynatıcı çubuğunun altında. Daha ince bir çubuk için varsayılan olarak kapalı." } }, "scanProgress": { diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json index 9ac9548..1fb9b58 100644 --- a/src/i18n/locales/zh-CN.json +++ b/src/i18n/locales/zh-CN.json @@ -1328,6 +1328,10 @@ "decreaseAria": "缩小", "increaseAria": "放大", "resetAria": "重置缩放为 100 %" + }, + "showAudioQualityFooter": { + "title": "显示音频质量条", + "subtitle": "在播放栏下方显示技术详情（kHz、kbps、编解码、位深）。为保持播放栏轻巧，默认关闭。" } }, "scanProgress": { diff --git a/src/i18n/locales/zh-TW.json b/src/i18n/locales/zh-TW.json index 7425908..ad1a42a 100644 --- a/src/i18n/locales/zh-TW.json +++ b/src/i18n/locales/zh-TW.json @@ -1328,6 +1328,10 @@ "decreaseAria": "縮小", "increaseAria": "放大", "resetAria": "重置縮放為 100 %" + }, + "showAudioQualityFooter": { + "title": "顯示音訊品質列", + "subtitle": "在播放列下方顯示技術詳情（kHz、kbps、編解碼、位元深度）。為保持播放列輕巧，預設關閉。" } }, "scanProgress": { From cd42f41f2a92e0d784f1bc05dca724b7f219cc65 Mon Sep 17 00:00:00 2001 From: InstaZDLL Date: Thu, 21 May 2026 00:37:31 +0200 Subject: [PATCH 4/7] fix(player): bump player-bar artwork to 56 px MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Now that the audio quality footer is opt-in, the bar's vertical breathing room exposed how undersized the 48 px artwork looked against the bar's 80 px height (16 px top + 16 px bottom whitespace). Bump to 56 px (w-14) — 12 px margin top/bottom, balanced presence without crowding the title/controls. iconSize follows at 24 so the placeholder disc stays proportional. --- src/components/player/PlayerBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/player/PlayerBar.tsx b/src/components/player/PlayerBar.tsx index 424cb18..064095e 100644 --- a/src/components/player/PlayerBar.tsx +++ b/src/components/player/PlayerBar.tsx @@ -183,8 +183,8 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) { path1x={currentTrack?.artwork_path_1x ?? null} path2x={currentTrack?.artwork_path_2x ?? null} size="1x" - className="w-12 h-12 shadow-sm" - iconSize={20} + className="w-14 h-14 shadow-sm" + iconSize={24} alt={title} rounded="xl" /> From 7a101e25e7a4035d4ecd7640e267864cea4ec171 Mon Sep 17 00:00:00 2001 From: InstaZDLL Date: Thu, 21 May 2026 00:42:14 +0200 Subject: [PATCH 5/7] fix(player): grow player-bar back to h-24 to fit the larger controls MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous compact pass took the bar to h-20 (80 px); with the follow-up controls bump (icons 18 -> 20-22, play button w-9 -> w-11, heart p-1.5 -> p-2) the elements ended up cramped — the bar felt like a small jar with oversized contents. Bump back to h-24 (96 px) so everything breathes again. Net vs main: 96 px without the audio quality strip vs the historical 120 px (h-24 + h-6 footer). Strip is now opt-in via Settings, so users who want the old density still get it for free. --- src/components/player/PlaybackControls.tsx | 16 ++++++++-------- src/components/player/PlayerBar.tsx | 20 ++++++++++---------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/player/PlaybackControls.tsx b/src/components/player/PlaybackControls.tsx index 7f8b2d4..3ca1e11 100644 --- a/src/components/player/PlaybackControls.tsx +++ b/src/components/player/PlaybackControls.tsx @@ -51,7 +51,7 @@ export function PlaybackControls() { : "text-zinc-400 hover:text-zinc-800 dark:hover:text-white" }`} > - + @@ -89,7 +89,7 @@ export function PlaybackControls() { aria-label={t("player.controls.next")} className="text-zinc-400 hover:text-zinc-800 dark:hover:text-white transition-colors disabled:opacity-40 disabled:cursor-not-allowed" > - +
); diff --git a/src/components/player/PlayerBar.tsx b/src/components/player/PlayerBar.tsx index 064095e..2a1f82f 100644 --- a/src/components/player/PlayerBar.tsx +++ b/src/components/player/PlayerBar.tsx @@ -164,7 +164,7 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) { return ( <>
-
+
{/* Left: Track Info */}
{/* Click the cover to open the immersive Now Playing @@ -210,13 +210,13 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) { type="button" onClick={handleToggleLike} aria-label={isLiked ? t("liked.unlike") : t("liked.like")} - className={`p-1.5 rounded-full transition-colors shrink-0 ${ + className={`p-2 rounded-full transition-colors shrink-0 ${ isLiked ? "text-pink-500" : "text-zinc-300 dark:text-zinc-600 hover:text-pink-500" }`} > - + )}
@@ -251,26 +251,26 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) { onClick={toggleLyrics} aria-label={t("playerBar.lyrics")} title={t("playerBar.lyrics")} - className={`p-1.5 rounded-lg transition-colors ${ + className={`p-2 rounded-lg transition-colors ${ isLyricsOpen ? "text-emerald-500" : "text-zinc-400 hover:text-zinc-800 dark:hover:text-white" }`} > - + {!isSpotify && ( @@ -286,7 +286,7 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) { : "border-transparent text-zinc-400 hover:text-zinc-800 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-zinc-800" }`} > - +
)} @@ -328,7 +328,7 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) { title={t("playerBar.miniPlayer")} className="p-1.5 rounded-lg text-zinc-400 hover:text-zinc-800 dark:hover:text-white transition-colors" > - + )} @@ -340,7 +340,7 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) { title={t("playerBar.openFullscreen")} className="p-1.5 rounded-lg text-zinc-400 hover:text-zinc-800 dark:hover:text-white transition-colors disabled:opacity-40 disabled:cursor-not-allowed" > - +
From 4a66f05c1f614895ead7903ab4319132e41e3c96 Mon Sep 17 00:00:00 2001 From: InstaZDLL Date: Thu, 21 May 2026 00:43:51 +0200 Subject: [PATCH 6/7] fix(player): unify transport row at size 20 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous bump took the play button to w-11 + icons size 22 while keeping skip prev/next at 22 too — but the play button's green disc background makes it visually heavier than the bare-icon siblings, so the disparity read as 'huge play button vs thin everything else'. Pull every transport control to size 20 and the play button back to w-10 (40 px). Row reads as one coherent cluster: shuffle 20, prev 20, play (w-10) 20, next 20, repeat 20. --- src/components/player/PlaybackControls.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/player/PlaybackControls.tsx b/src/components/player/PlaybackControls.tsx index 3ca1e11..d757ebf 100644 --- a/src/components/player/PlaybackControls.tsx +++ b/src/components/player/PlaybackControls.tsx @@ -60,7 +60,7 @@ export function PlaybackControls() { aria-label={t("player.controls.previous")} className="text-zinc-400 hover:text-zinc-800 dark:hover:text-white transition-colors disabled:opacity-40 disabled:cursor-not-allowed" > - + @@ -89,7 +89,7 @@ export function PlaybackControls() { aria-label={t("player.controls.next")} className="text-zinc-400 hover:text-zinc-800 dark:hover:text-white transition-colors disabled:opacity-40 disabled:cursor-not-allowed" > - +