feat(album): show OpenSubsonic disc subtitles after the CD heading (#753)

* feat(album): show OpenSubsonic disc subtitles after the CD heading

Multi-disc albums in OpenSubsonic / Navidrome carry a per-disc
subtitle (`discTitles`) — e.g. "Sessions" on CD 3 of a deluxe
edition. AlbumTrackList only rendered "CD N" and dropped the
subtitle, so users couldn't tell two discs apart unless they read
the track names.

* `SubsonicAlbum.discTitles` typed; `getAlbum` forwards it as-is.
* `AlbumTrackList` and `AlbumTrackListMobile` take a discTitleByNum
  map and render the subtitle in the disc separator after "CD N".
* Heading bumped slightly (13 → 15 px, icon 16 → 18 px) so the disc
  separator stays legible next to the new subtitle.

* docs(changelog): note disc subtitles after CD heading (#753)
This commit is contained in:
Frank Stellmacher
2026-05-17 15:29:29 +02:00
committed by GitHub
parent 48c7b8b780
commit 6595c146a3
6 changed files with 43 additions and 2 deletions
+10
View File
@@ -20,6 +20,8 @@ export type { SortKey } from '../utils/componentHelpers/albumTrackListHelpers';
interface AlbumTrackListProps {
songs: SubsonicSong[];
/** Per-disc subtitles from the album payload, rendered after "CD N". */
discTitles?: { disc: number; title: string }[];
sorted?: boolean;
hasVariousArtists: boolean;
currentTrack: Track | null;
@@ -42,6 +44,7 @@ interface AlbumTrackListProps {
export default function AlbumTrackList({
songs,
discTitles,
sorted,
hasVariousArtists: _hasVariousArtists,
currentTrack,
@@ -90,6 +93,9 @@ export default function AlbumTrackList({
}
const discNums = sorted ? [1] : Array.from(discs.keys()).sort((a, b) => a - b);
const isMultiDisc = !sorted && discNums.length > 1;
const discTitleByNum = new Map<number, string>(
(discTitles ?? []).filter(d => d.title?.trim()).map(d => [d.disc, d.title.trim()]),
);
const currentTrackId = currentTrack?.id ?? null;
@@ -98,6 +104,7 @@ export default function AlbumTrackList({
<AlbumTrackListMobile
discNums={discNums}
discs={discs}
discTitleByNum={discTitleByNum}
isMultiDisc={isMultiDisc}
currentTrackId={currentTrackId}
isPlaying={isPlaying}
@@ -150,6 +157,9 @@ export default function AlbumTrackList({
<div className="disc-header">
<span className="disc-icon">💿</span>
CD {discNum}
{discTitleByNum.get(discNum) && (
<span className="disc-subtitle">{discTitleByNum.get(discNum)}</span>
)}
</div>
)}
{discs.get(discNum)!.map(song => {
@@ -8,6 +8,7 @@ import { formatLongDuration } from '../../utils/format/formatDuration';
interface Props {
discNums: number[];
discs: Map<number, SubsonicSong[]>;
discTitleByNum: Map<number, string>;
isMultiDisc: boolean;
currentTrackId: string | null;
isPlaying: boolean;
@@ -31,6 +32,7 @@ interface Props {
export function AlbumTrackListMobile({
discNums,
discs,
discTitleByNum,
isMultiDisc,
currentTrackId,
isPlaying,
@@ -46,6 +48,9 @@ export function AlbumTrackListMobile({
{isMultiDisc && (
<div className="disc-header">
<span className="disc-icon">💿</span> CD {discNum}
{discTitleByNum.get(discNum) && (
<span className="disc-subtitle">{discTitleByNum.get(discNum)}</span>
)}
</div>
)}
{discs.get(discNum)!.map(song => {