From a48159d302faf982415f27846634c29e789b8f73 Mon Sep 17 00:00:00 2001 From: Psychotoxical Date: Sun, 19 Apr 2026 12:24:46 +0200 Subject: [PATCH] feat(queue): split tech bar into two lines when ReplayGain is present MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The tech info strip in the queue header was a single ellipsised line, so ReplayGain values (Track / Album / Peak) got cut off on tracks with a full codec + bitrate + samplerate prefix. Now the strip wraps into two lines whenever RG values exist: - Line 1: codec · bitrate · bit depth/sample rate (unchanged) - Line 2: 'ReplayGain · T … dB · A … dB · Peak …' — slightly smaller and dimmed for hierarchy, ellipsises independently if it still overflows. Tracks without RG metadata stay one line as before. New i18n key `queue.replayGain` ('ReplayGain') added to all 8 locales. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/QueuePanel.tsx | 17 +++++++++++++---- src/locales/de.ts | 1 + src/locales/en.ts | 1 + src/locales/es.ts | 1 + src/locales/fr.ts | 1 + src/locales/nb.ts | 1 + src/locales/nl.ts | 1 + src/locales/ru.ts | 1 + src/locales/zh.ts | 1 + src/styles/layout.css | 21 +++++++++++++++++++++ 10 files changed, 42 insertions(+), 4 deletions(-) diff --git a/src/components/QueuePanel.tsx b/src/components/QueuePanel.tsx index 0675319a..720120db 100644 --- a/src/components/QueuePanel.tsx +++ b/src/components/QueuePanel.tsx @@ -451,10 +451,11 @@ export default function QueuePanel() { })(), ].filter(Boolean) as string[]; const rgParts = formatQueueReplayGainParts(currentTrack, t); - const techLine = [...baseParts, ...rgParts].join(' · '); - if (!techLine && !playbackSource) return null; + const baseLine = baseParts.join(' · '); + const rgLine = rgParts.join(' · '); + if (!baseLine && !rgLine && !playbackSource) return null; return ( -
+
{playbackSource && ( } )} - {techLine} +
+ {baseLine && {baseLine}} + {rgLine && ( + + {t('queue.replayGain')} + {' · '}{rgLine} + + )} +
); })()} diff --git a/src/locales/de.ts b/src/locales/de.ts index dd9243da..d17662f2 100644 --- a/src/locales/de.ts +++ b/src/locales/de.ts @@ -904,6 +904,7 @@ export const deTranslation = { trackPlural: 'Titel', showRemaining: 'Restzeit anzeigen', showTotal: 'Gesamtzeit anzeigen', + replayGain: 'ReplayGain', rgTrack: 'T {{db}} dB', rgAlbum: 'A {{db}} dB', rgPeak: 'Peak {{pk}}', diff --git a/src/locales/en.ts b/src/locales/en.ts index a762ee3d..0e59a4c7 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -906,6 +906,7 @@ export const enTranslation = { trackPlural: 'tracks', showRemaining: 'Show remaining time', showTotal: 'Show total time', + replayGain: 'ReplayGain', rgTrack: 'T {{db}} dB', rgAlbum: 'A {{db}} dB', rgPeak: 'Peak {{pk}}', diff --git a/src/locales/es.ts b/src/locales/es.ts index 7940793d..1d01ec63 100644 --- a/src/locales/es.ts +++ b/src/locales/es.ts @@ -897,6 +897,7 @@ export const esTranslation = { trackPlural: 'pistas', showRemaining: 'Mostrar tiempo restante', showTotal: 'Mostrar tiempo total', + replayGain: 'ReplayGain', rgTrack: 'T {{db}} dB', rgAlbum: 'A {{db}} dB', rgPeak: 'Pico {{pk}}', diff --git a/src/locales/fr.ts b/src/locales/fr.ts index 5705ae17..baf69967 100644 --- a/src/locales/fr.ts +++ b/src/locales/fr.ts @@ -892,6 +892,7 @@ export const frTranslation = { trackPlural: 'pistes', showRemaining: 'Afficher le temps restant', showTotal: 'Afficher la durée totale', + replayGain: 'ReplayGain', rgTrack: 'T {{db}} dB', rgAlbum: 'A {{db}} dB', rgPeak: 'Pic {{pk}}', diff --git a/src/locales/nb.ts b/src/locales/nb.ts index a2b21839..33f1aee2 100644 --- a/src/locales/nb.ts +++ b/src/locales/nb.ts @@ -891,6 +891,7 @@ export const nbTranslation = { trackPlural: 'spor', showRemaining: 'Vis gjenværende tid', showTotal: 'Vis total tid', + replayGain: 'ReplayGain', rgTrack: 'T {{db}} dB', rgAlbum: 'A {{db}} dB', rgPeak: 'Topp {{pk}}', diff --git a/src/locales/nl.ts b/src/locales/nl.ts index 72db201a..56cb4318 100644 --- a/src/locales/nl.ts +++ b/src/locales/nl.ts @@ -891,6 +891,7 @@ export const nlTranslation = { trackPlural: 'nummers', showRemaining: 'Resterende tijd tonen', showTotal: 'Totale tijd tonen', + replayGain: 'ReplayGain', rgTrack: 'T {{db}} dB', rgAlbum: 'A {{db}} dB', rgPeak: 'Piek {{pk}}', diff --git a/src/locales/ru.ts b/src/locales/ru.ts index 7d573273..997c6929 100644 --- a/src/locales/ru.ts +++ b/src/locales/ru.ts @@ -944,6 +944,7 @@ export const ruTranslation = { trackPlural: 'треков', showRemaining: 'Осталось', showTotal: 'Всего', + replayGain: 'ReplayGain', rgTrack: 'Т {{db}} дБ', rgAlbum: 'А {{db}} дБ', rgPeak: 'Пик {{pk}}', diff --git a/src/locales/zh.ts b/src/locales/zh.ts index b557f102..f3d49d03 100644 --- a/src/locales/zh.ts +++ b/src/locales/zh.ts @@ -887,6 +887,7 @@ export const zhTranslation = { trackPlural: '首曲目', showRemaining: '显示剩余时间', showTotal: '显示总时间', + replayGain: 'ReplayGain', rgTrack: '曲目 {{db}} dB', rgAlbum: '专辑 {{db}} dB', rgPeak: '峰值 {{pk}}', diff --git a/src/styles/layout.css b/src/styles/layout.css index bf7f4aa0..607e6c6b 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -1720,6 +1720,27 @@ text-overflow: ellipsis; } +/* Two-line layout: base info on top, ReplayGain underneath. The stack + wraps both spans so the source icon stays vertically centered next to + the whole text block. */ +.queue-current-tech-stack { + min-width: 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 1px; +} + +.queue-current-tech-rg { + min-width: 0; + max-width: 100%; + font-size: 8px; + opacity: 0.72; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + .queue-divider { padding: var(--space-3) var(--space-4) 0; flex-shrink: 0;