add support for track subtitle display (#1177)

This commit is contained in:
jeffvli
2026-01-04 00:44:22 -08:00
parent 1c6b204e80
commit 5f1867c14f
9 changed files with 53 additions and 6 deletions
@@ -16,3 +16,7 @@
.name-container.large {
-webkit-line-clamp: 3;
}
.active {
color: var(--theme-colors-primary);
}
@@ -83,8 +83,6 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
const item = props.data[props.rowIndex] as any;
const textStyles = isActive ? { color: 'var(--theme-colors-primary)' } : {};
const titleLinkProps = path
? {
component: Link,
@@ -98,15 +96,29 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
<TableColumnContainer {...props}>
<Text
className={clsx({
[styles.active]: isActive,
[styles.compact]: props.size === 'compact',
[styles.large]: props.size === 'large',
[styles.nameContainer]: true,
})}
isNoSelect
{...titleLinkProps}
style={textStyles}
>
{row}
{song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
<Text
className={clsx({
[styles.active]: isActive,
})}
component="span"
isMuted
size="sm"
>
{' ('}
{song.trackSubtitle}
{')'}
</Text>
)}
</Text>
</TableColumnContainer>
);
@@ -70,3 +70,7 @@
width: 24px;
height: 24px;
}
.active {
color: var(--theme-colors-primary);
}
@@ -213,7 +213,6 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
const item = props.data[props.rowIndex] as any;
const textStyles = isActive ? { color: 'var(--theme-colors-primary)' } : {};
const titleLinkProps = path
? {
@@ -265,17 +264,34 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
</div>
<div
className={clsx(styles.textContainer, {
[styles.active]: isActive,
[styles.compact]: props.size === 'compact',
})}
>
<Text
className={styles.title}
className={clsx({
[styles.active]: isActive,
[styles.title]: true,
})}
isNoSelect
size="md"
{...titleLinkProps}
style={textStyles}
>
{row.name as string}
{song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
<Text
className={clsx({
[styles.active]: isActive,
})}
component="span"
isMuted
size="sm"
>
{' ('}
{song.trackSubtitle}
{')'}
</Text>
)}
</Text>
<div className={styles.artists}>
<JoinedArtists