mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-21 22:15:40 +00:00
feat(queue): split tech bar into two lines when ReplayGain is present
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) <noreply@anthropic.com>
This commit is contained in:
@@ -451,10 +451,11 @@ export default function QueuePanel() {
|
|||||||
})(),
|
})(),
|
||||||
].filter(Boolean) as string[];
|
].filter(Boolean) as string[];
|
||||||
const rgParts = formatQueueReplayGainParts(currentTrack, t);
|
const rgParts = formatQueueReplayGainParts(currentTrack, t);
|
||||||
const techLine = [...baseParts, ...rgParts].join(' · ');
|
const baseLine = baseParts.join(' · ');
|
||||||
if (!techLine && !playbackSource) return null;
|
const rgLine = rgParts.join(' · ');
|
||||||
|
if (!baseLine && !rgLine && !playbackSource) return null;
|
||||||
return (
|
return (
|
||||||
<div className="queue-current-tech">
|
<div className={`queue-current-tech${rgLine ? ' queue-current-tech--two-line' : ''}`}>
|
||||||
{playbackSource && (
|
{playbackSource && (
|
||||||
<span
|
<span
|
||||||
className="queue-current-tech-source"
|
className="queue-current-tech-source"
|
||||||
@@ -472,7 +473,15 @@ export default function QueuePanel() {
|
|||||||
{playbackSource === 'stream' && <Waves size={11} strokeWidth={2.25} />}
|
{playbackSource === 'stream' && <Waves size={11} strokeWidth={2.25} />}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
<span className="queue-current-tech-main">{techLine}</span>
|
<div className="queue-current-tech-stack">
|
||||||
|
{baseLine && <span className="queue-current-tech-main">{baseLine}</span>}
|
||||||
|
{rgLine && (
|
||||||
|
<span className="queue-current-tech-rg">
|
||||||
|
<span className="queue-current-tech-rg-label">{t('queue.replayGain')}</span>
|
||||||
|
{' · '}{rgLine}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})()}
|
})()}
|
||||||
|
|||||||
@@ -904,6 +904,7 @@ export const deTranslation = {
|
|||||||
trackPlural: 'Titel',
|
trackPlural: 'Titel',
|
||||||
showRemaining: 'Restzeit anzeigen',
|
showRemaining: 'Restzeit anzeigen',
|
||||||
showTotal: 'Gesamtzeit anzeigen',
|
showTotal: 'Gesamtzeit anzeigen',
|
||||||
|
replayGain: 'ReplayGain',
|
||||||
rgTrack: 'T {{db}} dB',
|
rgTrack: 'T {{db}} dB',
|
||||||
rgAlbum: 'A {{db}} dB',
|
rgAlbum: 'A {{db}} dB',
|
||||||
rgPeak: 'Peak {{pk}}',
|
rgPeak: 'Peak {{pk}}',
|
||||||
|
|||||||
@@ -906,6 +906,7 @@ export const enTranslation = {
|
|||||||
trackPlural: 'tracks',
|
trackPlural: 'tracks',
|
||||||
showRemaining: 'Show remaining time',
|
showRemaining: 'Show remaining time',
|
||||||
showTotal: 'Show total time',
|
showTotal: 'Show total time',
|
||||||
|
replayGain: 'ReplayGain',
|
||||||
rgTrack: 'T {{db}} dB',
|
rgTrack: 'T {{db}} dB',
|
||||||
rgAlbum: 'A {{db}} dB',
|
rgAlbum: 'A {{db}} dB',
|
||||||
rgPeak: 'Peak {{pk}}',
|
rgPeak: 'Peak {{pk}}',
|
||||||
|
|||||||
@@ -897,6 +897,7 @@ export const esTranslation = {
|
|||||||
trackPlural: 'pistas',
|
trackPlural: 'pistas',
|
||||||
showRemaining: 'Mostrar tiempo restante',
|
showRemaining: 'Mostrar tiempo restante',
|
||||||
showTotal: 'Mostrar tiempo total',
|
showTotal: 'Mostrar tiempo total',
|
||||||
|
replayGain: 'ReplayGain',
|
||||||
rgTrack: 'T {{db}} dB',
|
rgTrack: 'T {{db}} dB',
|
||||||
rgAlbum: 'A {{db}} dB',
|
rgAlbum: 'A {{db}} dB',
|
||||||
rgPeak: 'Pico {{pk}}',
|
rgPeak: 'Pico {{pk}}',
|
||||||
|
|||||||
@@ -892,6 +892,7 @@ export const frTranslation = {
|
|||||||
trackPlural: 'pistes',
|
trackPlural: 'pistes',
|
||||||
showRemaining: 'Afficher le temps restant',
|
showRemaining: 'Afficher le temps restant',
|
||||||
showTotal: 'Afficher la durée totale',
|
showTotal: 'Afficher la durée totale',
|
||||||
|
replayGain: 'ReplayGain',
|
||||||
rgTrack: 'T {{db}} dB',
|
rgTrack: 'T {{db}} dB',
|
||||||
rgAlbum: 'A {{db}} dB',
|
rgAlbum: 'A {{db}} dB',
|
||||||
rgPeak: 'Pic {{pk}}',
|
rgPeak: 'Pic {{pk}}',
|
||||||
|
|||||||
@@ -891,6 +891,7 @@ export const nbTranslation = {
|
|||||||
trackPlural: 'spor',
|
trackPlural: 'spor',
|
||||||
showRemaining: 'Vis gjenværende tid',
|
showRemaining: 'Vis gjenværende tid',
|
||||||
showTotal: 'Vis total tid',
|
showTotal: 'Vis total tid',
|
||||||
|
replayGain: 'ReplayGain',
|
||||||
rgTrack: 'T {{db}} dB',
|
rgTrack: 'T {{db}} dB',
|
||||||
rgAlbum: 'A {{db}} dB',
|
rgAlbum: 'A {{db}} dB',
|
||||||
rgPeak: 'Topp {{pk}}',
|
rgPeak: 'Topp {{pk}}',
|
||||||
|
|||||||
@@ -891,6 +891,7 @@ export const nlTranslation = {
|
|||||||
trackPlural: 'nummers',
|
trackPlural: 'nummers',
|
||||||
showRemaining: 'Resterende tijd tonen',
|
showRemaining: 'Resterende tijd tonen',
|
||||||
showTotal: 'Totale tijd tonen',
|
showTotal: 'Totale tijd tonen',
|
||||||
|
replayGain: 'ReplayGain',
|
||||||
rgTrack: 'T {{db}} dB',
|
rgTrack: 'T {{db}} dB',
|
||||||
rgAlbum: 'A {{db}} dB',
|
rgAlbum: 'A {{db}} dB',
|
||||||
rgPeak: 'Piek {{pk}}',
|
rgPeak: 'Piek {{pk}}',
|
||||||
|
|||||||
@@ -944,6 +944,7 @@ export const ruTranslation = {
|
|||||||
trackPlural: 'треков',
|
trackPlural: 'треков',
|
||||||
showRemaining: 'Осталось',
|
showRemaining: 'Осталось',
|
||||||
showTotal: 'Всего',
|
showTotal: 'Всего',
|
||||||
|
replayGain: 'ReplayGain',
|
||||||
rgTrack: 'Т {{db}} дБ',
|
rgTrack: 'Т {{db}} дБ',
|
||||||
rgAlbum: 'А {{db}} дБ',
|
rgAlbum: 'А {{db}} дБ',
|
||||||
rgPeak: 'Пик {{pk}}',
|
rgPeak: 'Пик {{pk}}',
|
||||||
|
|||||||
@@ -887,6 +887,7 @@ export const zhTranslation = {
|
|||||||
trackPlural: '首曲目',
|
trackPlural: '首曲目',
|
||||||
showRemaining: '显示剩余时间',
|
showRemaining: '显示剩余时间',
|
||||||
showTotal: '显示总时间',
|
showTotal: '显示总时间',
|
||||||
|
replayGain: 'ReplayGain',
|
||||||
rgTrack: '曲目 {{db}} dB',
|
rgTrack: '曲目 {{db}} dB',
|
||||||
rgAlbum: '专辑 {{db}} dB',
|
rgAlbum: '专辑 {{db}} dB',
|
||||||
rgPeak: '峰值 {{pk}}',
|
rgPeak: '峰值 {{pk}}',
|
||||||
|
|||||||
@@ -1720,6 +1720,27 @@
|
|||||||
text-overflow: ellipsis;
|
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 {
|
.queue-divider {
|
||||||
padding: var(--space-3) var(--space-4) 0;
|
padding: var(--space-3) var(--space-4) 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user